What is CSS ?

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.^[
CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content, such as semantically insignificant tables that were widely used to format pages before consistent CSS rendering was available in all major browsers. CSS makes it possible to separate presentation instructions from the HTML content in a separate file or style section of the HTML file. For each matching HTML element, it provides a list of formatting instructions. For example, a CSS rule might specify that "all heading 1 elements should be bold," leaving pure semantic HTML markup that asserts "this text is a level 1 heading" without formatting code such as a <bold> tag indicating how such text should be displayed.
This separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to display the web page differently depending on the screen size or device on which it is being viewed. While the author of a web page typically links to a CSS file within the markup file, readers can specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author has specified. If the author or the reader did not link the document to a style sheet, the default style of the browser will be applied.
The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
The main benefit in CSS, is that it manages to separate the style from the content on your web page. If you are used to using HTML, you'll have noticed, that HTML can do both style and content. With a FONT-tag, and some artistic sense, you can make a HTML page quite stylish.
What CSS does, is that it handles the style of your web page, and lets HTML do the content. Why is this good?
First of all, the stylish capabilities in HTML are quite limited. Secondly, with the use of an external style sheet, you are able to alter you entire site style, by only editing one single file!
As an example of the above, let's say you wanted to change your site from using Times New Roman to Arial. With 'old-fashioned' HTML, you would have to alter the FONT tag, on each and every page. With CSS, you would just need to alter the style sheet, and then all pages would be using Arial.
Even though trends are towards decentralization, you actually make things easier, more efficient, and save time, by centralizing your style into one single style sheet.
The purpose of CSS is to provide webmasters more control over page layout and display than HTML offers. With HTML alone, there are various coding tricks that are used to help achieve the desired page layout. The trouble with that is those tricks often don't work the same, if at all, in all browsers. CSS standards were designed so that these tricks are no longer needed, so CSS is much more predictable and reliable than resorting to those old tricks.
Using a wall of your house for a loose analogy, HTML is the studding behind the wall; and CSS is the wall covering, colors, and placement of the content on the wall. In other words, when properly used, HTML defines the structure of your web page while CSS defines the appearance.
Aside from consistent display standards, one of the greatest benefits of using CSS is if you use external style sheets, you can make one change to the style sheet and have that change take place throughout your entire web site. There will be more about that later in this tutorial.
Here are just a few things that you can do with CSS that can't be done in HTML alone without resorting to quirky tricks that don't work the same in all browsers:

• Set different page margins for all sides of your page.
• Set font size for any text element to the exact height you want, no more preset size limitations.
• You can highlight single words, entire paragraphs, headings or even individual LETTERS with different background colors, background images, text colors and fonts if you really want to go crazy bananas.
• You can overlap words and make logo-type headers without making images.
• Colored scrollbars! Note: colored scrollbars are NOT official CSS, they are a Microsoft extension to CSS so using colored scrollbars is technically an illegal code practice, but it doesn't cause any harm if you like them. Colored scrollbars also only work in Internet Explorer.
• Precise positioning of elements.
• Borders, border styles, backgrounds, margins, and padding can be set for any visual HTML element.
• Set the font for whole tables, no need to recode a font into each table cell.
• Make the first letter of each paragraph different, set letter spacing, change the space between lines of text, and much, MUCH MORE!

The only real disadvantage to using CSS is that not all browsers offer full support for it . . . yet. Even that disadvantage is minimal because well over 90% do support it extremely well; and the ones that don't offer full support do support the main features, it's the lesser known items they don't support, so your page will degrade fairly well in browsers that don't fully support CSS.
At some point everyone has to move into the future, and the time to start using CSS began long ago. One day, those surfers hanging on to older browsers will find few sites that work as intended, and webmasters will find their site design changing - not because they've changed it - but because they've continued using code that has become obsolete and is no longer supported.
One of the attractions of CSS is that it can be implemented in three different ways - inline, embedded, and linked, which make it a very flexible HTML supplement. Here are the three ways of implementing CSS:

Inline Styles

An inline style rule is coded directly into an HTML tag within the flow of your source code, just as an HTML attribute is used. The purpose of inline styles is to allow you to override an embedded or linked style rule, or to make a quick change of style where you don't want a reusable rule. For example, you may have a rule that specifies H1 headings should be the color blue. If you have a place on your page where you want an H1 heading in red, an inline style rule allows you to override an embedded or external style rule. To override an embedded or linked style, an inline style must be coded into each HTML element each time you want to override the embedded or linked style.

Embedded Styles

Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don't have to create a rule with each use of an HTML element. An H1 heading given the color red in an embedded style rule will render the H1 heading in red every time you use it on the page without having to code the rule into each heading tag as you must do with inline rules or with HTML attributes.

External Styles

External styles (sometimes called linked styles or remote styles) are the least important in the cascading order*, but the most powerful! An external style is simply a link placed in the HEAD section of your web page to a separate file containing your style rules. The primary advantage of using external styles is that you can change that one external file, and have that change reflected on every page of your site that links to the external CSS file. Any or all methods of implementing CSS can be used on the same page.

* The cascading order is what determines which style rule the browser will use when there are conflicting rules. Part four of this introduction to CSS explains the cascading order. Part three is next, which shows you how to implement the three methods of CSS in your web page.