Unit 4: New Web Technologies: XML, XHTML, CSS

Lesson 3: CSS

Reference: CSS Tutorial

Also, check out CSS Zen Garden

What is CSS?
Describe what an CSS document looks like

What is CSS?

CSS stands for Cascading Style Sheets.
It is a way to divide the content from the layout on web pages.

How it Works:

A style is a definition of fonts, colors, etc.
Each style has a unique name: a selector.
The selectors and their styles are defined in one place.
In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

An Example

Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.
Compare the following examples of a simple table:
Classic HTML

      <table>
      <tr><td bgcolor="#FFCC00" align="left">
          <font face="arial" size="2" color="red">
          <b>this is line 1</b></font></td></tr>
      <tr><td bgcolor="#FFCC00" align="left">
          <font face="arial" size="2" color="red">
          <b>this is line 2</b></font></td></tr>
      <tr><td bgcolor="#FFCC00" align="left">
          <font face="arial" size="2" color="red">
          <b>this is line 3</b></font></td></tr>
      </table>

An Example

With CSS (assuming that a selector called subtext is defined)

      <table>
      <tr><td class="subtext">this is line 1</td></tr>
      <tr><td class="subtext">this is line 2</td></tr>
      <tr><td class="subtext">this is line 3</td></tr>
      </table>

While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML.

With CSS You Can:

define the look of your pages in one place
easily change the look of your pages even after they're created
define font sizes and similar attributes with the same accuracy as you have with a word processor
position the content of your pages with pixel precision
redefine entire HTML tags
define customized styles for links - such as getting rid of the underline.
define layers that can be positioned on top of each other

Advantages

In addition to the previous:

Your pages will load faster
- CSS document that is only loaded once when a visitor enters your site.

Disadvantage

Only work on version 4 browsers or newer

Selectors

Selectors are the names that you give to your different styles.
For example:

      <HTML>
      <HEAD>
      <style type="text/css">
        B.headline {
        color: red; 
        font-size: 22px; 
        font-family: arial; 
        text-decoration: underline  }
      </style>

      </HEAD>

      <BODY>
      <b>This is normal bold</b><br>
      <b class="headline">This is headline style bold</b>
      </BODY>

      </HTML>

In this case B.headline is the selector.

Selectors

There are three types of selectors:

HTML selectors
- Used to define styles associated to HTML tags. (A way to redefine the look of tags)
Class selectors
- Used to define styles that can be used without redefining plain HTML tags.
ID selectors
- Used to define styles relating to objects with a unique ID (most often layers)

Tag Selectors

Tag selectors are used when you want to redefine the general look for an entire HTML tag.
The general syntax for an Tag selector is:

      HTMLtag {Property:Value;}

For example:

      <HTML>
      <HEAD>
      <style type="text/css">
        B { font-family: arial; 
            font-size: 14px; 
            color: red  }
      </style>
      </HEAD>

      <BODY>
      <b>This is a customized headline style bold</b>
      </BODY>

      </HTML>

Class Selectors

Used when you want to define a style that does not redefine an HTML tag entirely.
Add the class attribute to an HTML tag (class="headline").
The general syntax for a Class selector is:

      .ClassSelector {Property:Value;}

For example:

      <HTML>
      <HEAD>
      <style type="text/css">
        .headline { font-family: arial;
                    font-size: 14px;
                    color: red   }
      </style>

      </head>

      <body>
      <b class="headline">This is a bold tag 
        carrying the headline class</b>
      <br />
      <i class="headline">This is an italics 
        tag carrying the headline class</i>
      </body>

      </html>

SPAN and DIV as carriers

Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>.
Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.
<SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it.
<DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).
<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.

Id Selectors

Used when you want to define a style relating to an object with a unique ID.
Most widely used with layers since layers are always defined with a unique ID.
The general syntax for an ID selector is:

      #IDSelector {Property:Value;}

Example

For example:

      <HTML>
      <HEAD>
      <style type="text/css">
      #layer1 {position:absolute; left:100;top:100; z-Index:0}
      #layer2 {position:absolute; left:140;top:140; z-Index:1}
      </style>
      </HEAD>

      <BODY>
      <div ID="layer1">
      <table border="1" bgcolor="#FFCC00">
         <tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr>
      </table>
      </div>

      <div ID="layer2">
      <table border="1" bgcolor="#00CCFF">
        <tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr>
      </table>
      </div>
      </BODY>
      </HTML>

