COMM 223 - Introduction to Web Site Design and Construction

CSS Cheat Sheet


Basic CSS Tags
Be sure to code your page using the standard H1-H6 and Paragraph tags in HTML. Then you can apply CSS code to modify the appearance of those tags on your web page.

CSS tags go in an external style sheet linked to your document. In a page, you would use opening and closing STYLE tags around your set of CSS styles. Remember to enclose the actual specifications in brackets { }.

Here are some sample commands to style an H2 Subtitle from this:

Assorted Tips and Tricks

to this:

Assorted tips and Tricks

With this code

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: blue;

Modify a whole paragraph of text to look like this with this code:

 a {
font-family: Arial, Helvetica, sans-serif; /*This selects the typeface*/ color: blue; /*This selects the type color*/
font-size: 12px; /*This selects the size. Can also be ems (i.e. 1.5em)*/
letter-spacing: 2px; /*This selects the horizontal letter spacing*/ line-height: 16px; /*This selects the vertical spread. Can also be (i.e.150%)*/ text-align: left; /*Or right, center or justify*/ }

Declare a background color for your page like this:

	background: #F3D8D8;

You can center your page content nicely by adding this to your body tag:

	  margin: 10em;
   width: 70%;

To link to an external style sheet, the code to put in your <head> section is:

<link rel="stylesheet" href="document-name.css">

Modify margins and padding with these parameters (substitute the word padding for the word margin in the following examples for padding parameters):

margin: 10px 20px 15px 10px; /*Top, right, bottom and left sides.*/
margin: 10px 20px 15px; /*Top, both sides, bottom.*/
margin: 10px 20px; /*Top and bottom, right and left.*/
margin: 10px; /*All sides.*/

Images are best handled as "blocks" so you can control their position on the page. Add this to your CSS.

img {
display: block;


1.Add this to your CSS.

#main {
float: left;
width: 60%;
padding: 2%;
background: white;
#sidebar {
float: right;
width: 30%;
padding: 2%;
font-size: 90%;
color: white;

2. Then wrap some content with these two div tagsin your HTML doc.

<Div ="main">
/*content here/* </div> <Div ="sidebar">
/*content here/* </div>


1. Put the following code in your CSS file.

ul, li {
margin: 0;
padding: 0;
list-style: none;
li a {
display: block;
width: 8em;
line-height: 2em;
font-size: 1em;
text-decoration: none;
background: #D5973C;
color: white;
padding: .2em 0 .2em 1em;
margin-bottom: .2em;

2. Then put an unordered list in your HTML file like below.

<li><a href="dogs.html">Dogs</a></li>
<li><a href="cats.html">Cats</a></li>
<li><a href="fish.html">Fish</a></li>
<li><a href="insects.html">Insects</a></li>