Don't be afraid. Remember when you learned HTML? This will be the same, trust me. ;)

CSS1 Cheatsheet v. 1


Follow this pattern: SELECTOR.class { property : value }
SELECTOR is the 'tag' you want to specify a Declaration for.
property is what you are going to affect.
value is what you want done.
Most SELECTORS can have multiple properties within the declaration separated by semi-colons (;).

First notes will be <HEAD> items, then followed by in-line attributes.

Anything in italics is what you will need to fill in.
Legend: x or y means horizontal and vertical, and must be represented in pixels.
     xx is a number you must supply.
     Anything separated by / needs you to choose a value.
     pt/in/cm/em/% are measurements you must choose from, and must have a number in front of them.
     foo is a file you supply.
<head>
<STYLE TYPE="text/css"> or,
<STYLE TYPE="text/css" Media="screen/print/projection/braille/speech/all>
the default is all, screen is common. Include others separated by commas.

<!-- Insert your code within this hidden comment so that it won't break older browsers.
The selectors can be capitalized or in lowercase, and the following HTML has to correspond to that.
BODY { color : #hex/name/rgb(xx%,xx%,xx%) ;
     background : #hex/name/transparent/url(foo) ;
     background-color : #hex value/name/rgb(xx%,xx%,xx%) ;
     background-image : url (foo) ;
     background-repeat : no-repeat/repeat-x/repeat-y ; X is the horizontal axis and Y is the vertical
     background-position : xxpx xxpx/xx% xx% ; Also try left/center/right, and top/middle/bottom
     margin-left : pts/in/cm/em/% ; Even a - (negative) value can be given
     margin-right : pts/in/cm/em/% ;
     margin-top : pts/in/cm/em/% ;
     margin-bottom : pts/in/cm/em/% ;
     font-family : verdana,arial,helvetica,etc... ;
     background-attachment : scroll/fixed ;
     text-transform : capitalize/uppercase/lowercase/none ;
     cursor : help/s-resize ; } You can place this here, or in P, to control the look of the cursor

P { text-indent : pt/em/in/cm ;
     text-align : left/justified/right ;
     margin : pt/em/in/cm ;
     font-family : foo ;
     font-size : xxpt ; Also, xx-small/x-small/small/medium/large/x-large/xx-large
     font-style : italics/bold/xxpt ;
     font-variant : small-caps/ ;
     font-weight : 100-900 ; 400 is normal weight
     line-height : xx/xxpt ; }
Shorthand notation: { font : italic small-caps 600 18pt/24pt "arial/helvetica" }

Class Attributes: These Selectors can be implemented inline to make temporary changes to the layout.
p.foo { padding-left : xxem ;
     border-left : solid/none ;
     border-right : solid/none ;
     border-top : solid/none ;
     border-bottom : solid/none ;
     border-left-width : xxem/thin/medium/thick ;
     border-color : solid/none ; }
Implement inline as <p class="foo">

DIV: If you use these, then you'll appreciate the control CSS gives you.
div { background : #hex/name/rgb(xx,xx,xx) ;
     padding : pt/em/in/cm ;
     width : xx% ;
     border : solid/none/dotted/dashed/groove/ridge/inset/outset ;
Without this property, some browsers show color only behind the text.
     border-width : xxem/thin/medium/thick ;
     border-color : #hex/name/rgb(xx,xx,xx) ;
Shorthand, { border-bottom-color : #000000 ; }

     .special { font-size : 8pt } This is an open class item that can be used with almost any in-line selector, and can be named anything

Specific Selector: p.initial:first-line { text-transform : uppercase }
     p.initial:first-letter { font-size : 130% ; float : none }


-->
</STYLE>
<LINK REL="STYLESHEET" HREF="foo.css">
this is the true purpose of CSS, linking to a list of styles that you created, thus letting you change one file which in turn affects all files that are linked to it. To do this, you need to take all the styles listed in the <STYLE> tag, save them in a .css file and link to it like above.
</head>
<BODY>

Style as an attribute:
<P type="text/css" style="color: navy">Foo</P>
<A type="text/css" text-decoration: "none/underline/linethrough" href="foo.html">Click/Click/Click</A>