NHS Designs

Resources

CSS Cheat Sheet: PDF

Web Design
CSS

CSS Cheat Sheet

 

Internal Style Sheets

Internal style sheets are CSS rules that go inside an XHTML page. All CSS rules go inside a <style> element, which goes inside the <head> element.

Example:

<head>
<title>An Internal Style Sheet</title>
<style type="text/css">
    p {
        color: #000000;
    }
</style>
</head>

 

External Style Sheets

External style sheets must be called from inside an XHTML page using a <link> element, which goes inside the <head> element. External style sheet file names must end in ".css".

Example:

<head>
<title>An External Style Sheet</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

External style sheets contain only CSS rules. They should never contain any XHTML tags such as <style>.

 

CSS Rules

All CSS rules are formatted like this:

selector {
    property: value;
}

Example:

p {
    color: #000000;
}

 

CSS Classes

CSS classes start the selector with a dot, such as this:

.bluetext {
    color: #0000ff;
}

CSS class allow you to pinpoint a single element for special treatment. For example, if you wnat only one paragraph to be blue but not all of them, you add the class to the open <p> tag, like this:

<p class="bluetext">

You do not leave the dot in the class name when adding the class to an XHTML element.

 

Some Beginner's CSS Rules

Below are some sample property/value combinations. You choose the selector - either a tag like <h1> or a class as mentioned above. The values below can easily be changed to something else in most cases.

Colors

Make Font Color Red

color: #ff0000;

Make Background Color Green

background-color: #00ff00;

Font Styles

Make Font a Sans-Serif Style

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

Make Font a Serif Style

font-family: "Times New Roman", Times, serif;

Make a Font Bold

font-weight: bold;

Make a Font Italicized

font-style: italic;

Make Text All Uppercase

text-transform: uppercase;

Font Sizes

Make a Font Approximately 12pt

text-size: small;

Make a Font Larger Than the Body Font

text-size: 130%; (or 1.3em)

Make a Font Smaller Than the Body Font

text-size: 90% (or .9em)

Text Decorations

Remove an Underline

text-decoration: none;

Add an Underline

text-decoration: underline;

Add an Overline

text-decoration: overline;

Borders

Add a Thin, Dotted, Gray Bottom Border

border-bottom: thin dotted #888888;

Remove a Border Around a Linked Image

img {
    border: 0px;
}

Text Positioning

Center-Align Text

text-align: center;

Right-Align text

text-align: right;

Add Spacing Between Lines of Text Within a Block Element

line-height: 20px;

Links

Here's an example of how to change the color and underline for links in their unvisited, visited, hover and active states.

Hover means the mouse is on the link but it has not been clicked yet.

Active means the link has just been clicked but the new page has not yet appeared.

a:link {
    color: #000000;
    text-decoration: underline;
}

a:visited {
    color: #444444;
    text-decoration: underline;
}

a:hover, a:active {
    color: #FF3300;
    text-decoration: none;
}

 


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Natomas High School Design Department