Always Learning

Student Resources

CSS Cheat Sheet!

* {
padding:0;
margin:0;
}

The universal selector communicates to all selectors and "zeros" browsers' default spacing to "0"

body {
background:#ccc;
font-family: "Times New Roman", Georgia, Serif;
font-size:100%
}

The body's background color will be light grey, the font family will be Times New Roman, and the font size is 100% (1em=16px)

body {
background-image:url(images/background.jpg);
}

Background image diplayed in the body

div#wrapper {
width:940px;
margin:0 auto;
}

Your wrapper div's width is 940px and is centered

h1 {
color:red;
}

Headline 1 will display the color red

img {
float:right;
margin-left:30px;
border: 2px solid #f00;
}

Your images will display on the right side and there will be a 30px space between your image and your content. Your image will have a 2px solid red border.

img {
display:block;
}

Two things occur when displaying your images block
1. You will be able to center them with a margin 0 auto, and width declared
2. You will get rid of the 3 - 4px spacing below the image!

img {
max-width:100%;
}

Your image will fit inside your container, even if your image is larger in width than your container!

li {
font-style:italic;
}

Your list items will display italic.

p {
font-size:1em;
line-height:1.5;
}

The paragraphs' font size will be 1em (equals to 16px based on the font-size in the body of 100%). The spacing between the lines of your paragraphs will be one and a half times larger than the font size, resulting in legible text!!!

p.center {
text-align:center;
}

This paragraph has a class of center, and the paragraph will be centered!

a {
color:#000;
text-decoration:none;
font-weight:bold;
}

Your link's color will be black, your link will not be underlined, and it will display bold.

header {
height:200px;
background:orange;
}

Our new box is called a header. It's height will be 200px and background color will be orange.

footer {
height:50px;
line-height:50px;
background:yellow;
}

Another new container - the footer. The footer's height is 50px. When declaring the line height equal to the height it will vertically center your list inside the footer.