CSS (Cascading Style Sheets)

Page 1

CSS Styling

CSS stands for "Cascading Style Sheets".  HTML was originally developed primarily as a universal coding system that would enable anyone to view the same pages, regardless of the computer platform they were using.  HTML offered structural formatting (this line is a heading, that word should be emphasized) but did not allow designers much control over the appearance of the page.  While the original inhabitants of the web--- mostly scientists and other academics, were more concerned with content, the second generation---web designers and the rest of us, insisted on being able to change the color of a word or choose a particular font.

While the browser manufacturers were trying to satisfy this thirst for aesthetic control by slapping on new proprietary, non-standard HTML tags left and right, and the web design elite were appropriation tables as a layout tool, the world wide web consortium went to work on a system that would keep HTML universal while allowing designers more control over the look of their pages.  The result of that effort is called "Cascading Style Sheets".

Cascading Style Sheets are also know as CSS, or simply styles.  They let you assign several properties at once to all the elements on your page marked with a particular tag.  For example, you can display all your H1 headers in a particular size, font, and color.  Although you could conceivably use HTML tags to achieve at least some of this formation, styles offer several advantages.

The Advantages of Using Style Sheets

First, styles save time.  Imagine setting the font for each header and each paragraph in a long web page.  Don't forget the closing </font> tags!  With styles, your type a single line for each element at the top of the page.

Second, styles are easy to change.  Go back to your page and change the font, size and color of each paragraph by hand.  With styles you make edits quickly in just one place.

Third, computers are better at applying styles consistently than you are.  Did you remember to format each and every paragraph.   You can be sure that the computer did.

Next, styles let you control text in ways that are out of reach of HTML tags.  You can set line spacing (leading), background color, and remove bold and italic formation, among other things.

You can also use style together with JavaScripting to create dynamic effects known as DHTML.

Finally, styles make it easy to create a common format for all your web pages.  And you still only have to define the styles once.  Make changes in one centralized place and voil?, all the pages are updated right away.

The Downside of Style Sheets

The biggest disadvantage of using style sheet is that no browser supports them completely.  Even Internet Explorer 5, while supporting most of the specification, does not support it all.  Netscape 4, in particular, does not support style sheets very well, although they've promised complete support in the upcoming versions.  Which doesn't seem to be the case...as they too do not support everything.

The browser that correctly interprets the most CSS is Opera, a new, lean, fast browser from Norway, whose chief technical officer just happens to be H?kon Lie, one of the major forces behind CSS at the W3C.  You can get more information about Opera at www.opera.com.

Since browsers are in a constant state of flux, you can to this web site (www.cookwood.com/html4_4e/browser_tests/) to see which browsers support which parts of CSS.  There is also a series of tester pages that y ou can point a browser at in order to see how those features are supported.  While this is a great way to tell if a problematic page is your fault or theirs, you still have to remember that the key is which browser your visitors use.  You want them to be able to see your page properly.

NOTE:  CSS is also in a state of change.  While SCC Level 1 (CSS1) and CSS Level 2 (CSS2) have already been officially recommended by the W3C, there is currently work underway on other CSS Levels.

The other impediment to using style sheets is that you have to take the time to learn how to use them.  They're not that complicated, but the have their own distinct syntax.  It's not HTML.  Luckily, there are books out there than help you...along with web sites that go into more detail.

The Anatomy of a Style

A style is made up of a tag name (H1, P, etc.) and one or more definitions (the tag name is called a selector and the definitions are called declarations) that determine how the elements marked with that tag should be displayed---perhaps in red, at 12 points, with Lithos Regular.

Each definition contains a property, a colon, and one or more values.  For example, to change the color of text, you use the color property with a value of say, red.  The definition world red color: red.  The space after the colon is not required.  Multiple definitions must be separated by semicolons.

Example:

HTML tag

First Definition

Semicolon

Second Definition

H1

{font-size: 12pt

;

Color: red}

Which would look like this:  H1 {font-size: 12pt; color: red}

Some properties can be grouped together with a special umbrella property (like, font, background, and border, among others).  For example, font:bold 12pt Tekton is the same as writing font-size: 12pt: font-weight; bold; font-family: Tekton.

Definitions (and thus, the properties and values) always look the same, whether the style is applied locally or extenally.  The only difference is in the punctuation surrounding them---curly brackets vs. quote marks.

Example:  <BODY STYLE="BACKGROUND: BLUE">
Setting up Style Sheets

There are three ways to apply style sheets: locally, internally, and externally.  You can use any one or all three of these methods.  The local method will override any interanl styles while the internal style will override styles applied from an external sheet.  Indeed, this is where Cascading Style Sheets get their name.

Style Sheets, if internal, should be placed between the <head> and </head> tags.

External ones are ideal for giving all the pages on your web site a common look. and are called from that location like this:  <LINK REL=Stylesheet TYPE="text/css" HREF="styles.css">  These are also placed in the <head> and </head> tags.

When creating an external style sheet, remember to save the document as name.css, or your document will not work when called from the web page.  They must also be uploaded to your site.


[ CSS 1 | CSS 2 | CSS 3 | CSS 4 ]

  

[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]

 

Go to Top


Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline