HTML and CSS Reference
In-Depth Information
Chapter 4
Cascading Style Sheets
In Chapters
2
and
3
, I showed you the some of the new HTML elements and how to use them in ASP.NET
applications. The second major area in the overall HTML5 umbrella includes the improvements in the style
sheets. As I explained in Chapter
1
, the CSS3 recommendations are broken down into more than 50 modules,
most of which are still in draft (as of this writing). However, there is quite a bit of new functionality that is already
available in most browsers.
In this chapter I will demonstrate many of the more useful features. I will start by explaining the basics of
creating styles sheets. If you have some experience with CSS this may seem like review but some of this is new
with CSS3, especially the selectors, which have been significantly improved with CSS3. You'll then create a
single web page using some of the new structural elements like
nav
,
aside
, and
footer
. With the page content
complete, I'll then explain some of the fun things you can do with CSS.
Reviewing Style Syntax
A style sheet is comprised of a set of rules. Each rule consists of a selector that indicates what elements the rule
applies to and one or more declarations. Each declaration contains a property-value pair. A rule is specified with
the following syntax:
<selector>{<property:value>; <property:value>;...}
For example, if you wanted all of the paragraph tags to use a green 12px font, the rule would look like this:
p {color:green; font-size:12px;}
As with HTML, white space is ignored in a style sheet so this rule could also be written as:
p
{
color:green;
font-size:12px;
}
I will use this format throughout the rest of this chapter as I think it's a little easier to read.
Using Selectors
There were a lot of different ways to select elements from the document and the CSS3 specifications nearly
double this list. I'll provide an overview of the selectors that are available. Many of these will be demonstrated
later in the chapter.
