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.