| There are three kinds of selectors you can use |
| Kind of Selector |
example definition |
example of application |
- 1. Redefine an HTML tag
- Any HTML tag can be given a style that will be applied to any content
within any occurance of that tag; also known as a "Type" Selector.
|
p {
font-size: 10px;
font-family: sans-serif;
} |
<p>This
paragraph will be styled</p> |
- 2. Class
- A Class selector is proceeded by a period, ".", in it's definition.
Any HTML tag may have a class applied to it.
Classes are applied to multiple items.
|
.copy12 {
font-size: 10px;
font-family: sans-serif;
color: #996699;
} |
<span class="copy12">
This
could be a whole lot of text being styled. ...
</span> |
- 3. ID
- An ID selector is proceeded by a hash, "#", in it's definition.
IDs are used for styling single items. Often used for positioning
|
#title {
position: absolute;
top: 20px;
left: 200px;
z-index: 2;
width: 80%;
} |
<div id="title">You are here</div> |
| There are three ways to apply CSS rules. The more specific
(or closest) rules override the more general. |
| Type of CSS |
Example |
- 1. Inline
- A "style" attribute may be added to any non-empty HTML tag.
This applies a CSS rule in only one place.
This is the most specific / closest definition.
|
<p style="font-size: 18px;">I
am styled</p> |
- 2. Embedded
- The rules are defined in the within the "head" tag of the document.
Styles apply only to this document.
|
<html>
<head>
...
<style type="text/css">
code { font-family: OCR A Extended, monospace; }
.copy12 { font-size: 12px; }
#title {
position: absolute;
top: 20px;
left: 200px;
z-index: 2;
width: 80%;
}
</style>
</head>
... |
- 3. Linked
- The rules are defined in an external text document. Styles may be applied
to multiple documents.
|
<html>
<head>
...
<link href="my.css" rel="stylesheet" type="text/css">
</head>
... |