Chapter 2. Selectors and Structure

2.1. Basic Rules
<html>
<body>
<center>
<H2><FONT COLOR=”lime”>This is H2 text</FONT></H2>
</center>
</body>
<html>

2.1

2.3.1. Class Selectors
<html>
<body>
<P CLASS=”warning”><b>While handling plutonium, care must be taken to avoid
the formation of a critical mass.</b></P>
<P>During this step, <SPAN CLASS=”warning”><b>the possibility of implosion is
very real, and must be avoided at all costs</b></SPAN>. This can be accomplished
by keeping the various masses separate…</P>
</body>
</html>

2.3.1

2.3.2. ID Selectors
<html>
<body>
<P ID=”first-para”>This is the first paragraph, and will be boldfaced.</P>
<P>This is the second paragraph, which will NOT be bold.</P>
</body>
</html>

2.3.2

2.3.3. Class? ID? What’s the Difference?
<html>
<body>
<H1 ID=”mostImportant”>This is important!</H1>
<EM ID=”mostImportant”>This is important!</EM>
<LI ID=”mostImportant”>This is important!</LI>
</body>
</html>

2.3.3

2.4.2. Pseudo-Element Selectors
<html>
<body bgcolor=”brown”>
<font color=”gray”><P>This is a paragraph of text which has only one style applied to it. That
style causes the first line to be gray. No other text in the paragraph is
affected by this rule (at least, it shouldn’t be).</P></font>
This is a paragraph of text which has only
one style applied to it. That style causes
the first line to be gray. No other …
<P><P:first-letter>T</P:first-letter>his is a paragraph of text which has
another style sheet applied to it. This time it uses a first-letter effect.
</body>
</html>

2.4.2

2.5. Structure
<HTML>
<HEAD>
<BASE HREF=”http://www.meerkat.web/”&gt;
<TITLE>Meerkat Central</TITLE>
</HEAD>
<BODY>
<H1>Meerkat <EM>Central</EM></H1>
<P>
Welcome to Meerkat <EM>Central</EM>, the <STRONG>best meerkat web site
on <A HREF=”inet.html”>the <EM>entire</EM> Internet</A></STRONG>!</P>
<UL>
<LI>We offer:
<UL>
<LI><STRONG>Detailed information</STRONG> on how to adopt a meerkat</LI>
<LI>Tips for living with a meerkat</LI>
<LI><EM>Fun</EM> things to do with a meerkat, including:
<UL>
<LI>Playing fetch</LI>
<LI>Digging for food</LI>
<LI>Hide and seek</LI>
</UL>
</LI>
</UL>
<LI>…and so much more!</LI>
</UL>
<P>
Questions? <A HREF=”mail to:suricate@meerkat.web”>Contact us!</A>
</P>
</BODY>
</HTML>

2.5

2.6. Inheritance
<html>
<body bgcolor=”brown”>
<H1><font color=”gray”>Meerkat <EM>Central</EM></font></H1>
</body>
</html>

2.6

2.7. Specificity
<html>
<H1 CLASS=”grape”>Meerkat <EM>Central</EM></H1>
</body>
</html>

2.7

2.7.1. Inheritance and Specificity
<html>
<body bgcolor=”lime”>
<H1 ID=”id3″>Meerkat <EM STYLE=”color: black;”>Central</EM>!</H1>
</body>
</html>

2.7.1

2.7.2. Importance
<html>
<body bgcolor=”navy”>
<H1 STYLE=”color: yellows;”>Hi there!</H1>
</body>
</html>

2.7.2

2.8. The Cascade
<html>
<body bgcolor=”yellowss”>
<P STYLE=”color: black;”>Well, <EM>hello</EM> there!</P><br><br>
<P ID=”bright”>Well, <EM>hello</EM> there!</P><br><br>
<P ID=”hello” STYLE=”color: black;”>Hello there!</P><br><br>
</body>
</html>

2.8

2.9. Classification of Elements
<html>
<body bgcolor=”yellow”>
<P>This is the first paragraph in the document.</P>
<P STYLE=”display: none;”>This will not be displayed,
nor will it affect the layout of the document.</P>
<P>This is another paragraph in the document.</P><br><br>

<P STYLE=”display: none;”>This page was designed with CSS, and
looks best in a CSS-aware browser–which, unfortunately, yours is not.
However, the document should still be perfectly readable, since that’s
one of the advantages of using CSS.</P>
</body>
</html>

2.9