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.


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 }

Now we create the following page:

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

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.

Think Big We Do

Copyright © 2017 University of Rhode Island.