Common CSS Rules

color

Specifies text/foreground color

color: red;             /* specified by name */  
color: #ff0000;         /* specified by hexadecimal value */
color: rgb(255, 0, 0);  /* specified by RGB value */   

Usage:

body {  
   color: red;    
}  

background-color

Specifies background color

background-color: black;   
background-color: #000000;   
background-color: rgb(0, 0, 0); 

Usage:

body {  
   background-color: yellow;    
} 
table {
  background-color:#000080;     /* navy */
} 

font-family

Specifies the font family of the text

font-family: Arial, Helvetica, Futura

Usage:

body {
   font-family: Arial, sans-serif;
} 

font-size

Specifies the size of the font

font-size: 14px;    /* absolute size: pixels */
font-size: 1.2em;   /* relative size: 1.2 times or 120% of the current font size in pixels */
font-size: 75%;     /* relative size: 75% of the current font size in pixels */
font-size: larger;  /* relative size: adjust the font size relative to the font size of the parent element */ 

font-style

Specifies the font style

font-style: italic;

font-weight

Specifies the degree of “boldness”

font-weight: bold;

Usage:

h2 {
   font-family: 'Time New Roman';
   font-size: 2em;
   font-style: italic;
   font-weight: bold;
}  

font shorthand

Specifies multiple property value in the font property

font: property-value-list

Usage:

h2 {
   font: 'Time New Roman' 2em italic bold;
}  

text-decoration

Specifies some special features of text

text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
text-decoration: none; 

Usage:

p.delete {
   text-decoration: line-through;
}
p.cap {
   text-decoration: overline;
}
p.attention {
   text-decoration: underline;
} 

text-indent

Indent the first line of a paragraph

p.indent {
   text-indent: 2em; 
}

…

<p class="indent">
   A homework exercise is not only an important contributor
   to what you learn in a class, but is often an important
   part of your grade as well. From a student's point of view, 
   homework is usually the first time the information
   from the course is used, and thus is a very valuable
   early feedback mechanism that helps the student
   prepare for exams.          
</p> 

text-align

Alignment of text horizontally

text-align: left;
text-align: center; 
text-align: right;
text-align: justify; 

Usage:

p {
   text-align: right; 
}  

float

Specify that text should flow around some element, often an image or a table

float: left; 
float: right;
float: none;   

Usage:

img {
   float: right; 
}  

padding

Specify the space around (inside) content

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
padding: 50px 30px 50px 80px;     /* specify space of top, right, bottom, left padding */ 
padding: 50px 30px 50px;          /* specify space of top, right/left, bottom padding */
padding: 50px 30px;               /* specify space of top/bottom, right/left padding */
padding: 50px;                    /* specify space of all four paddings */  

Usage:

p.special {
   padding: 25px 50px 75px 25px;
} 

border

Specify the style, width, and color of an element’s border

border-style: specify the kind of border to display
- Options: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
- Can combine: ex, border-style: dotted dashed solid double;

border-width: specify the width of the four borders

border-width: 5px;
border-width: medium;
border-width: 2px 10px 4px 20px         /* specify width of top, right, bottom, left borders */

border-color: specify the color of the four borders

border-color: red;
border-color: red green blue yellow;    /* specify color of top, right, bottom, left borders */   

Usage:

p.special {
   border-style: solid;
   border-width: thick;
   border-color: red;
}
p.special2 {
   border: 3px dotted #0088dd;
}  

Centering content

Steps to center an element inside a container:

Must first ensure that element is narrower than container
- By default, the element will expand to fill entire container, so the width of the element must be explicitly set!
Use auto value for left and right to create equal gaps

Example

.centered {
   width: 300px;
   margin: 10px auto 10px auto;      /* auto set margin for right and left */
   border: 2px solid #0088dd;
} 

Layout, Display, and Visibility

To force elements to be an inline or block element, we can explicity provide the property:

display: inline;
display: block; 

To force an element to be ignored (not laid out or take up any space) set display to none. This is very useful for content that is dynamically added or removed by scripts.

display: none;  

To cause boxes to be invisible, but still take up space, use visibility instead of display.

visibility: hidden; 

Example: With display set to none, the item is not displayed.

li {
   display: inline; 
   margin-right: 10px; 
}
li.coming-soon {
   display: none; 
} 

<ul>
   <li>Home</li>
   <li>Products</li>
   <li class="coming-soon">Services</li>
   <li>About</li>
   <li>Contact</li>
</ul> 

This produces:

Home  Products  About  Contact

However, visibility set to hidden instead, the item is laid out put invisible.

li {
   display: inline; 
   margin-right: 10px; 
}
li.coming-soon {
   visibility: hidden; 
}  

<ul>
   <li>Home</li>
   <li>Products</li>
   <li class="coming-soon">Services</li>
   <li>About</li>
   <li>Contact</li>
</ul> 

This produces:

Home  Products            About  Contact

Positioning schemes

There are five positioning schemes:

Normal flow (default)
Relative positioning
Absolute positioning
Fixed positioning
Float positioning

.relativepositioning {
    position: relative;
    top: 10px;
    left: 20px;
}

.absolutepositioning {
    position: absolute;
    background-color: lightgray;
    left: 30px;
    width: 250px;
}

.fixedpositioning {
    position: fixed;
    background-color: lightblue;
    left: 40px;
    width: 250px;
}

.floatpositioning {
    float: left;
    background-color: lightyellow;
    left: 40px;
    width: 250px;
}

<p><b>Normal Flow: </b>
Block level elements appear on a new line.  Even if there is space, 
boxes will not appear next to each other</p>
<p class="relativepositioning"><b>Relative Positioning: </b>
Elements are shifted from normal flow based on the position top and left.
The position of other elements is not affected.</p>
<p class="absolutepositioning"><b>Absolute Positioning: </b>
Element is taken out of the normal flow of the page and does not affect 
the position of other elements.  It moves as the user scrolls (absolute 
position on the page).</p>
<p class="fixedpositioning"><b>Fixed Positioning: </b>
Element is taken out of the normal flow of the page and does not affect 
the position of other elements.  It is in a fixed window position as the
user scrolls (fixed to the window).</p>
<p class="floatpositioning"><b>Float Positioning: </b>
Element is taken out of the normal flow and it is positioned either to 
the far left or far right of the container.  The element becomes a block 
element that other elements flow around.</p>

See a live version of this example.