Cascading Style Sheets, level 1 (Quick Reference Guide)

Based upon the W3C Recommendation, 17 Dec 1996
Original Document (full recommendation) is at http://www.w3.org/pub/WWW/TR/REC-CSS1
Authors: HŒkon Wium Lie (howcome@w3.org), Bert Bos (bert@w3.org)


Implementing:

<HTML>
<HEAD>

(1) <LINK REL=STYLESHEET TYPE="text/css" HREF="'url'">

(2) <STYLE TYPE="text/css">
    @import url(http://style.com/basic);
    H1 { color: blue }
    </STYLE>

</HEAD><BODY>

(3) <P STYLE="color: green"> this paragraph is green.

</BODY>
</HTML>


Shortcuts:


	H1, H2, H3 { font-family: helvetica }

	H1 {
            font-weight: bold;
            font-size: 12pt;
            line-height: 14pt;
            font-family: helvetica;
            font-variant: normal;
            font-style: normal;    }

equivalent to:

	H1 { font: bold 12pt/14pt helvetica }



Classes:


<STYLE TYPE="text/css">
      H1.pastoral { color: #00FF00 }
	.yellowy { color: #00FFFF }

</STYLE>
</HEAD>
<BODY>
  <H1 CLASS=pastoral>Way too green</H1>
  <H2 CLASS=yellowy>Yellow Text</H2>
  <H3 CLASS=pastoral>Regular Text (NOT Green)</H3>
  <P CLASS=yellowy>This whole paragraph would be yellow</P>
</BODY>
</HTML>


 

CSS1 properties


A:link { color: red }       /* unvisited link */
A:visited { color: blue }   /* visited links */
A:active { color: lime }    /* active links */

A:link IMG { border: solid blue }

example using a class:
  A.external:visited { color: blue }
  <A CLASS=external HREF="'url'">external link</A>

<url> format :  url(http://www.url.com/filename)
<rgb> format:	rgb(n, n, n)   n is from 0-255

first value listed should be the default, or initial setting.

Font properties
'font-family' [ serif, sans-serif, cursive, fantasy, monospace, (or font name) ]
'font-style' [ normal | italic | oblique ]
'font-variant' [ normal | small-caps ]
'font-weight' [ normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900 ]
note: normal = 400 bold = 700
'font-size' [ 8pt, 10pt, 12pt, .... xx-small | x-small | small | medium | large | x-large | xx-large
50%, 75%, 100%, 125%, etc...
.5em, .75em, 1.0em, (same as %) ]
'font'
(shorthand)
[ <font-style> || <font-variant> || <font-weight> ] ? <font-size> [ <line-height> ]? <font-family> ]
examples:
   P { font: 12pt/14pt sans-serif }
   P { font: 80% sans-serif }
   P { font: x-large/110% "tekton", serif }
   P { font: bold italic large Palatino, serif }
   P { font: normal small-caps 120%/120% fantasy }
Color and background properties
'color' [ color name | <rgb>) | hex# ]
'background-color' [ <color> transparent]
'background-image' [ <url> | none ]
'background-repeat' [ repeat | repeat-x | repeat-y | no-repeat ]
'background-attachment' [ scroll | fixed ]
'background-position' [<percentage> | <length>]{1,2} | [top | center | bottom] || [ left | center | right ]
'background'
(shorthand)
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
examples:
  BODY { background: url(banner.jpeg) 50% 0% }

  BODY { background-image: url(banner.jpeg);
         background-position:  top center;   }

the above two are equivalent, as are the following two

       BODY { background: url(banner.jpeg) top left  }
       BODY { background: url(banner.jpeg)  0% 0% }

example:   P { background: url(chess.png) gray 50% repeat fixed }
Text properties
'word-spacing' [ normal | <length> ]
'letter-spacing' [ normal | <length> ]
'text-decoration' [ none | [ underline || overline || line-through || blink ]
'vertical-align' [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | ]
'text-transform' [ none | capitalize | uppercase | lowercase ]
'text-align' [ left | right | center | justify ]
'text-indent' [ <length> | <percentage> ]
'line-height' [ normal | <number> | <length> | <percentage> ]
(negative values are not allowed.)
Box properties
'margin-top' [ <length> | <percentage> | auto ]
'margin-right' [ <length> | <percentage> | auto ]
'margin-bottom' [ <length> | <percentage> | auto ]
'margin-left' [ <length> | <percentage> | auto ]
'margin'
(shorthand)
BODY{ margin: 2em } /* all margins 2em */

BODY { margin: 1em 2em }
/* top & bottom = 1em, right & left = 2em */

'padding-top' [ <length> | <percentage> ]
'padding-right' [ <length> | <percentage> ]
'padding-bottom' [ <length> | <percentage> ]
'padding-left' [ <length> | <percentage> ]
'padding' (shorthand)
'border-top-width' [ medium | thin | thick | <length> ]
'border-right-width' [ medium | thin | thick | <length> ]
'border-bottom-width' [ medium | thin | thick | <length> ]
'border-left-width' [ medium | thin | thick | <length> ]
'border-width' (shorthand)
'border-color' [ <color> ]
'border-style' [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
'border-top'
(shorthand)
[ <border-top-width> || <border-style> || <color> ]
'border-right'
(shorthand)
[ <border-right-width> || <border-style> || <color> ]
'border'
(shorthand)
[ <border-width> || <border-style> || <color> ]
'width' [ auto | <length> | <percentage> ]
'height' [ auto | <length> | <percentage> ]
'float' [ none | left | right ]
'clear' [ none | left | right | both ]

This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With 'clear' set to 'left', an element will be moved below any floating element on the left side. With 'clear' set to 'none', floating elements are allowed on all sides.

Classification properties
'display' [ block | inline | list-item | none ]
'white-space' [ normal | pre | nowrap ]
'list-style-type' [ disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ]
'list-style-image' [ <url> | none ]
'list-style-position' [ outside | inside ]
'list-style'
(shorthand)
[ <keyword> || <position> || <url> ]

Units

    em - the height of the element's font
    ex - x-height, ~ the height of the letter 'x'
    px - pixels, relative to canvas
    pt - font point size
    in - inches
    cm - centimeters
    mm - millimeters
    pc - picas

Sample style sheet:


<STYLE TYPE="text/css">

BODY {	margin: 1em;
		font-family: serif;
		line-height: 1.1;
		background: white;
		color: black; 	        }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

PRE { white-space: pre;
	font-family: monospace  }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
LI { margin-left: 3em }

HR { border-top: solid }

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

</STYLE>