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;
}
