Cascading Style Sheets Tutorial
Table of Contents
How to Insert a Style Sheet
Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
1. External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
2. Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
<!--
body {font-family: Arial, Helvetica, sans-serif;
color: black;}
-->
</style>
</head>
Note: Older browsers, unaware of the STYLE element, would normally show its contents as if they were
part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of
the STYLE element should be contained within the comment tags.
3. Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
Selectors
Selectors are the names that you give to your different styles. In the style definition you define how each selector should work (font, color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles. The general syntax for a selector is:
Selector {Property:Value;}
Multiple style declarations for a single selector may be separated by a semicolon:
Selector { Property1: Value1; Property2: Value2 }
1. HTML selectors
HTML selectors are used when you want to redefine the general look for an entire HTML tag. The general syntax for an HTML selector is:
HTMLSelector {Property:Value;}
For example,
<style type="text/css">
h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
</style>
2. Class selectors
Class selectors are used when you want to define a style that does not redefine an HTML tag entirely. The general syntax for a Class selector is:
.ClassSelector {Property:Value;}
For example,
<html>
<head>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>
<b class="headline">This is a bold tag carrying the headline class
</body>
</html>
3. ID selectors
ID selectors are used when you want to define a style relating to an object with a unique ID. The general syntax for an ID selector is:
#IDSelector {Property:Value;}
For example,
<html>
<head>
<style type="text/css">
#top { background-color: #900; color: #fff; padding: 1em }
</style>
</head>
<div id="top">
<body>
<h2>Indiana Universuty</h2>
<h2>University Information Technology System</h2>
</div>
</body>
</html>
This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
4. Contextual selectors
Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example,
P EM { background: yellow }
This rule says that emphasized text within a paragraph should have a yellow background;
emphasized text in a heading would be unaffected.
5. Anchor Pseudo-classes
Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active.
a:link {text-decoration: none; color:#990000;}
a:link {text-decoration: underline; color:#FF0000;}
a:visited {color:#666;}
6. Grouping
In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:
h1, h2, h3, h4, h5 {
color: #000000;
font-weight: bold;
}
Additional Resource
What is CSS? - A KB entry which includes links for more information about CSS
