Creating a Basic Style Sheet Tutorial
You can also group several selectors together if you will like them to look the same or have the same CSS properties (More about CSS properties on the CSS Properties Tutorial page). Below is an example of grouping selectors:
It is also helpful to add comments to your style sheet so it will be easier for you to know what is what. Comments always start with a /* and end with a */. Below is an example of a comment:
Below is another example of a comment used in a style sheet.
body { }
p { }
/*----Main Content----*/
.box { }
#content { }
/*----Footer Content----*/
#footer { }
To link your style sheet to your HTML document you need to place the following code at the top of your page before <HTML>:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
You would then add this code between the <HEAD> tags:
The top of the HTML file will look something like this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" /></head>
To learn how to style CSS selectors go to the CSS Properties Tutorial page.