Cascading Style Sheets

Background
The current philosophy is to separate content from layout. The HTML document specifies content and its logical structure while stylesheets specify the layout and appearance. Someone seeing <table> in your code should be able to assume that you're presenting a table of data, not trying to achieve some layout goal. One of the reason for this separation is that it makes Web pages more device independent. While a page using tables might look good in a traditional browser, it may not be easily readable by someone visiting your page using, say, a PDA or even just a text-only browser like lynx.

In the past, tables provided the only effective way to position items on a Web page, so the Web page-authoring tools generated HTML using them. The developers of these tools have been slow to modify them to adhere to current standards, and that's why you still see a lot of pages using tables for layout. These days, CSS is the preferred method to specify how you want your pages to look.

That being said, it can be tricky to use CSS to get the same layout you could easily do with tables. It's one area that CSS could use improvement in. On the other hand, CSS does offer you a lot of abilities, and it's definitely worth learning what you can do with it. For instance, moving a sidebar from one side of the page to the other is probably just a tweak of two or three lines in your stylesheet. You can have just one HTML document and use it with separate stylesheets for rendering on the screen and for when you print, eliminating the need to generate and link to printer-friendly versions of your pages.

Usage

create a style sheet.

The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and the value are separated by a colon and surrounded by curly braces. This example shows how to make the background color of the page black:
body {background-color: #000000}

If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a left aligned paragraph, with a red text color:
p {text-align: left; color: #ff0000}

To make the css file more readable you should put one property/value pair on each line. For example:
p {
text-align: center;
color: black;
font-family: arial
}
  • The class Attribute
    With the class attribute you can define different styles for the same element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
    p.right {text-align: right}
    p.center {text-align: center}

    • You have to use the class attribute in your HTML document:
    <p class="right">
    This paragraph will be right-aligned.
    </p >

    <p class="center">
    <This paragraph will be center-aligned.
    </p >
    Linking it to your html page
    An external style sheet may be linked to an HTML document through HTML's LINK element. Examples:
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

    Notes
    If you use firefox there is a handy plugin called Web Developer that allows you to edit css files on the fly.

    External Links

    Search:

    Back:
    MysticServer
    CategorySite5

    There is one comment on this page. [Display comment]

    Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki