Selectors
Selectors are used to associate style declarations with an element or
elements. This is done by placing the declarations within a block (enclosed
in {}) and preceding it with a selector. For example:
p {color: #008000}
div {color: #cccccc; font-size: 14pt}
Tag selectors
You can take any opening HTML tag and use it as a selector:
h3 {color: red}
Class selectors
These allow you to give elements a particular name. For example:
<P class="zn"> .... </P>
In a style sheet, The syntax as the below:
P.zn { color: blue }
Or like this:
.zn { color: blue }
Pseudo-class selectors
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 visited link could be defined to render in
a different color and even a different font size and style. The sample
style sheet might look like this:
A:link { color: red }
A:active { color: blue; font-size: 150% }
A:visited { color: green }
ID selectors
These selectors are very similar to classes except there can only be
one element with a given ID in a document. An ID selector is assigned
by using the indicator "#". For example:
#abc { text-style: bold }
To use an ID selector:
<P ID=abc>Welcome to my website</P>
Note: IDs like classes they should be in lowercase, may not start with
a number or contain spaces. This selector type should only be used sparingly
due to its inherent limitations.
Span
This element may be used as a selector in a style sheet, and it also
accepts the STYLE, CLASS, and ID attributes. Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD><TITLE></TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
.zn { font-size: 28pt }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=zn>These words could be big.</SPAN></p>
<p><SPAN STYLE="font-family: Arial;font-size:12"> And these
ones are different.</SPAN>.</P>
</BODY></HTML>
Div
DIV (short for "division") is a block-level element that, in function,
is similar to the SPAN. But DIV may contain paragraphs, headings, and
tables. For example:
<DIV CLASS=zn>
<H1>Welcome</H1>
<P>Hello World</P>
<P>Welcome to my website!</P>
</DIV>
|
