CSS cheat sheet

p {color:#ffffff;}

selector { property value } propert+value=declaration

ID selector defined as a hash symbol #

e.g. ul#idname { styles go here }

<ul id="idname"> applies the defined styles to the named list. The selector targets this list and only this list as ID selectors are unique.

We also use ID selectors to identify and style sections of the page that do not yet have a relevant tag such as footers and headers and containers.

e.g. #footer, #column_wrapper, ect.

div#idname - apply to divs
ul#idname - apply to uls
p#idname - apply to ps
#idname - apply to anything in the HTML where the ID attribute is that name

Class selector defined as a period ( dot ) .

e.g. ul.classname { styles go here }

<ul class="classname">applies the defined styles to this list. The calss selector can be used to target multiple lists, it does not have to be unique.

e.g. p.classname, h1.classname { styles go here } can be used to target any paragraph oe header level 1on the page.

Like the ID selector, the class selector can be applied to any element

.classname {styles go here } can be used to apply the defined style to any HTML element.

<p class="classname">This will be displayed with the style defined as classname</> or

<p>This will not be targeted, but <span class="classname"> this will </span> this won't </p>

<p style="color:red; margin-left:20px;">This paragraph would be red and 20 pixels from the left margin.</p>

<p>This would be regular text but say you wanted this bit to be <span style ="color:red; font-size:30px;">big and red</span>, then you could do it in-line with having to write a class</p>

Of course it's allways better to have your presnetaition separated from your HTML in an external style sheet. Even though it's a pain writing classes for one or two words or to pad something away from something else.

In-line css < style type ="text/css" > styles go here