CSS and HTML 16: Colours

CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.

red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green,lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is also a valid value.

The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage.

Hexadecimal (previously and more accurately known as 'sexadecimal') is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes#ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour.

'color' and 'background-color'

Colours can be applied by using color and background-color (note that this must be the American English 'color' and not 'colour').

A blue background and yellow text could look like this:

h1 {
 color: yellow;
 background-color: blue;
}

These colours might be a little too harsh, so you could change the code of your CSS file for slightly different shades:

body {
 font-size: 0.8em;
 color: navy;
}

h1 {
 color: #ffc;
 background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colours of the first heading (the h1 element) have changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the page and everything in it.

CSS and HTML 15: CSS Selectors, Properties, and Values

Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.

For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A value is given to the property following a colon (NOT an 'equals' sign) and semi-colonsseparate the properties.

body {
 font-size: 0.8em;
 color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.

So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.

em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.

px (such as font-size: 12px) is the unit for pixels.

pt (such as font-size: 12pt) is the unit for points.

% (such as font-size: 80%) is the unit for... wait for it... percentages.

Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how the hell they like, which includes the font size and the size of the screen.

Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in theCSS Advanced Tutorial), rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.

CSS and HTML 14: Applying CSS

There are three ways to apply CSS to HTML.

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

<p style="color: red">text</p>

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone,presentation free document, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the styletags surround all of the styles for the page.

This would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
 p {
  color: red;
 }

 a {
  color: blue;
 }
</style>
...

This will make all of the paragraphs in the page red and all of the links blue.

Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour...

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

p {
 color: red;
}

a {
 color: blue;
}

If this file is saved as "web.css" then it can be linked to in the HTML like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>CSS Example</title>
 <link rel="stylesheet" type="text/css" href="web.css" />
...

In the CSS Advanced Tutorial, we will see that there are other ways of linking external style sheets, but this will suffice for now.

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as "web.css" in the same directory as your HTML file.

Now change your HTML file so that it starts something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <title>My first web page</title>
 <link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won't change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

CSS and HTML 13: CSS Basic

Like the HTML Beginner Tutorial, the CSS Beginner Tutorial assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials - just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial go into more depth about CSS.

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

Styles don't smell or taste anything like HTML, they have a format of 'property: value' and most properties can be applied to most HTML tags.

• Applying CSS - The different ways you can apply CSS to HTML.
• Selectors, Properties, and Values - The bits that make up CSS.
• Colours - How to use colour.
• Text - How to manipulate the size and shape of text.
• Margins and Padding - How to space things out.
• Borders - Erm. Borders. Fings wot go around fings.
• Putting It All Together - Throwing all of the above ingredients into one spicy hotpot.

CSS and HTML 12:Putting It All Together

If you have gone through all of the pages in this HTML Basics then you should be a competent HTMLer.

In fact, due to the fact that most people who use HTML use it rather badly, you should be better than most.

he following code incorporates all of the methods that have been explained in the previous pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

 <title>My first web page</title>

 <!-- By the way, this is a comment -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
 <li>To learn HTML</li>
 <li>
  To show off
  <ol>
   <li>To my boss</li>
   <li>To my friends</li>
   <li>To my cat</li>
   <li>To the little talking duck in my brain</li>
  </ol>
 </li>
 <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>

<h3>Some random table</h3>
<table border="1">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
 <tr>
  <td>Row 4, cell 1</td>
  <td>Row 4, cell 2</td>
  <td>Row 4, cell 3</td>
 </tr>
</table>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

<p><input type="submit" /></p>

<p><input type="reset" /></p>

</form>

</body>

</html>

There you have it. Save the file and play around with it - this is the best way to understand how everything works. Go on. Tinker.

When you're happy, you can move on to the CSS Beginner Tutorial.

CSS and HTML 11: Forms

Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email

On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside of the remit of this website. If you use an internet service provider to host your HTML, they will be able to help you with this and will probably have clear and simple instructions on how, for example, to make a form-to-email form work.

The basic tags used in the actual HTML of forms are form, input, textarea, select and option.

form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.

The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to postwhich hides the information (get latches the information onto the URL).

So a form element will look something like this:

<form action="processingscript.php" method="post">

</form>

The input tag is the daddy of the form world. It can take ten forms, outlined below:

• <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
• <input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
• <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.
• <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.
• <input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.
• <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and resettypes - see below) with the value attribute, for example <input type="submit"value="Ooo. Look. Text on a button. Wow" />.
• <input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.
• <input type="button" /> is a button that will not do anything without extra code added.
• <input type="reset" /> is a button that when selected will reset the form fields to their default values.
• <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.

Note that the input tag closes itself with a "/>" at the end.

A textarea is, basically, a large textbox. It requires a rows and cols attribute and is used like this:

<textarea rows="5" cols="20">A big load of text here</textarea>

The select tag works with the option tag to make drop-down select boxes.

They work like this:

<select>
 <option value="first option">Option 1</option>
 <option value="second option">Option 2</option>
 <option value="third option">Option 3</option>
</select>

When the form is submitted, the value of the selected option will be sent.

Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>.

All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge" />

A form might look like the one below. (Note: this form will not work unless there is a "contactus.php" file, which is stated in the action attribute of the form tag, to handle the submitted date)

<form action="contactus.php" method="post">

 <p>Name:</p>
 <p><input type="text" name="name" value="Your name" /></p>

 <p>Comments: </p>
 <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

 <p>Are you:</p>
 <p><input type="radio" name="areyou" value="male" /> Male</p>
 <p><input type="radio" name="areyou" value="female" /> Female</p>
 <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
 <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

 <p><input type="submit" /></p>

 <p><input type="reset" /></p>

</form>

There is a whole other level of complexity you can delve into in the HTML Advanced Tutorial if you are so inclined.