CSS is all about defining the "style" of a web page. It's a great tool and sometimes it's pretty easy to use; at other times, it's pretty complex.
A CSS statement has this structure:
selector {attribute:value;}
selector is the name of the tag or div or class you'll be styling.
attribute is the name of the feature you're styling (e.g. the background color or the font style or the size of the margins, etc.).
value is what you want that attribute to be (e.g. the number that represents the color you want or the name of the font style or the number of pixels you want the margin to be). In Dreamweaver (and other similar software), when you type the colon after the attribute, you will be offered a list of values (though sometimes this is only a subset of the possible options).
CSS statements can be found in 3 places:
SOURCE OF PROBLEMS: If you're not seeing the results you expect, it may be because there are CSS statements somewhere else that overwrite other statements. The statements are listed below in the order of precedence - i.e. if you have a style in 1, it will overwrite the style in 2 or 3
1. Inside of HTML tags:
You can write CSS statements inside of a tag by using a "style" attribute like this one that will apply to only this one paragraph:
<p style="background-color:#CC3399; color:#9999CC;">
2. In the <head> section of the HTML page
You can define styles in the head section and they will apply to the entire page (e.g., the example below will set the style for every <p> tag on the page):
<style type="text/css">
p {
background-color:#CC3399;
color:#9999CC;
}
</style>
Notice the opening/closing <style> tags which tell your browser "the next lines will be CSS statements rather than HTML code"
3. In a separate CSS page
The same statements are written in a separate file that has a name that ends in .css
The HTML page is linked to the CSS page with a <link> element in the <head> section of the HTML page, like this:
<link rel="stylesheet" type="text/css" href="myCSSpage.css" />
Close this page to return to the lab/project instructions.