Introduction to CSS
Cascading Style Sheets is the way that we add style to Web documents. They allow you to control the color, font, placement, spacing, position, margin, padding, border, etc of almost any HTML element. The advantage to using a style sheet is that you can change the presentation of all your web pages by modifying one CSS file.
There are 3 ways to include stylesheets on your page:
1. You can create a link to an external file in the head of your document. This is very useful if you would like to make sitewide updates by changing one file.
2. You can include the stylesheet information in the head of the document. This is good for development and will only effect the page that you are working on.
<!--
p {color: #003366}
-->
</style>
3. You can type the styles inline, which let you change the style one single element on a page. However, this approach should be avoided since it bloats your HTML.
Assigning Styles
You can assign styles to HTML elements, DIVs and Classes.
To assign a style to an HTML element:
color: #990000;
}
To assign a style to an element that contains an ID attribute (notice the number sign):
background-color: #cccccc;
}
To assign a style to an element that contains an CLASS attribute (notice the period):
border: 1px solid #990000;
color: #990000;
padding: 10px;
}
CSS Box Model
The CSS Box Model determines how block elements are interpretted in CSS. Some of the styles below are based on this model.
Commonly used CSS Styles
background-color - the background color of the element.
background-image - specifies an image to use for the background of an element.
background-repeat - specifies how and if a background image is repeated (repeat, repeat-x, repeat-y, no-repeat).
border - specifies the border around an element. (format is: pixel width, style, color)
OR
border-bottom: 1px solid #000000;
clear - prevents text from flowing around an element (right, left, both, none)
cursor - changes cursor type (auto, crosshair, default, pointer, move, text, wait, help)
display - specifies how the element is displayed (none, block, inline)
float - Places the element to the left or right and flows text around it (right, left, none)
font-family - the name of the fonts you would like to display.
color - the color of the text (uses #003366 format).
font-size - the size of the font (units are em or px).
font-weight - the weight of the font (bold or normal).
line-height - the line spacing of the text.
letter-spacing - the amount of space between the letters.
text-decoration - (none, underline, over-line)
text-align - the alignment of text (left, right, center, justify).
list-style-type - sets the type of symbol that appears in front of a list item (disc, circle, square, decimal, etc)
list-style - how the list is displayed (block, inline)
margin - specifies the margin around an element.
OR
margin: 10px 5px 10px 5px; (reads as Top Right Bottom Left)
OR
margin-top: 10px;
padding - specifies the padding around an element.
OR
padding: 10px 5px 10px 5px; (reads as Top Right Bottom Left)
OR
padding-top: 10px;
height - specifies the height of the element
width - specifies the width of the element
position - specifies the layout properties of an element (static, relative, absolute)
top: 10px;
right: 10px;
z-index - specifies layer order of element (an element with a high z-index appears on top of an element with a low z-index)
:link - stylizes links (default state)
color: #036;
text-decoration: underline;
}
:link - stylizes links (hover state)
color: #39f;
text-decoration: none;
}