Skip to main content
Faculty and Staff

How to Use CSS (Cascading Style Sheets)

Basic Style Sheet Code

The basis of style sheets are rules. Here is an example of the simplest form of rule:

h1 { color: green; }

Each rule consists of two parts, the selector and a declaration. In the example above, H1 is the selector. The selector is the HTML tag you wish to apply the style to. Any HTML tag can be used as a selector (<p> , <a> , <table> , etc.). The second part, the declaration, states what the style is. This always goes between the curly brackets( {} ). The first part of the declaration is the property that the style is being applied to (in this case, color) and second part is the value of that property (green).

You can also put more then one property in the declaration by separating them by semi-colons (;) for example:

h3 { color: green; font-size: 37px; font-family: impact; }

This would make text with the h1 tag around it green, 37 pixel tall and in Impact font.

You may also group selectors if you want several tags to have the same style, for example:

h1, p, blockquote { font-family: arial; }

All of the text in these 3 tags would now be in Arial.

Common Properties

Here is a list of some common properties for text & fonts:

color - sets the color of the text within an element

color: #009900;
color: green;

font-size - sets the size of the text within an element.

font-size: 12pt;
font-size: 37px;

font-family - sets the font family to be used for the text

font-family: Arial;
font-family: Arial, sans-serif;
font-family: Arial, Helvetica, sans-serif;

background - sets a background color for a specified element

background: #009900;
background: green

text-align - aligns the text in an element

text-align: center;
text-align: right;
text-align: left;
text-align: justify;

text-decoration - sets the decoration of the text within an element

text-decoration: underline;
text-decoration: none;

For a complete list of supported CSS properties, review CSS, Level 1 from W3C.

Examples

Lets look at an example of some of the rules you have just learned. Below is a sample selection of CSS code, which we have embedded into this document. You will learn how to embed style sheets into your own documents in the next section.

<style type="text/css">
<!--
h1 { color: green; font-size: 30px; font-family: impact}
p { background: yellow; text-align: center; font-family: courier }
a { text-decoration: none }
-->
</style>

Now we create the following page:

<body>
<h1>Style Sheet Example</h1>
<p>This is a test</p>
<a href="test.html">Test Link</a>
</body>

It will look like the following:

Style Sheet Example

This is a test

Test Link

Viola, style sheets at work. If the above does not look any different then normal, your browser may not be style sheet compatible. You may want to download a more recent browser, such as MS Internet Explorer 8.0 or Mozilla Firefox 3. As you can see, this section has primarily dealt with text/font style sheets. We will learn later how to use other types of style sheets, but now we need to learn how to put style sheets on a page.

Part 2B:

How to put CSS in your page.

Forms

ITS Web Account Application Form

Departmental Web Server Registration

Request a Link

Request to add/update a hyperlink to my page on the main URI Web site.

What if the Webmaster made a mistake!

WEB PUBLISHING BLOG

Subscribe to the URI Web Publishing Blog for latest news, tips, resources and tools related to web technologies.

Web Publishing Listserv

Subscribe to URIWEB-L Listserv to keep informed of ideas on web-related issues on campus.