What are Cascading Style Sheets?
Cascading Style Sheets, commonly shortened to CSS, is a style sheet language used for describing the the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
CSS helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:
- Avoid duplication
- Make maintenance easier
- Use the same content with different styles for different purposes
Benefits for SEO
A search engine robot will normally consider the content in the start of your html code is more important than the text towards the end of the code. For a table based page the contents of the navigation bar will normally show up as the page description in search engine results. With a CSS page the navigation can be moved to the bottom of the source code, so the search engine displays your content instead of your navigation.
How does CSS Work?
When a web browser displays a document, it must combine the document’s content with its style information. It processes the document in two stages:
Adding style to HTML
There are three ways of providing styling information for the Web browsers.Linking style sheet
You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by <link>.
This offers several benefits:
[example.html]
<head>
<link rel=”stylesheet” type=”text/css” href=”example.css”>
</head>
[example.css]
p{
color: red;
foto-size: 120%;
}
Internal style sheet
You can put style sheet rules in the head of the document by <style>.
[example.html]
<head>
<style>
p { color: red; font-size:120%; }
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
Inline style sheet
The start tags can contain style sheet rules directly in HTML documents by the style attribute.
[example.html]
<p style=”color: red; font-size:120%; “>This is a paragraph</p>
CSS Syntax
Style rules are comprised of two things, the selector and the declaration.
- selector — The HTML tag that will be affected by the rule
- declaration — The specific style calls that will affect the selector
The complete syntax for a style rule is:
selector { property : value; }
So, to set all bold text (using the B tag) to be the color red, you would write:
b { color: red; }
One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:
b { color: red; }
h1 { color: red; }
h2 { color: red; }
But with grouping, you put them all on the same line:
b, h1, h2 { color: red; }
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write:
h3 {
font-family: Arial;
color: blue;
}
By convention, most designers put separate rules on separate lines, but this is not required.
Placement of CSS Elements
Style sheets can be placed in three places in a document: in the HEAD element (<head> … </head>), in an external file, or within an individual element. Style calls placed within an individual element will only affect that element, while other style calls affect the entire page or any page that loads the style sheet.
Styles Within the Elements
The example on page one of this lesson shows a style inside an element. In the H4 element to be precise:
<h4 style="color: #0000ff;">another blue headline</h4>
Creating styles as an attribute of an element is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of text-decoration: none;. For example, put this HTML in your web page:
<a href="http://webdesign.about.com/od/css/a/aa011899b.htm">This link has the default decoration</a>
<a href="http://webdesign.about.com/od/css/a/aa011899b.htm" style="text-decoration: none; color: #000000;">This link, while still a link, is not underlined and has a color of black.</a>
Styles Within the Head of the Document
To create a style sheet to affect the existing page, you place the CSS in the HEAD element of the page. You surround the CSS with a STYLE element (<style> … </style>).
<head>
<style>
h4 { color: blue; }
</style>
</head>
All you need are the beginning and ending <style> and </style> tags. If you’re writing HTML5, you don’t need to include anything else, but in HTML 4, you should include the MIME type inside a type attribute (<styletype="text/css">. And if you think you will be supporting browsers that are 3–5 or more years out of date, you should enclose your styles in a comment (<!-- put styles here -->)
External Style Sheets
You can create a separate document with all of your style information in it and either link or import it into your document. These are called external style sheets. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
An external style sheet is just a text file with CSS selectors and properties in it. The browser reads these selectors in order from top to bottom. You write the CSS the same way you write the styles in a style attribute or inside the STYLE tag in the HEAD of the document.
To change all H4 headlines to blue and all paragraph text to red in an external style sheet you would write:
h4 { color: blue; }
p { color red: }
And then save that file to a file named filename.css. You can change the filename to anything you want. I usually use the word “styles” i.e. styles.css, but you can create external style sheets for various purposes and name them all for their purpose i.e. layout-styles.css andfont-styles.css, etc.
Linking an External Style Sheet
The most common way to include an external style sheet is with the LINK element. You call a linked style sheet like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Importing an External Style Sheet
Another way to load external style sheets is with the @import command. This allows you to separate your style sheets into multiple documents, while only having one style call in the document itself. You import style sheets like this:
@import url(http://yoursite.com/stylesheet.css);
Then you place that line either inside a STYLE element in the HEAD of your document:
<style>
@import url(http://yoursite.com/stylesheet.css);
</style>
Or anywhere inside a stylesheet document (named filename.css).