CSS Cheat Sheet
This reference was adapted from Dawn Pedersen’s original sheet — thanks!
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;
}
The example above specifies that all text inside paragraph tags should be black.
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 want 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: sans-serif;
Make Font a Serif Style
font-family: 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
font-size: small;
Make a Font Larger Than the Body Font
font-size: 130%;
Make a Font Smaller Than the Body Font
font-size: 90%;
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;
}
(No Ratings Yet)
Loading ...
