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 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
<p id="p1" class="fancy modernLook2"> This unique paragraph called p1
will sport a fancy and modern look. </p>
Search WWH ::

Custom Search