a style sheet is a list of style rules assigned to html elements and classes. (classes are defined by the programmer.) the purpose of a style sheet is to separate style from content, resulting in cleaner, less-cluttered code.
it can be embedded or external. i tend to use an embedded style sheet only when i'm applying the styles to a single page. when applying the same set of styles to multiple pages, it makes more sense to use an external style sheet (which can be shared by the pages).
an html page using an embedded style sheet:
<html>
<head>
<title>page title goes here.</title>
<style type="text/css">
p {
font-color: #000000;
font-size: 12px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
page content goes here.
(this is what gets displayed on your html page.)
</body>
</html>
this style rule says that any text between <p> and </p> will be in black (i.e., #000000), size of 12 pixels, and against a light grey (i.e., #CCCCCC) background.<head>
<title>page title goes here.</title>
<style type="text/css">
p {
font-color: #000000;
font-size: 12px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
page content goes here.
(this is what gets displayed on your html page.)
</body>
</html>
an html page using an external style sheet:
<html>
<head>
<title>page title goes here.</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
page content goes here.
(this is what gets displayed on your html page.)
</body>
</html>
this indicates that this html document is linking to a style sheet named "styles.css".<head>
<title>page title goes here.</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
page content goes here.
(this is what gets displayed on your html page.)
</body>
</html>
the corresponding style sheet (in this example, styles.css), looks like this:
p {
font-color: #000000;
font-size: 12px;
background-color: #CCCCCC;
}
note that you do NOT need to surround the rules with the <style type="text/css"> and </style> tags. an external style sheet contains only the rules (elements/classes, with declarations that are bounded by { and }).font-color: #000000;
font-size: 12px;
background-color: #CCCCCC;
}
STYLES CAN ALSO BE APPLIED INLINE:
<font style="font-weight:bold;color:#FF0000;">this text should appear boldfaced and red.</font>
you may use several rules together. each one must end with ;.in this example, font-weight:bold; is one rule. color:#FF0000; is another.
comments:
/* default text */
note that the comment syntax for css is different from that of html.classes:
suppose that you'd like all the titles on your pages to appear bolded, underlined, blue, and in the font verdana. before css, you would have to add several tags to each title:
<b><u><font face="verdana" color="#0000FF">introduction</font></u></b>
using css, you can now create a class...
.title {
font-weight: bold;
text-decoration: underline;
font-color: #0000FF;
font-family: verdana;
}
(in a rule, the name of the class is always preceded by a period (e.g., .title). declarations always end with a semicolon (e.g., font-weight: bold;).)font-weight: bold;
text-decoration: underline;
font-color: #0000FF;
font-family: verdana;
}
...and then assign that class to the title.
<font class="title">introduction</font>
see how much cleaner that looks? not only that, but if you decide later on that you want the titles to be black instead and not underlined, you only need to make a change to the rule in the style sheet, and the changes will be reflected in all the titles on all the pages - you don't need to go through all the pages and change the titles one-by-one!
.title {
font-weight: bold;
text-decoration: none;
font-color: #000000;
font-family: verdana;
}
font-weight: bold;
text-decoration: none;
font-color: #000000;
font-family: verdana;
}
multiple elements/classes can be combined:
.title {
font-weight: bold;
font-color: #000000;
font-family: verdana;
}
/* and */
b {
font-weight: bold;
font-color: #000000;
font-family: verdana;
}
/* can be combined to form */
.title, b {
font-weight: bold;
font-color: #000000;
font-family: verdana;
}
this says that any text within a span class of title, or between <b> and </b>, will be black (i.e., #000000), bold, and in the font verdana.font-weight: bold;
font-color: #000000;
font-family: verdana;
}
/* and */
b {
font-weight: bold;
font-color: #000000;
font-family: verdana;
}
/* can be combined to form */
.title, b {
font-weight: bold;
font-color: #000000;
font-family: verdana;
}
→ next: more on CSS