Creating and Maintaining a Website: Cascading Style Sheets
CSS is a rule-based language that applies styling to your HTML elements. You write a rule in CSS that selects various groups of elements and modify the properties of those elements. CSS can modify properties such as text color, background color, width, border thickness, font-size and more.
W3Schools has an excellent reference and lessons at
http://www.w3schools.com/css/
There is also a very nice one-page guide at
http://www.whoishostingthis.com/resources/css3/
CSS offers:
- Consistency:
elements defined in a stylesheet will look the same from page to page - Simplicity:
changes to an element in a page or site can be made from a central location and will propagate throughout the site - Flexibility:
cascading styles allow you to define exceptions to style rules when necessary, so you’re not stuck with a style that’s inappropriate for the purpose - Accessibility:
users of all abilities and levels can access pages formatted with CSS, whereas HTML formats can cause serious accessibility problems
CSS Syntax
A CSS rule looks like this:
selector {
property1: value;
property2: value;
property3:value;
}The selector identifies the HTML elements to which the rule will apply. It could name an element such as <body> or use a class or an ID. There are other more complex selectors as well.
The curly braces contain the declaration block.
The property/value pairs are separated by semi-colons.
Here’s a specific example
p {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
color: red;
border: 2px solid blue;
}
Unique Identifiers
Unique identifiers are page elements that occur once in an HTML document. Typically, these elements are marked up by a standard HTML tag, which is in turn modified by the ID attribute. An example might be a <div> tag, designated to contain unique information, such as a banner or footer. Such a series of elements might include:
<h1 id=”headline”>…</h1>
<p id=”introduction”>…</p>
<div id=”footer”>…</div>
ID names can include numbers, but must begin with letters. No unique identifier should repeat during the course of a single web document. (That’s why they’re unique!)
Classes
Classes are designators that permit the developer to apply style rules to multiple selectors throughout a document. For example, you might use a class definition to create blue, bold, italic text, and then apply that class to a <p>, a <div>, and a <h1>. Respectively, these might read:
<p class=”myclass”>. . . .</p>
<div class=”myclass”>. . .</div>
<h1 class=”myclass”>. . . </h1>
Pseudo-Classes
Pseudo-classes are rules that apply to certain selectors only in given situations or when a tag is in a certain state. The most common set of pseudo-classes pertains to the anchor (<a>) tag. The <a> tag takes four states:
:link (effective when the anchor is an unvisited link)
:visited (effective when the link in question has been visited)
:hover (effective when the mouse hovers over the link)
:active (effective when the link is active, as when the mouse is down)
When writing CSS rules for pseudo-classes with anchors, put them in the order shown in your stylesheet.
Pseudo-classes may be used in conjunction with unique identifiers, standard classes, or simple tags.