Cascading Style Sheets
What is a CSS and how does is work
K-State's Style Sheet
A central style sheet you can use on your site
Using the K-State Templates
Using the central web templates with the central style sheet
More information on CSS
Links to indepth information about style sheets
Cascading Style Sheets (CSS) is a mechanism for adding style (e.g. fonts, colors, spacing) to web documents. Style sheets work like templates: you define the style for a particular HTML element once, and then use it over and over on any number of web pages. If you want to change how an element looks, just change the style; the element automatically changes wherever it appears. Style sheets allow web designers to quickly create more consistent pages and more consistent sites.
Say you want to create a page where each instance of <H3> text is green, italicized, and in the Arial typeface. Before the advent of CSS, you had to write the following HTML every time you used <H3>:
<EM><FONT face="Arial,san serif" color="green"><H3>
This is a green, italic, Arial H3 header.
</H3></FONT></EM>
But CSS lets you specify this style for all <H3> tags in a single step by defining what is called a selector:
H3 { font-family: Arial;
font-style: italic;
color: green }
The selector (in this case, the <H3> element) is followed by the style definition, which outlines the style for that selector. The rule font-family: Arial has the same effect as <FONT face="Arial, san serif">; font-style: italic has the same effect as <EM>; and color: green has the same effect as <FONT color="green">. So once the style above is applied to the HTML document, every <H3> element will come out green, italic, and Arial while retaining its inherent HTML characteristics.
There are four ways to combine styles with HTML. The two simplest ways are: 1) defining styles in the head or the body of an HTML document, and 2) creating a separate style sheet and attaching it to the HTML file.
The best way to define styles for a single HTML document is within the head of the document. (If you want to create a style sheet for use on several documents, link to an external style sheet instead.) Just place the selectors and their style definitions inside comment tags nested within a <STYLE> element, like so:
<HTML>
<HEAD>
<STYLE type="text/css">
<!-
H3 { font-family: Arial;
font-style: italic;
color: green }
->
</STYLE>
</HEAD>
<BODY>
<H3>This is a green, italic, Arial H3 header.</H3>
<P>
<H3>So is this.</H3>
</BODY>
</HTML>
The type attribute of the <STYLE> element defines the type of style sheet being used-in this case, CSS. (At the moment, the only other possibility is "text/javascript" for Netscape's proprietary JavaScript style sheets. In the future, other style sheet languages may be added.)
The comment tags nested within the <STYLE> element ensure that the style rules will not appear or cause errors in older browsers. Any browser that doesn't support <STYLE> will simply ignore the element and the information inside.
Note that the style element must be placed in the document's head along with the title element. It should not be placed within the body.
If you are likely to want to use the same styles for several web pages it is worth considering using a separate style sheet, which you then link from each page. You can do this as follows:
<HTML>
<HEAD>
<TITLE>Linking a CSS to your web page</TITLE>
<LINK rel="stylesheet" HREF="style.css">
</HEAD>
The LINK tag should be placed in the document's <HEAD>. The rel attribute must be set to the value "stylesheet" to allow the browser to recognize that the href attribute gives the web address (URL) for your style sheet.