Barbara's CSS Cheatsheet

Skip navigation

Basics and Meta

Basic Terminology and Syntax -- Basic Stylesheet -- Meta -- Redirect

In Alphabetical Order

Backgrounds -- Best Practices -- Borders -- Center -- Class -- Comments -- Descendants -- Display
First-child -- First-letter -- Floats -- Fonts -- IDs -- Links -- Lists -- List Style Type
Navigation-- Outline -- Paragraphs, Indent -- Protect Photos -- Remove Bullets -- Selectors
Special Characters -- Tables-- Text Color-- Text-decoration -- Transparency -- Troubleshooting
White Space, Removing It -- 3D Push Effect

Basic Terminology and Syntax

selector {property: value;}

Basic Stylesheet

Ex.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--

BODY {background: white; color: black;
font-family: "Times New Roman," "Arial," sans-serif;}
BODY {background: url ( )}
h1, h2, h3 { }
-->
</style>
</head>

or <link rel="stylesheet" type="text/css" href="stylesheet.css"> in head

Meta

Put in head
<meta name="author" content=" ">
<meta name="copyright" content=" ">
<meta name="keywords" content=" ">
<meta name="description" content=" ">

Redirect

Put in head
<meta http-equip="refresh" content="22; url=http://foo.com"> /*22 is seconds before refresh. URL is what to direct to*/

<hr>

In general, write 20px, not 20 px, because the extra space will confuse Mozilla/Firefox or Netscape.

Go to top

Backgrounds

