HTML and CSS Reference
In-Depth Information
Given that
link
would be an empty element if we were using XHTML as our base
document, the
<link>
tag requires the trailing slash:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
The external style sheet would solely contain CSS rules, and no HTML markup would be
found. A small example here illustrates this:
/* mystyle.css - a sample style sheet */
h1 {color: red; text-align: center;}
p {line-height: 150%;}
To build a style sheet, we need to define the rules that select elements and apply various
style properties to them. Besides element selectors, previously introduced, the two most
common forms of CSS rules are
id
selectors, which are used to specify a rule to bind to a
particular unique element, and
class
selectors, which are used to specify a group of
elements.
Elements are named in (X)HTML using the
id
attribute, which is found on nearly any
element. As an example, here we identify a particular
<h1>
tag as the primary headline of
the document:
<h1 id="primaryHeadline">
CSS Works Fine!
</h1>
Now that the tag is named, we can bind a style rule just for it by using a
#
id-value
selector like so:
#primaryHeadline {color: black; font-size: xx-large; font-weight: bold;}
The values for
id
must be unique, so in order to affect a select group of tags, we relate
them by setting their
class
attribute to the same value:
<p class="fancy">
I'm fancy!
</p>
<p>
Poor me I am a plain paragraph.
</p>
<p>
I am not completely fancy, but
<span class="fancy">
part of me
is
</span>
!
</p>
Notice that we utilized a
<span>
tag around a portion of content we desired to style.
We'll see generic elements like
span
and
div
commonly employed with CSS. Now to bind a
rule to the elements in the class
fancy
, we use a selector of the form
.class-name
like so:
.fancy {background-color: orange; color: black; font-style: italic;}
There is nothing that keeps an element from being identified with both an
id
and a
class
attribute. Further, it is not required that a tag be found in only one class, as shown
here:
<p id="p1" class="fancy modernLook2">
This unique paragraph called p1
will sport a fancy and modern look.
</p>