Grouped Selectors

Most often selectors will share some of the same styles, for example, being based on the same font.
In these cases, rather than defining the font for each and every selector, one by one, you can group them, and thus assign the font to all the selectors at once.
Look at this example, made without grouping:

      .headlines {
        font-family: arial;
        color: black;
         background: yellow;
         font-size:14pt;   }

      .sublines {
        font-family: arial;
        color: black;
        background: yellow;
        font-size:12pt;   }

      .infotext {
        font-family: arial;
        color: black;
        background: yellow;
        font-size:10pt;   }

Improved

As you can see, the only style that varies is the font-size.
In the next example we have grouped the selectors, and defined the common styles at once.

      .headlines, .sublines, .infotext {
        font-family: arial;
        color: black;
        background:yellow;
      }

      .headlines { font-size: 14pt; }
      .sublines {  font-size: 12pt; }
      .infotext {  font-size: 10pt; }

Less to type, easier to change and guaranteed to be the same for all styles

Context Dependant Selectors

Selectors that will only work in certain contexts
For example, you can define a style for the <B> tag that is only triggered if the text is not only bold but also written in italics.
For example, the style should be in effect here:

      <i><b>example</b></i>

but not here :

      <b>example</b>.

The Syntax

Simply adding a normal style to the <B> tag is done like this:

      B {font-size:16px}

Adding a context dependent style, like the one described above is done like this:

      I B {font-size:16px;}

We simply separated the contextual <I> tag from the <B> tag with a space.

Using Grouped and Context Dependent Selectors at the Same Time

It is possible to use context dependent and grouped selectors at the same time.
For example, like this:

      I B, .headlines, B .sublines {font-size:16px;}

In the example the font-size of 16 pixels is in effect on:
- All <B> tags enclosed by <I> tags
- All headlines classes
- sublines classes enclosed by <B> tags

Where to Place it

CSS can be added to your pages at 3 different levels
Single Tag
Single Page
Entire Site

Single Tags

CSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags
Look at this example:

      It is <b style="font-size:16px;">NOT</b> me.

You should limit your use of single tag CSS

Single Pages

CSS can be defined for entire pages by simply adding a style definition to the head section.
In the example, although we used the sublines style twice, we only had to define it once: in the <head> section.
can to easily change the styles even after the entire page has been made.

Example

      <html> <head>
      <title>MY CSS PAGE</title>
      <style type="text/css">
      .headlines, .sublines, infotext {font-face: arial;
          color: black; background: yellow; font-weight: bold;}
      .headlines {font-size:14pt;}
      .sublines {font-size:12pt;}
      .infotext {font-size: 10pt;}
      </style> </head>

      <body> <span class="headlines">Welcome</span><br>

      <div class="sublines">
      This is an example page using CSS.<br>
      The example is really simple,<br>
      and doesn't even look good,<br>
      but it shows the technique.
      </div>

      <table border="2"><tr><td class="sublines">
      As you can see:<br>
      The styles even work on tables.
      </td></tr></table>

      <div class="infotext">
      Example from EchoEcho.Com.
      </div>

      </body> </html>

Entire Sites

Writing the CSS definitions in a plain text file that is referred to from each of the pages in the site
Pages will load faster because CSS text file will be cached when a visitor views other pages
Flexibility to change the style for your entire site even after it has been made

Example

      <html>
      <head>
      <title>MY CSS PAGE</title>
      <link rel=stylesheet href="whatever.css" type="text/css">
      </head>
      <body>
      <span class="headlines">Welcome</span><br>

      <div class="sublines">
      This is an example of a page using CSS.<br>
      The example is really simple,<br>
      and doesn't even look good,<br>
      but it shows the technique.
      </div>

      <table border="2"><tr><td class="sublines">
      As you can see:<br>
      The styles even work on tables.
      </td></tr></table>

      <hr>

      <div class="infotext">Example from EchoEcho.Com.</div>

      <hr>
      </body>
      </html>

The Style Sheet

File: whatever.css

      .headlines, .sublines, infotext {
              font-face: arial;
              color: black;
              background: yellow;
              font-weight:bold;   }

      .headlines { font-size: 14pt; }
      .sublines  { font-size: 12pt; }
      .infotext  { font-size: 10pt; }

Now if you just add this line in the <head> :

      <link rel=stylesheet href="whatever.css" type="text/css">