Using CSS (Cascading Style Sheets)
Updated on November 24, 2007
What is CSS
CSS (Cascading Style Sheets) formats the appearance of your web pages.
Using the Same CSS Code on Multiple Pages
To add style to multiple pages without having to write the code into every page, use an external style sheet. Create a file with just CSS data in it (i.e. my_style_sheet.css), then create a link to the style sheet page by inserting the following code on every page.
<link rel="stylesheet" type="text/css" href="styles/my_style_sheet.css" />
In the link tag, the rel tells the computer what you are linking to (a style sheet). The type tells the computer what kind of style sheet you are using (a text/css style sheet). The href tells the computer where that file is (in this example it's a files called my_style_sheet.css and it's in a directory called styles). You will need to change the href value based on where your web page is in relation to your style sheet.
Using CSS Code on One Page
If you want to add a style to just one web page, you can create an internal style sheet, code directly written into the web page using a style tag.
<style type="text/css">
Selector
{
property1: value1;
property2: value2;
}
</style>
Internal style sheets always override external style sheets.
Using CSS Code for Just One Item in a Web Page
If you want to add a style to just one item on a web page, you can specify the style directly in the tag with an inline style sheet, writing style="" within the tag and inserting the CSS code between the quotes. Notice that you do not need brackets when you define the style in the tag.
<p style="color: green; text-align: right">This text is right aligned and colored green.</p>
Inline styles always override internal style sheets and external style sheet.
Basic Syntax
CSS code has a selector (i.e. the item being modified; e.g. h1), property (i.e. the property being defined; e.g. color), and value (the description of the property being defined; e.g. blue).
Together, they are written as:
Selector {property: value;}h1 {color: blue;}
Assigning Multiple Properties to a Single Selector
You can list all of a selector's properties and their corresponding values within the brackets, separating them with a semicolon (;). For easier reading, place each property-value set on a separate line.
Selector
{
property1: value1;
property2: value2;
}
Assigning the Same Properties to Multiple Selectors
If you want several selector to all have the same properties and values, you can save space by listing them together, separated by a comma.
Selector1, Selector2, Selector3
{
property1: value1;
property2: value2;
}
Class
Let's say you only want some items to have a specific appearance (i.e. you only want some, not all, <p> tags to have a specific appearance). To tell the computer that we only want certain items to have a specific appearance, we create a class.
A class is written as:
.class1
{
property1: value1;
property2: value2;
}
DO NOT start the name of the class with a number. It won't work in some browsers.
A class without a selector can be used with any element tag.
.rct { text-align: center; color: red; }In our web page the html for any item that we wanted to be centered and colored red would look like:
<p class="rct">This text is centered and colored red.</p> <h1 class="rct">This text is centered and colored red.</p> <td class="rct">This text is centered and colored red.</p>
If you only want to have the class apply to a specific type of element (e.g. just <p> tags or just <td> tags), place a selector in front of the class. You can assign multiple classes to a single type of selector.
Selector1.class1
{
property1: value1;
property2: value2;
}
p.alpha
{
text-align: right;
color: blue;
}
p.beta
{
text-align: left;
color: green;
}
ID Selectors: Not to Be Confused with Class
You can have many tags on a web page that have the same class, but you can only have a tag with an ID once. The ID is a way to tell the computer, "This, and only this, single tag will have these properties."
This is useful when doing things like positioning and special headings or anything else that you don't want to accidentally have the same. For example, having two paragraphs with the same position means that one paragraph will be on top of the other one, and that will make it difficult to read, so using the ID will ensure that only one paragraph will be in position A and the other paragraph won't.
Instead of using a period we use a pound sign (#).
#id { property1: value1; property2: value2; }#cg { text-align: center color: green }In our web page the html would look like:
<p id="cg">This text is centered and green.</p>
Like the classes, you can specify that an ID may only be used for a specific type of element by putting a selector in front of the ID.
Selector1#id
{
property1: value1;
property2: value2;
}
p#cg
{
text-align: center
color: green
}
Inserting Comments in Your CSS Code
If you like to write notes in your code, such as "This is the code for the announcements box," you just need to write your comments between /* and */. These comments will not show up on your web page.
/* This is my comment. */
Related Items
Similar topics
See other Kristen's Guide topics in this category.