(t:CSS Basics:t)

In this tutorial we'll cover some of the basics of CSS.

CSS is an acronym for Cascading Style Sheets. It's a language developed as an extension of HTML for document presentation. For an in-depth look at it's history and development you can check out the Wikipedia entry for CSS.

So let's get to it... Open your text editor and enter this code below:

<html> <head> <title>My first CSS web page</title> </head> <body> Hello World! </body> </html>

It's a simple HTML document which should suite our purposes in this tutorial. Save it as "test.html" and open it in your web browser to see the following:

Hello World!

Okay, now we're going to use a CSS method called "inline" to modify the text. Using this method you simply add a "style" property and it's elements to the tag you want modify.

Now add lines #6 and #8 in your code as follows:

<html> <head> <title>My first CSS web page</title> </head> <body> <font style="background:red; color:#ffffff;"> Hello World! </font> </body> </html>

Reload the file in your browser and you should see:

Hello World!

If you look at the "style" property in the <font> tag you'll notice two attributes are set:
"background:red;" and "color:#ffffff;".

The "background" attribute sets the background color for this section of text using the value "red".
The "color" attribute sets the foreground/text color for this section of text using the value "#ffffff" which is the "hexadecimal" value for "white" as discussed in the "HTML Basics" tutorial.

This is the simplest method of using style sheets. Again this method is called "inline". There is another method called "internal".

As discussed in the "HTML Basics" tutorial there is a section at the top of the web page called the "header". Within this section you can define styles called "selectors" that will be applied to specific elements in a web page.

Enter ALL of the following code in your editor and save it as "test.html":

<html> <head> <title>My first CSS web page</title> <style> body {background:yellow;} font {background:red; color:white;} </style> </head> <body> Hello World!<br> <font>What a lovely day!</font> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day!

