What are Cascading Style Sheets?

CSS are a part of HTML 4.0 and gives authors the ability to suggest how their documents are styled. It offers a superior solution to the buggy font tag, other proprietary tags and attributes, and adds many other ways to style a document.

By separating layout from content, CSS makes it easier to create and maintain websites. One style sheet can even be used to style an entire site. By updating that one file you instantly update your site.

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
External
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color: yellow}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

This is a paragraph

If you add more than one declaration a semicolon (;) must seperate all declarations. Remember that, OK?

Text rollovers

One of the most common ways to use CSS is to add effects to text links.
Example:
Hover your pointer over this link


This is the code that produces it:

<style type="text/css"><!--
a:link {COLOR:blue; TEXT-DECORATION:none}
a:active {COLOR:red; TEXT-DECORATION:none}
a:visited {COLOR:green; TEXT-DECORATION:underline}
a:hover {COLOR:red; TEXT-DECORATION:underline overline}
--></style>

How does it work?

a:link applies to unvisited links.
a:active applies to a link being clicked.
a:visited applies to visited links.
a:hover applies to a link with the pointer over it.

Apart from changing the color and text decoration, you can also make them bold{FONT-WEIGHT:bold}, italic{FONT-STYLE:italic} or give them a border{BORDER:thin solid green} or a background color{BACKGROUND:gray}.

 

What are CSS ? | Cursor Control | Custom Cursors | CSS - Classes | CSS-Scrollbars