Idaho State University Idaho State University Home PageISU Site Feedback FormISU Web Site SearchISU Website Index

WebDev Home
The ITRC
Information
Technology
Services


 

Banners
Images
Templates
Stylesheets
Javascript
Home

Cascading Style Sheets

Cascading Style Sheets (CSS) were designed to separate website content from layout presentation and create a quicker, more efficient method of updating the format of a site. They can be used for font style, color, and spacing. The style sheet is usually located in an external document but can be within the head section of an individual page. When saved as an external document, they allow the designer to quickly make changes to the format of multiple pages within a website by modifying one CSS file instead of each individual page.

The syntax for CSS consists of three elements: the selector, property, and value. The selector is the html tag that the style will apply to, such as <p> or <font>. The property is the desired attribute of the html tag, such as "color" or "text-align," with a value assigned to it, such as "black" or "right." The property and value are bracketed by curly braces and separated by a colon.

For example, to set the paragraph font color as black, the designer would use the following code:

P {color: black}

This code would be placed in the head section within a <style> tag or saved as an external file with a .css extension to be applied to multiple pages. Each page would link to the external style sheet using the <link> tag in the head section as follows:

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

The designer may also use a class selector to define different styles for the same html element. For example, to define some text as black and some as red the designer would place the following code in an internal or external style sheet:

p.red {color: red}

p.black {color: black}

To format a red paragraph in a page, the designer would write the following code:

<p class="red"> This paragraph will be red </p>

To learn more about Cascading Style Sheets, consider visiting the following links:

http://www.sizefactory.com/xhtml/cssbasics.html
http://www.w3schools.com/css/css_intro.asp
http://www.htmlhelp.com/reference/css/
http://www.websitetips.com/css/index.shtml
http://www.westciv.com.au/style_master/academy/css_tutorial/

 
Idaho State University921 South 8th Avenue Pocatello, Idaho, USA 83209