Cheat Sheet – CSS

CSS Display

display: block;
display: inline;
display: none;
visibility: hidden;

The CSS Box Model

margin: value;
padding: value;

border: size style color;

width: value;
height: value;

overflow: auto;
overflow: scroll;
overflow: visible;
overflow: hidden;

float: value;
clear: value;

position: fixed;
position: static;
position: relative;
position: absolute;
z-index: value;

Types of CSS

Inline CSS
Internal CSS
External CSS

Inline CSS Syntax

style=”property: value;”

Internal CSS Syntax

<style type=”text/css”>
selector { property: value; }
</style>

External CSS Syntax

selector { property: value; }

Classes & Ids

Multiple Classes Per Page
Single Id Per Page

.class { }
#id { }

CSS Comments

/* This is a comment. */

CSS Font Styling

font-family: value;
font-size: value;
color: value;
font-weight: bold;
font-style: italic;
font-variant: small-caps;

CSS Text Styling

word-spacing: value;
letter-spacing: value;
line-height: value;
text-indent: value;
text-decoration: value;
text-transform: value;
text-align: value;
text-shadow: values;

CSS Backgrounds

background-color: value;
background-image: url(”);
background-repeat: value;
background-position: value;
background-attachment: value;
background: color url(”) position;

CSS Links

a {}
a:visited { }
a:hover { }
a:active { }

CSS Lists

list-style-type: value;
list-style-image: url(”);
list-style: value url(”);

Cursor Styling

cursor: value;

CSS Pseudo-Elements

:first-letter
:first-line
:before
:after

CSS Attribute Selectors

[attribute] { }

Comments