CSS Tips & Tricks

CSS stands for Cascading Style Sheets.

Typically a Style Sheet is a plain text document with a set of instructions (CSS styles, rules) specifying how each element (selectors) in your web page should be appear in a computer screen or even how it is printed on a sheet of paper.

You can use CSS to specify for instance:
- to specify what font to use in a paragrah, in what the size the text will be and it color, alignment, the paragraph’s background image, background color and more.

- or even intead of the regular blue color of text link, with CSS you can choose a different color and even create a rollover effect on each text link when the mouse hover on it.

Above all, the power of Style Sheets is more revealed when it comes to positioning different sections of a web page.

For example in this web site, the HTML code of the navigation menu is at the very bottom of the page code. Without CSS this web page navigation would appear on the botton of your screen. But thanks to CSS positioning our web site navigation (Home, Web Design, …, Blog) is et to be shown at the top of the page.

In othe words your web pages visual appearance is not anymore determine by how the HTML code is formatted. To illustrate that with a metaphor, the HTML represent the inventory of the store and the CSS determine how items are placed in the shelves.

You can pretty much use CSS to create a visual layout of your web page just like a puzzle except that in this case the pieces are in a rectangular shape.

YEH, YEH, YEH, we got it now!! What is the Cascading For in CSS?
I am glad you ask.

The cool thing is you can have as many style sheets in a web page as you want. Each style sheets defines a certain number of styles named CSS rules. When the web browser read the CSS rules coming from each style sheet it combined them then apply each CSS rule to your web page.

You can define the positioning of a element in one style sheet, then its font formatting in another style sheet and so forth.
Therefore the final style of that element is the combination of CSS rules defined is different style sheets: that’s a cascade of styles

If the CSS rule defined in a style sheet does nt conflict with those defined in the next style sheets then the last CSS rules augment any previous style defined for that element (selector).
If the CSS rules of the style sheets conflict, then the last defined rule takes precedence.

Using CSS make not only the web page code cleaner by separating the content ffrom the presentation, it also make your web site maintenance easier. Many web pages can share the same CSS file. You can modify your entire web site presentation by just updating your CSS file without going through each web page.

This entry was posted on Sunday, January 7th, 2007 at 8:52 pm and is filed under CSS Tips & Tricks, Definitions and Usages. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.