- A style sheet is a series of statements. There are several types of
statement:
- @ Rules
- Rules
- Comments
- HTML Comment Tags
- For our purposes (in CSS1 and CSSP) the only valid @rule is the
@import rule.
@import "http://www.westciv.com/styles/style1";
- It is used to include other Cascade Style Sheet file.
- A comment has the form /* This is a style sheet comment*/
- A Rule is a statement that tells a browser how to draw a particular
element on a web page.
- A rule has two parts, a Selector and a Declaration.
- There are 7 distinct kinds of selector.
1.HTML Element Selectors
2.Class Selectors
3.ID Selectors
4.Contextual Selectors
5.Pseudo Class Selectors
6.Pseudo Element Selectors
7.Selector Groups
- HTML Element Selectors use the tag name of the element. e.g., H1 for
elements wrapped with <H1> tag in the web page.
- Class Selector:
The first of these selectors selects any element
on a page with a class of "question".
The second selects any element
on a page with a class of "answer".
.question {font-weight: bold}
.answer
{font-weight: 400}
- ID selectors apply to exactly one element.
- ID selectors that can apply to any type of element has the simple
syntax #idname, for example, #title. This selector selects the
single
element on a page that has an ID of title. e.g., <H1
ID="title">
- The contextual selector is simply a list of HTML element selectors,
each separated by a space. For example, the STRONG text inside a heading
selector would be created like this
H1 STRONG {text-decoration: underline}
- We could create selectors for lists inside question paragraphs, and
lists
inside answer paragraphs, to give a distinct appearance
to each type
of list. Our two selectors would be as follows:
P.question LI
(list items inside paragraphs of class
"question")
P.answer LI
(list items inside paragraphs of
class "answer")
- The pseudo class selector lets you select links
in a
number of different states. Links can be normal (the usual state
of an unvisited link), visited, active (while they are being
clicked) or
(only with Internet Explorer) in the hover state
(with the cursor over
them).
- The selectors for each of the pseudo classes have the following
forms
the selector for normal links is A:link
the
selector for visited links is A:visited
the selector for
active links is A:active
the selector for hover links is
A:hover (note that this is Internet
Explorer only, and not
part of the CSS1 specification).
- For example, See http://cs.uccs.edu/~cs301/css/pseudoInput.html
A.offsite:link {color: red}
A.offsite:hover {color: green}
- The first-line selector selects the first line of a particular type
of
element, for example (and most usually) a paragraph.
The first-letter selector selects (surprisingly enough) the
first letter
of an element, allowing you to create what is
often termed the drop
cap effect.
- For example, the selector which selects the first line of every
blockquote is:
BLOCKQUOTE:first-line
and that which selects the first-line of each paragraph is:
P:first-line
The first letter selector is almost identical, replacing letter
for line. The
first letter of a blockquote would be selected
by the following:
BLOCKQUOTE:first-letter
- A selector group is simply a comma separated list of selectors. The
selectors in the list can be class, pseudo class, ID, pseudo
element and
contextual selectors, as well as HTML element
selectors.
For example, a selector group that assigns the same font to
each type
of link (see pseudo class selectors above) is:
A:link, A:visited, A:active, A:hover {font: times
serif}