The concept behind CSS was simple, yet revolutionary: remove the presentation and separate design from content. Let HTML (and later XHTML) deal with structure, and use a separate CSS document for the application of visual presentation.
The rules of CSS
Style sheets consist of a number of rules that define how various web page elements should be displayed. Although sometimes bewildering to newcomers, CSS rules are simple to break down. Each rule consists of a selector and a declaration. The selector begins a CSS rule and specifies which part of the HTML document the rule will be applied to. The declaration consists of a number of property/value pairs that set specific properties and determine how the relevant element will look. In the following example, p is the selectorand everything thereafter is the declaration:
p {
color: blue;
}
As you probably know, p is the HTML tag for a paragraph. Therefore, if we attach this rule to a web page the declaration will be applied to any HTML marked up as a paragraph, thereby setting the color of said paragraphs to blue.
When you write CSS rules, you place the declaration within curly brackets {}. Properties and values are separated by a colon (:), and property/value pairs are terminated by a semicolon (;). Technically, you don’t have to include the final semicolon in a CSS rule, but most designers consider it good practice to do so. This makes sense—you may add property/value pairs to a rule at a later date, and if the semicolon is already there, you don’t have to remember to add it.
If we want to amend our paragraph declaration and define paragraphs as bold, we can do so like this:
p {
color: blue;
font-weight:bold;
}
Types of CSS selectors
In the previous example, the most basic style of selector was used: an element selector. This defines the visual appearance of the relevant HTML tag. In the sections that follow, we’ll examine some other regularly used (and well-supported) CSS selectors: class, ID, grouped, and contextual.Class selectors
In some cases, you may wish to modify an element or a group of elements. For instance, you may wish for your general website text to be blue, as in the examples so far, but some portions of it to be red. The simplest way of doing this is by using a class selector.In CSS, a class selector’s name is prefixed by a period (.), like this:
.warningText {
color: red;
}
This style is applied to HTML elements in any web page the style sheet is attached to using
the class attribute, as follows:
<h2 class="warningText">This heading is red.</h2>
<p class="warningText">This text is red.</p>
<p>This is a paragraph, <span class="warningText">and this text is a red</span> </p>
If you want a make a class specific to a certain element, place the relevant HTML tag
before the period in the CSS rule:
p.warningText {
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text would remain red, but not the heading or span, due to the warningText class now being exclusively tied to the paragraph selector only. Usefully, it’s possible to style an element by using multiple class values. This is done by
listing multiple values in the class attribute, separated by spaces:
<p class="warningText hugeText">
The previous example’s content would be styled as per the rules .warningText and .hugeText.
ID selectors
ID selectors can be used only once on each web page. In HTML, you apply a unique identifierto an HTML element with the id attribute:
<p id="footer">© 200X The Company. All rights reserved.</p>
To style this element in CSS, precede the ID name with a hash mark (#):
p#footer {
padding: 20px;
}
In this case, the footer div would have 20 pixels of padding on all sides. Essentially, then, classes can be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page elements, such as structural divisions, whereas classes are used to define the style for multiple items.
Grouped selectors
Should you wish to set a property value for a number of different selectors, you can usegrouped selectors, which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website’s headings have been set to be green. Note that
you’re not restricted to a single rule for each element—you can use grouped selectors for
common definitions and separate ones for specific property values, as follows:
h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors define property values for HTML elements depending on context.Take, for instance, the following example:
<p>I am a paragraph.</p>
<p>So am I.</p>
<div id="navigation">
<p>I am a paragraph within the navigation div.</p>
<p>Another paragraph within the navigation div.</p>
</div>
You can style the page’s paragraphs as a whole and then define some specific values for
those within the navigation div by using a standard element selector for the former and a
contextual selector for the latter:
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}