CSS CHEATSHEET

How To Use CSS

Syntax: style-name {property: value;}

External Style Sheets - 2 methods for linking styesheets:
link: <link rel="stylesheet" type="text/css" href="style.css" />
import: <style type="text/css">@import("style.css") </style>

Styles Located in Page (place in head tag)
<style type="text/css">
style-name { property: value; }
(more styles)
</style>

Inline CSS Styles as HTML Attributes: <htmlTag style="property: value">

CSS Comment /* This is a comment */

Pseudo Selectors For hover text effects: (use this specific order)
a:link a:active a:visited
Followed by the hover selector:
a:hover

CSS Hover Example:
a:link,a:active,a:visited{ color:#000000; text-decoration:none;}
a:hover{color:#0000FF;text-decoration:underline;}

Position

position:
static - default inline
relative - in relation to its container
absolute- can be positioned anywhere

z-index: in absolute positioning, an element can overlap another. Default is 0. Top in Firefox is 999
left: X position (pixels from the left relative to its container) of the left border of an element
top The y position (pixels to the top relative to its container) of the top of an element

clear: Starts a newline where specified.
both | left | right | none;
float: Floats box to a specified side of preceding container :
left | right | none

Text and Font

font-style italic | normal
font-variant: normal | small-caps
font-weight: bold | normal | lighter | bolder | integer (100,200,300,400,500,600,700,800,900)
font-size: integer + px| pt | em | %
font-family: (name, name)
letter-spacing integer + px| pt | em | %
line-height: distance line of text occupies between vertical baselines
text-align: left | center | right | justify
text-decoration: blink, none, underline, overline, line-through
text-indent integer + px| pt | em | %
text-transform capitalize | lowercase | uppercase
vertical-align: relative to line height baseline|sub|super|text-top|text-bottom|middle|top|bottom|%|inherit
word-spacing: integer + px| pt | em | %

Lists

list-style-type: disc|circle|square|decimal|lower-roman|upper-roman |lower-alpha|upper-alpha|none
list-style-position: inside; outside (for bullet)
list-style-image:url() for using an Image as a bullet

Lists are commonly used as horizontal menus by using the attribute list-style:none; and float:left; for the <li> tags

CSS Basics

class: name preceded by a period - use for recurring styles
CSS Class Example: .feature-headline{ font-weight:bolder; font-size:1.5em; }

id: name preceded by a hash (#) mark - single instance per page
CSS ID Example: #page-headline{ font-weight:800; font-size:2.5em; }

div use to create page (scaffolding) structure and formats information containers
span - use for inline textformatting - does not hold width or height

color - six-digit hex value (#FF0000) or (color name) for text, also used in some selectors as an attribute

cursor - manages how mouse pionter is displayed.
cursor properties - crosshair | wait | help | text |default | auto

display: (full browser compatiblity only)
block - holds width and height;
inline-formats text;
none - hides element removes height and width.

overflow:Use to tell container how to handle content that is bigger than the box that holds it.
visible - Content is visible outside box.
hidden - crops content at container height and or width
scroll - adds scrollbars whether content overflows or not.
auto - if content overflows, it adds scrollbars.

visibility: visible | hidden (still holds width and height)

Box Model - CSS Layout info

Border

border:solid 1px #ff000; = one pixel red border
border-width: thick | medium | thin | px
border-style: dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color: hex color value

Background

background-color:#hexcolor;
background-image:url(../image.jpg);
background-repeat: repeat | no-repeat | repeat-x | repeat-y
background-attachment: scroll | fixed
background-position: top | center | bottom | left | right | x y