All the style elements have been defined in the header of the page between the <style> and </style> tags (note lines #4 through #7). We'll refer to the elements within these two tags as our style sheet.
No styles are defined in the HTML tags within the body.
Notice the background of the page body is yellow as defined in the body style definition (or "selector") in the header.
Notice that the first line of text in the sample above is the regular black color with the normal background color.
While the line beneath it implements the <font> tag and displays the color attributes set in the font selector in the header.

This is a good way to set default display attributes for your document. But what if you want to utilize other attributes on occasion? One way is to simply use the standard HTML tag properties OR you could define a style "class".

There are a variety of ways you can define a class in a style sheet. We'll be covering the two most commonly used methods in this tutorial.

You can define a class "universally" or as part of an HTML element. Look at the following code which defines both respectively in our style sheet.

Change your code to look like the following:

<html> <head> <title>My first CSS web page</title> <style> body {background:yellow;} .red {color:red;} font.blue {color:blue;} </style> </head> <body> <center class="red"> Hello World!<br> <font class="blue">What a lovely day!</font> </center> <center class="blue"> This line should be BLACK.<br> <font class="red">This line should be RED.</font><br> </center> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day! This line should be BLACK.
This line should be RED.

Line #6 defines a universal class called "red". Note classname is preceeded with a period (".") and nothing else. This implies that this class can be used with ANY HTML tag in the page. This is implemented in line #11 with the <center> tag using the "class" property.
Line #7 defines a specific selector class for the <font> tag ("font.blue"). Note the classname "blue" is preceeded with the selector "font" and a period. This is implemented in line #13 and will only work for the <font> HTML tags within the page that reference the class "blue".
In line #16 the <center> tag attempts to implement the class "blue". But this class was specifically defined for the <font> tag and therefore will not work. So any text will be the default color BLACK instead of BLUE. The text is BLACK because no <font> tag was used for this line of text. Therefore no font selector will be referenced in the style sheet and the text color will be the default color of the page.
Line #18 implements the class RED. Since this class is "universal" (not explicitly associated with any HTML elements) you can use it in ANY tag and it will work. You can see the class RED is implemented in line #11 with the <center> tag and in line #18 with the <font> tag.

Inheritance

Styles will inherit attributes from more UNIVERSAL styles unless explicitly defined in there attributes. You can take advantage of this or it can also be a problem.

Add lines #6 and #20 to your code as follows:

<html> <head> <title>My first CSS web page</title> <style> body {background:yellow;} font {background:red; color:white;} .red {color:red;} font.blue {color:blue;} </style> </head> <body> <center class="red"> Hello World!<br> <font class="blue">What a lovely day!</font> </center> <center class="blue"> This line should be BLACK.<br> <font class="red">This line should be RED.</font><br> <font>This line should be WHITE on RED.</font> </center> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day! This line should be BLACK.
This line should be RED.
This line should be WHITE on RED.

As you can see, every line in the code which implements the <font> tag utilizes the font selector in line #6 which sets the background color to "red". Regardless of what <font> tags are used, they will alway utilize the attributes in the font selector unless explicitly set in the tag or another font selector class. This is called inheritance.
Line #8 creates a font selector class that sets the text color to "blue". Since there is a universal style defined for the font selector in line #6 then the font selector class "blue" will inherit the background property of the universal font selector in line #6.
This becomes a problem for any styles that set the text color to red as you can see in the 4th line of the sample above.
One way to handle this is to create a new font selector class called "red" that explicitly sets the background color.

Add line #9 and remove the "class" property in line #18 in your code as follows:

<html> <head> <title>My first CSS web page</title> <style> body {background:yellow;} font {background:red; color:white;} .red {color:red;} font.blue {color:blue;} font.red {background:white; color:red;} </style> </head> <body> <center class="red"> Hello World!<br> <font class="blue">What a lovely day!</font> </center> <center> This line should be BLACK.<br> <font class="red">This line should be RED.</font><br> <font>This line should be WHITE on RED.</font> </center> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day! This line should be BLACK.
This line should be RED.
This line should be WHITE on RED.

Line #20 uses the class "red" but also utilizes the HTML <font> tag. Since there is a new class specifically assigned to the font selector in line #9, which sets the background to "white", this is the class that will be used as opposed to the universal class in line #7.

External Style Sheets

Suppose you are writing a number of web pages that implement the same styles as defined between the <style> and </style> tags in our header?

You will need to add this code to each page you create. And every time you change the styles in one page, you have to change them in all the pages. Unless you take advantage of external style sheets.

External style sheets are separate files that contain style definitions. You implement them in your web pages using the HTML tag <link> in your header.

Create a new file in your text editor and call it "styles01.css". In the code above, copy the style elements between the <style> and </style> tags (lines #5 through #9) and paste the content into the new file and save it.

In your web page delete the style sheet in your header (lines #4 through #10) and add the <link> tag with it's corrosponding properties to your header like so:

<html> <head> <title>My first CSS web page</title> <link rel="stylesheet" href="styles01.css" type="text/css"> </head> <body> <center class="red"> Hello World!<br> <font class="blue">What a lovely day!</font> </center> <center> This line should be BLACK.<br> <font class="red">This line should be RED.</font><br> <font>This line should be WHITE on RED.</font> </center> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day! This line should be BLACK.
This line should be RED.
This line should be WHITE on RED.

Now the web page references it's style definitions from the external file "styles01.css" as indicated in the <link> tag in line #4.
If you need to change a style definition you need only modify the file "styles.css" and the changes will be applied to any web pages that reference this file.

More on Inheritance

As discussed earlier, styles and style sheets inherit the attributes of other styles and style sheets. This applies to inline, internal and external style sheets. Hence the term Cascading Style Sheets (or CSS).

Add lines #5 through #7 and modify line #10 in your code like so:

<html> <head> <title>My first CSS web page</title> <link rel="stylesheet" href="styles01.css" type="text/css"> <style> center {background:lightgrey;} </style> </head> <body> <center class="red" style="border:2px solid black;"> Hello World!<br> <font class="blue">What a lovely day!</font> </center> <center> This line should be BLACK.<br> <font class="red">This line should be RED.</font><br> <font>This line should be WHITE on RED.</font> </center> </body> </html>

Reload the file in your browser and you should see:

Hello World!
What a lovely day! This line should be BLACK.
This line should be RED.
This line should be WHITE on RED.

In this example we've added an internal style sheet to our header and included the universal selector for the HTML tag "center" which sets the background color to "lightgrey". This is applied to all areas of the web page that implement the <center> tag.
In line #10 we've also implemented an inline style property in the <center> tag which creates a black border 2 pixels wide. Aside from implementing the style property defined in this line, this tag also inherits the center selector defined in our header that sets the background to "lightgrey".
And as you can see, from the color of the various lines of text and the yellow color of the background, our external style sheet as defined in line #4 is also being implemented.

This covers some basic concepts of CSS. There a quite a large number of attributes and class types you can use to add and modify content. A complete list of these is beyond the scope of this tutorial.

You can find a more comprehensive reference for CSS attributes at w3schools CSS Reference.
You can find a more comprehensive reference for CSS classes at W3C Selectors.
A number of CSS examples are also available at w3schools CSS Examples.