{background-color: #f00;}
{background-image: url(frodo.gif)}
{background-image: url(frodo.gif; background-repeat: repeat-y)} /*For image down left.*/
{background-image: url(frodo.gif; background-repeat: repeat-x)} /*For image across top.*/
{background-repeat: repeat, no-repeat, repeat-x, repeat-y;}
{background-attachment: fixed; scroll;}

Best Practices

Name for function, not position on the page. Don't do "leftnav," do:
#maincontent
#mainnav
.booktitle
.menuitem
.emph

Declare all the stuff in h1, and then in h2, declare only what's different. The rest will cascade.

To get rid of browser peculiarities, in css:

html, body {margin: 0px; padding: 0 px; border: 0 px;}

Borders

Can be for p, table, etc. Can also do as span style.
{border-bottom: thick solid red}
{border: 8px outset green}
{border: 8px inset green}
{border: red groove 5px;}
p.inset {border-style: inset:} --> <p class="inset">
{background-color:#fff; border: none;} /*extends color to edges of box in Netscape*/
{border-width: 1px; thin; medium; thick;}
{border-style:dashed; dotted; double; groove; inset; outset; ridge; solid; none;}
{border-color :#foo;}

Border-Style

{border-style: dotted; dashed; solid; double; groove; ridge; inset; outset; double; groove; groove double; double solid; solid double;}

After border-style, can use:
border-right-width, border-left-width, border-top-width, border-bottom-width
or border-width : 5px, 5px, 2px
or border-color: ____ _____ ____ ____

Go to top

Center

.center {text-align: center}
In HMTL, use <h1 class="center">, <p class="center">, etc.

Class

Mnemonic "Class period"
p.blue { }
.blue { } /*any class="blue"*/
ul.hebrew { }

<p "class=blue">
<ul "class=hebrew">

Comments

<!-- in HTML
-->
Use comments to hide CSS from older browsers. Add the html comments after <style type="text/css"> and before </style>
/ plus * in CSS
* plus /

Go to top

Descendants

Adjacent

h1+h2 {color: #00f;} /*any h2 right after h1 should be blue. Not supported in IE 6 or Net 4 or lower.*/

Any Layer

div span { } /*Use to determine something no matter how many layers are in between.*/

Child

div >p.first child {} body>p {} div ul>li p {}

Display

p {display: block; or inline; list-item;}

First-child

Need a doctype to work in IE.

First-letter

p.first-letter {color: ; font-size: ;}

Floats

img.icon {float: left; right;}
h1 {clear: left;}

Go to top

Font

{font-weight: bold; bolder; lighter;}
{font-size: 12pt; 150%; 130%; 100%; small, smaller, x-small; medium; large; larger; x-large;}
If declare size and font family, do in that order.
{font-style: italic;}

IDs

Mnemonic "ID number"
p#indent1 { }

<p"id=indent1">

Go to top

Links

a:link {color:blue; }
a:visited { }
a:hover { }
a:active { }

or a:link IMG {border:2px solid blue }
a:visited IMG { }
a:active IMG { }

or
a:link {padding: ; background:#fff (ball.gif) left center no repeat; color: #c00;} /*for image that changes on hover*/
a:hover {background: (ball2.gif))
a:active {background: (ball3.gif)}

a:link
a:hover

or
a {border: 4px outset; padding 2px; text-decoration: none;} /*for button with border*/

or
a.help:link --> <a class="help" href="#">
a.help:visited-><a class="help" href="#">
a.red:visited {color: #ff0000}

a:link can have {color: #xxx; background: #xxx; text-decoration: ; padding: ; border: ; border-color: ;}

Go to top

Link Style sheet

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Lists

#menu ul { } --> <div id="menu">, <ul>, <li>, </li>, </ul>, </div>.
#menu a:hover { }--><div id="menu">, <ul>, <li>, </li>, </ul>, </div>.

ul, li {list-style-type: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; }
ul { list-style-image: url (http://www.geocities.com/takhaetmentuhotep/kemet.gif) }
ul {list-style: url ( ) disc }

li.square { }--> <li class="square">

List Style Type

{list-style-type: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha;
lower-latin; upper-latin; lower greek: upper-greek; hebrew; ckj-ideographic; none:}
{list-style-type-image: url;}

Go to top

Navigation

Confetti

div.map {padding: ; margin: ; clear: both;} /*makes container for menu. ID attributes on the ps.*/

<div class="map">

<p id="p1"><a href=" :></a>

<p id="p2"><a href=" :></a>

#p1, #p2 { }

#p1 A,#p2 A {text-decoration: none;}

#p1, #p1A {color: blue;}

#p2, #p2A {color: green;}

Highlight

Highlight Nav Item of the Page
Pages= Home, About us, Contact us

<ul>
<li><a href="foo" class="home">Home</a></li>
<li><a href="foo1" class="about">About us</a></li>
<li><a href="foo2" class="contact">Contact us</a></li>
</ul>

In each page's body tag, put whichever of these: <body id="home">, <body id="about">, <body id="contact">


#home .home, #about .about, #contact .contact
{
highlighted navigation commands
}

Jewel

<style type="text/css">
a.nav
{
border: gold solid medium;
outline-style: solid;
outline-color: gold;
background-color: green;
}
</style>
</head>
<body>

<a href="foo" class="nav">Kemet
</a>

Go to top

Outline

Different than borders because it doesn't effect layout. It goes on top.

Borders over several lines have open sides, but an outline has closed.

{outline-color: color; invert;} /*Invert changes whatever color is on the screen. For FF 1.5, you must define a style.*/

{outline-style: ;}

{outline-width: ;}

Paragraphs, Indent

p+p {text-indent: 1.5em; margin-top:0;} /*indents first line of only the paragraph that follows another paragraph. If have exceptions, for ex. captions, do a p.cation.*/

Protect Photos

<body oncontextmenu="alert('You may not right click'); return false;">

Remove bullets

#nav-menu ul
{ list-style: none; }
#nav-menu li
{background-image: url ( );
background-repeat: no-repeat;
background-position: 0.4 em;
padding-left; .6em:}
Then,
<ul id="nav-menu">
<li id="nav-menu">

Go to top

Selectors

group selectors, ex:
h1, h2, h3 { }

h1+h2 {margin-bottom: 0;}

color:#00f;} /*h2 immediately after an h1. Not supported by IE6 and lower, or Netscape 4.*/

Children

body>p {} /* effects all ps in a body. Doesn't work in IE6, N4 (and lower).*/

div ul > li p { } /* All ps in al li child of ul, descendant of a div*/

Descendant

div p { } /* Only ps in a div. */

Grandchildren

div*em { } /*effects all ems that are grandchildren (2 elements below) a div. Ex. div, p, em. Doesn't work in N4, IE4, IE5.*/

Go to top

Special Characters

is & # 187 ;
< is & # 60 ; beginning bracket
> is & # 62 ; end bracket
( is & # 40 ; beginning parenthesis
) is & # 41 ; end parenthesis
" is & quot ; quote
! is & # 33 ; exclamation point
- is & # 45 ;hyphen
* is & # 42 ; asterisk
{ is & # 123 ; beginning wavy bracket
} is & # 125 ; end wavy bracket
nonbreaking space is & nbsp ;

Tables

#main {width:90%;}
<table id="main" cellspacing="3">
table {border-collapse: collapse; separate;}
table {empty-cells: show;}

Text color

Use {color: black;}
a.emphasis {font-weight: bold;}
<a class="emphasis">

Text-decoration

{text-decoration: blink, line-through, none, overline, underline;}

Transparency

background-color: transparent; /*lets other colors show, say like show background in a table*/

Troubleshooting

Doesn't recognize:
margin-left: auto
margin-right: auto
Use
width: 90%
margin: 0 5% 0%;

Doesn't recognize:
li: hover ul
Add li: sfhover ul
As in
#nav li: hover ul, #nav li.sfhover ul;
With or without period??

Doesn't do well calculating with odd numbers, use even.

When set ems for typography, set body to 100% or zoom goes wonky in IE

http://browershots.org

BC-remote access

Overflow
:visible (goes over box if too big)
:hidden (clipped, can't see but affects layout)
:scroll (to keep scroll bars visible)
:auto (agent-dep)

To center things within parent:
img.logo { margin: 0 auto; }
Works in IE6+

When use display: block with li's, if you want them to be clickable the whole width of the li, put display: block in the links too.
As in ul.navbar li a

Display: block makes things full width?

Blockquote disappears
Try blockquote {position: relative;} to make visible

Nav menu
Submenus need to be marked as sub-lists
Min-height for sub list so all equal

Images appear too early
Give images and some divs width/height

Go to top

White Space - Removing It

h2 {margin-bottom: 0;} /*gets rid of extra space*/
p {margin-top: 0:}

3d Push Effect

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Go to top

Index