Before you start
What is a Style Sheet
Structure and Rules
Origin of Rules
Applying Style Sheets
Linking Style Sheets to HTML
Linking to External CSS
Embedding Style Sheets
Importing Style Sheets
Setting Border Properties
Basic page setup using tables
Replacing certain tags
Most Popular Questions
What's the big deal with Style Sheets?
So, you've been hearing a lot about web developers beginning to use style sheets more often, but you never found the time to get involved with them. Or, maybe you just don't feel like going through another learning process when your web pages look just fine the way they are now. Once you get through with these articles, you're going to kick yourself for not using them sooner.
Until recently, HTML pages contained both the textual content of the page and a multitude of formatting, color, and font settings using numerous tags to change the background color, text, font, paragraph and many, many more attributes just to make the web page look better, or at least, to the satisfaction of the developer. This made it extremely difficult to maintain the pages of a web site if the visual style or layout of the site needed changing. It also made it hard for users to override the font and color options in order to display different size and color fonts, etc.
Then, along came the concept of style sheets. Now, rather than having to add a <P align="center"> <font size="+2" color="blue"> tag around every heading or title in your document to make them stand out from the other text, you can write a single style rule that applies this change globally.
Style sheets can definitely make a web developer's easier. Using style sheets enables you to change the appearance of multiple Web pages by changing one simple file.
Instead of using <P align="justify"> for every paragraph, style sheets allow you to specify, one time, how you want every paragraph set for an entire page, or web site. The handy part comes in when you decide you want your paragraphs to be left-aligned instead of justified. Simply changing this preference in one place in the style sheet will automatically change each paragraph to left-aligned.
Style sheets allow you to move all of your custom style information away from all of your text and into a separate style sheet. This has greatly reduced the amount of time it takes to author a web page, not to mention an entire web site. However, this is not the only time saver. Implementing CSS offers faster page downloads because style sheets can be cached by browsers and are typically shared for multiple pages. In addition to this, style-sheet language now makes it even easier to express global style preferences.
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, web developers can use the text-indent property to indent text, rather than resorting to multiple tags that have 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 a web developer decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.