Style Sheets Now!

Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets became apparent, as did the disadvantages of continually creating more html tags for presentation effects.

Netscape's BODY attributes are now widely accepted on the Web, and have become standardized in html 3.2. Yet BGCOLOR, TEXT and friends simply do not provide the flexibility of style sheets. Most background images would leave a page unreadable to someone whose display only offered 16 colors; many pages are difficult to read with only 256 colors. With conventional BODY attributes, an author must choose whether the benefits of a background image outweigh the costs; with style sheets, an author can offer a number of different images, in different style sheets, so that the user can choose the "24-bit style sheet" or "8-bit style sheet," depending on how many colors his or her system can display. If no author-supplied style suits the user, he or she can simply ignore the author's style.

Style sheets can make an author's life much easier. While one could use <HR WIDTH="75%" SIZE=5 ALIGN=center> for every horizontal rule, this becomes very cumbersome for the author. With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site. And if the author decides that WIDTH="50%" would be better, then he or she only needs to change this preference in one place, rather than having to search through hundreds of pages to change the html. Not only that, but style sheets also reduce download time when one file contains all the style information.

Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements. With just html and its proprietary extensions, one must rely on attributes like BGCOLOR, which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.

With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like <DD> or <IMG SRC="blank.gif" WIDTH=10 ALT=""> that carry with them many negative side-effects. Margins can be suggested without having to put the entire page in a table. Style sheets also reduce the need for multi-file search and replace; if an author decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.

Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between html and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users.

Basic Syntax

Rules

Selectors

Any html element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with html's CODE element. The CLASS attribute is used in html to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in html by the ID attribute:

<P ID=svp94O>Text indented 3em</P>

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with html's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

1. ! important

   Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

   BODY { background: url(bar.gif) white;
          background-repeat: repeat-x ! important }

2. Origin of Rules (Author's vs. Reader's)

   As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

   Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

3. Selector Rules: Calculating Specificity

   Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

   1. Count the number of ID attributes in the selector.
   2. Count the number of CLASS attributes in the selector.
   3. Count the number of html tag names in the selector.

   Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

   #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
   UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
   LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
   LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
   

4. Order of Specification

   To make it easy, when two rules have the same weight, the last rule specified wins.

How to style links?

This is the classic CSS question.

It is asked so often, and the reason why the order of the link styles is important doubles as a wonderful explanation of the cascade in CSS. A tutorial about the link styles is located in the 'Basics' section.

Styles not showing?

There are different ways to apply CSS to a html document with a stylesheet, and these different ways can be combined:

• inline (internal) (Deprecated for Xhtml)
• embedded (internal)
• linked (external) and
• @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. html comments are not supposed to be in there and can lead to misinterpretation (> is the CSS "Child" selector!)

Border around a table?

Try the following:

.tblboda {
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    }
/*color, thickness and style can be altered*/

You put this style declaration either in an external stylesheet or you can stuff it in the <head></head> section, like:

    <style type="text/css">
(here you can place your styles)
    </style>

and apply it to the table as follows:

<div class="tblboda">
    <table yaddayadda>
        <tr>
            <td>Content text and more content</td>
        </tr>
    </table>
</div>

That should give you a grey thin border around this table.

Kludge: If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the <div> tag. But that is not quite proper CSS or html, because a <span> is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct html/CSS.

The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2

In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;}

Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all).

This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

'Fixed' Background?

There is (was) the possibility to use the html tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in html4).

With CSS, you can declare the background like:

BODY {
    font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background-image: url(images/yourimage.gif);
    background-repeat: no-repeat; /*no-tiling background*/
    background-position: center;
    background-attachment: fixed;
    background-color: #hexcolor;
    color : #hexcolor;
    margin: 10px;

... and that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls happily everafter...

Justified Text?

You redefine the <p> tag like:

p {text-align: justify;}

and that renders all <p>s with justified text.

Another possibility is to define a class, like:

.just {text-align: justify;}

and then you style the paragraphs in question like:

<td class="just">text </td>

Note that NN 4.xx has problems with the inheritance of styles; that some NN4.xx browsers have a funny way to interpret "justify"; and that you have to have at least one blank space between the last character and the </p> tag, because otherwise NN 4.xx likes to justify even a three word half-sentence... also, some browsers do a pretty ugly job of rendering justified text, adding spaces between words, instead of spaces between letters, as with word-processing programs.

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements.

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td><div class="table-cell"> yourtext </div></td>

to apply the CSS rules to the div inside the cell.

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.

Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

Colored Horizontal Rule?

You can apply styles to Horizontal Rules <HR> in IE without problems, but NN4.xx can only render the silvery HR. But there is a way around it:

.rule {border-top-width: 1px;
       border-top-style: solid;
       border-color: #FF0000; 
       margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

Positioning the elements: the Navigation

I like to position the navigation absolutely, and the other areas "in relation" to the navigation.
There are probably many other ways to position those elements, and the reason why I choose to use this example is simple: it works (and never fix what is working...).

The CSS declaration for the Navigation is as follows:

.Navigation {/*The navigation on the left side, positioned absolutely*/
    position: absolute;
    top: 100px;
    left: 3px;
    width: 135px;
    height: auto;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height : 110%;/*line-height set to 110% in order to*/
    }                  /*have the navigation elements better separated*/

The declaration is very clear, and in plain English it says:

"I want this box for the navigation - 100 pixel from the top, 3 pixel from the left side of the document. This box is 135 pixels wide, and as long as it needs to be (defined by the content of the box). If anything is written in this box, I want it to be the Verdana-font (or the named substitutes), and I want the line height to be 10% bigger than it is defined by the font-size alone."

 Now you see the letters ABCDE in dark blue, Verdana font, default size (the font-size is not yet defined anywhere), and positioned about 100px from the top, 5px from the left of the window. (with the styles in the <head> section).

Go back to the stylesheet and change the top declaration of the .Navigation class, to 0px for example.
And then to 50px. And now change the color declaration in the BODY style to: #00FF33; the background-color to: #000000; or insert a background-color: #FF0000; in the .Navigation class, and change the height: auto; to height: 150px;, and now we change the font-family, and the background here and the color there...

Hey - what do we need any more declarations: let's copy and paste some text and put it beneath the closing </div> of the navigation and let's see what happens...

The text fills the <BODY>, with all the style declarations you've applied, and slides under the navigation. That means, you have to define the area where you want your main content to sit, to prevent it from interfering with the navigation.

Let's change everything back to the styles listed above,
take a deep breath
and go to the next position:

Positioning the elements: the Main Area

We declared the area for the Navigation as absolutely positioned, because we see it as the "anchor point" for the site. The class "Content" receives the positioning only via the margins. This means it uses neither the relative nor the absolute positioning, but is in the regular flow of the html document like any other html element:

.Inhalt {/*this is the main content area*/
    background: #FFFFFF;
    /*declare a color together with a contrasting background color*/
    color: #000088;/*to insure readability*/
    margin-left: 160px;
    /*to position the content area to the right of the navigation*/
    margin-right: 20px;/*breathing space for the text*/
    padding: 5px;/*space to separate navigation and content*/
    font-family : Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif; 
    width: auto;
    border: 0.1px solid #FFFFFF; 
   /*to insure that NN4.xx renders the background-color of the content area*/
    }

 Let's take a closer look: background(-color) and (text)color are white and dark blue, for better readability.

The left margin is defined with 160px from the left corner of the window, to insure that there is enough space between the navigation (with 145px width and 5px position to the right from the window = 150px) and the content. The margins of a box are always transparent. By declaring the margin-left property to be 160px wide, we give the visual "illusion" of an area that starts at 165px from the left, where in reality it is as wide as the html document. That's what I meant with "cunning application of the rules".

There is also the declaration for the right margin, and this defines that the right margin is 20px to the left of the right margin - wherever the right margin of the window actually is.

Additionally, there is a 5px padding all around the inside of the Content box (not really necessary. We could declare the margins to 165px and 25px, would have the same effect...)

The font-family I want to be displayed in the Content class - We already declared that in the <BODY>, but the real-world issue of the flawed inheritance capabilities of certain browsers requires some redundancy...

{width: auto;}: "auto" is the default value for the width property and refers to the width of the containing block. In this case it is not even necessary to set the width, because the .Content class is defined by the declaration of the left and the right margin. But should we decide to add a third "column", for a picture perhaps, then this could come in handy.

 Now something strange: border: 0.1px solid #FFFFFF;. This is more of an insurance to force NN 4.xx to display the background-color over the whole Content area. If we decide to change the background-color of the Content area to a light grey, for example, and don't have this fall-back declaration in the style for this area, then NN 4.xx will render the light grey background-color, but only behind the text.

Try it! Copy the declaration for the .Content into your stylesheet, apply the class in your document, like:

<body>

<div class="Navigation">
ABCDE
</div>

<div class="Inhalt"></div>

</body>

copy and paste some text in the Content class of your document, and change the background: #FFFFFF; of the .Content class into background: #F0F0F0;. Take a look at it in NN 4.xx - no problem.

Now delete the border: 0.1px solid #FFFFFF; and take another look at it in NN 4.xx ... Isn't it wonderful that there is a possibility to "undo"? I love this feature.

So: we have the body, navigation and the main area defined. (with the styles in the <head> section).

We can change the colors, the position and the dimensions of both the navigation and the content areas.

Positioning the elements: Header and Footer

We are missing the Header and the Footer. Both are "flexible" positioned, since the browsers are not (yet) able to support the CSS declaration of "fixed positioning".

Well, we need something to look forward to...

The declarations for Header and the Footer classes are:

.Header {
    margin-top: 10px;
    margin-left: 160px;
    } 
.box {/*this is a box where the bottom-navigation*/
      /* and the copyright will be placed*/
  background: #FFFFFF;
  color : #000099;
  font-family : Arial, Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  padding : 2px;
  margin: 2px;
  border-color : #48D1CC;
  border-style : groove;
  border-width : 2px;/* the border property in longhand*/
  }

First the Header. In reality, this class is superfluous. We could take the graphic with the "CSS Issues" and simply plop it into the <div class="Inhalt">-area. A couple of <br>s, and we are done.

The reason why I have it in the stylesheet is that I've learned that this area is the one that gets changed quite often, and sometimes dramatically so. The client wants to add a tag line. The client wants the logo in white on a black background. The client wants the header bigger, or the tag line in red. "Could you show me the logo, well, differently?"

The easiest way to have it positioned and still have all the possibilities of changing almost everything is to have it in a class of it's own. I like to position the header on top of everything else in the code, directly after the </head> tag, but we could also take this class, change the margins and nest it in the Content class.

The Footer box will be nested in the main content area, but again, this is personal preference. If you put it outside the main content area, it will stretch over the whole window and obscure the background pattern that is used to put focus on the navigation. If you have another design or another layout this feature could be exactly what you need...

We put both items in our document, simply insert the Header image into the Header section and the code should now look like this:

<body>

<div class="Header">HEADER with image
<img src="images/CSS-2.gif" width="277" height="38" alt="CSS Issues">
</div>

<div class="Navigation"> NAVIGATION
ABCDE
</div>

<div class="Inhalt">CONTENT, with the nested FOOTER box
Some text here, like: With this tutorial I'll show 
you how easy this is, and I'll provide you with the CSS stylesheet 
and the graphics. Some CSS vs. NN 4.xx issues are already addressed 
at CSS Issues.
<br>

<div class="box">FOOTER BOX
This will be the secondary navigation
</div>closing tag for the FOOTER BOX

</div>closing tag for the CONTENT BOX
</body>

 The reason why I called it "box" and not "Footer" is very simple: I plan to re-use it, or at least I want the option to recycle it if need be. I could use the same box to

and the effort to do so is negligible. Simply put in <div class="box">. The other possibility could be to copy this class, change the border to red and double, the font-size to 16px and call it box2 - then you have an "Alert!" box.

Important: If you plan on using a <div class> within the text, take care not to declare any width. NN 4.xx will lose any styles after such a <div>

Now that we've prepared the ground, we can draw those little boxes that separates the navigational items. The boxes are not necessary, you could go ahead and start with the fonts and links.

.navbox {/*button-like box for the left-side navigation*/
   font-size: 15px;/*readability for the links*/
   font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   background-color: #003399;
   border-color: #FF6633;/*or, in shorthand, the three*/
   border-style: groove; /*border-properties would read:*/
   border-width: 2px;/*border: 2px groove #FF6633;*/
   padding: 1px;
   margin: 2px;