elements you would use
the selector div: div { border: 1px solid #000; }.
To apply a background color to all elements with the class highlight you would use
the selector .highlight: .highlight { background-color: yellow; }.
Finally, to change the width of an element with an ID attribute value of myDiv, you
would use: #myDiv { width: 250px; }.
Of course, these selectors can be combined, so to select all
elements with the
class highlight, you would use div.highlight, or to select the
element
with the ID myDiv you would use div#myDiv.
In addition to these straightforward selectors, CSS also includes (and has done
since previous versions) a series of more complex selectors. For example you can
use the selector input[type="text"] to select only the input elements that contain an
attribute type with the value of text. Or you can use the pseudo-class :hover to
style an element when the mouse is over it, for example: a:hover { color:
red; }.
There are many more of these selectors, all of which are provided to make it easier
to select an element to style. With CSS3, even more new selectors have been
added to the mix, all of which make developers' lives easier and reduce the amount
of HTML and JavaScript they need to write.
Attribute selectors
E[foo^="bar"]
Select an element, E, whose foo attribute begins exactly with the string bar
E[foo$="bar"]
Select an element, E, whose foo attribute ends exactly with the string bar
E[foo*="bar"]
Select an element, E, whose foo attribute contains the string bar
Structural pseudo-classes
E:root
Select an element, E, the root of the document (the tag)
E:nth-child(n)
Select an element, E, the n-th child of its parent element
E:nth-last-child(n)
Select an element, E, the n-th last child of its parent element
Create modern Web sites using HTML5 and CSS3
© Copyright IBM Corporation 2010. All rights reserved.
Trademarks
Page 11 of 33
developerWorks®
ibm.com/developerWorks
E:nth-of-type(n)
Select an element, E, the n-th sibling of its type
E:nth-last-of-type(n)
Select an element, E, the n-th last sibling of its type
E:last-child
Select an element, E, whose is the last child of its parent element (Note that
E:first-child was previously defined in CSS2)
E:first-of-type
Select an element, E, the first sibling of its type
E:last-of-type
Select an element, E, the last sibling of its type
E:only-child
Select an element, E, the only child of its parent element
E:only-of-type
Select an element, E, the only sibling of its type
E:empty
Select an element, E, that has no children (including text nodes)
The target pseudo-class
E:target
Select an element, E, who is the target of the referring URI
UI element states pseudo-classes
E:enabled
Select a user interface element, E, which is enabled
E:disabled
Select a user interface element, E, which is disabled
E:checked
Select a user interface element, E (a radio button or checkbox), which is
checked or selected
Negation pseudo-class
E:not(s)
Select an element, E, which does not match the simple selector s
Create modern Web sites using HTML5 and CSS3
© Copyright IBM Corporation 2010. All rights reserved.
Trademarks
Page 12 of 33
ibm.com/developerWorks
developerWorks®
General sibling combinator
E~F
Select an element, F, which is preceded by an element, E
Browser support for the new attribute selectors and the general sibling combinator is
excellent, as they work on almost all modern Web browsers. Support for the new
pseudo-classes is included with the latest versions of most browsers, but you may
need to include fallbacks for older browsers such as Internet Explorer 6/7 and
Firefox 3.0.
New effects
Although the new selectors are probably the features that reduce developers'
headaches the most, the enhancements people most want to see are the shiny new
effects that are available. These are facilitated through a slew of new CSS
properties, including:
• background (now supports multiple backgrounds)
• background-clip
• background-origin
• background-size
• border-radius (rounded corners)
• border-image
• border-color (gradient borders)
• box-shadow (drop shadow on boxes without images)
• box-sizing
• opacity
• outline-offset
• resize
• text-overflow
• text-shadow
• word-wrap
The sample HTML5/CSS3 Web page you'll create at the end of this tutorial will show
some of these new effects in action.
Create modern Web sites using HTML5 and CSS3
© Copyright IBM Corporation 2010. All rights reserved.
Trademarks
Page 13 of 33
developerWorks®
ibm.com/developerWorks
Multicolumn layouts
CSS3 multicolumn layouts allow for text to be spread over a number of columns, like
you might find in a newspaper. This can be done in two ways, either using the
column-width property, where you define how wide each column should be (the
number of columns is determined by the space available to the container), or using
column-count, where you define the number of columns that should be used. The
width will then vary based on the space available to each column.
Other features of multicolumn layouts include the column-gap property, which allows
the developer to define the space that should be present between columns when the
column-width method is used. Another useful addition is the column-rule property,
which allows a border-style rule to be placed between columns. Finally there is the
column-space-distribution property, which determines how left over space should be
allocated between the columns.
Multicolumn layouts are currently supported by Mozilla and WebKit browsers. At
present, these are implemented by means of temporary proprietary properties
prefixed with -moz or -webkit, respectively. When the specification has been
finalized, these browsers will eventually move to the CSS standard properties.
Web fonts
Web fonts were actually proposed for CSS2 and have been available in Microsoft
Internet Explorer since version 5. Unfortunately, this required the use of the
proprietary .eot (Embedded Open Type) font format, and none of the other browser
vendors chose to implement it. As a result, Web fonts never really took off on
CSS2-based Web sites.
With the latest versions of Firefox, Safari, Chrome, and Opera, however, you can
now use the @font-face rule to use any licensed .ttf (TrueType) or .otf (OpenType)
font on your Web page. An example of the @font-face rule is as follows:
@font-face { font-family: Alexa; src: url('Alexa.otf'); }.
You can now use this font in your own CSS rules, such as: article p {
font-family: Alexa, Arial, Helvetica, sans-serif; }.
Remember that fonts are like images—if they are not your own you may need
permission to use them on the Web. Alternatively, you can pay for (or download for
free) some royalty-free fonts that can be included on your Web pages as you please.
Other new features
Create modern Web sites using HTML5 and CSS3
© Copyright IBM Corporation 2010. All rights reserved.
Trademarks
Page 14 of 33
ibm.com/developerWorks
developerWorks®
CSS3 also includes many other new features, including support for new color
values, notably HSL (Hue, Saturation, Lightness) and two color values with alpha
properties—RGBA (Red, Green, Blue, Alpha) and HSLA (Hue, Saturation,
Lightness, Alpha). Media queries will allow you to define different styles for different
devices based on their viewport size. For example, you can provide specific styles
for devices with a viewport of less than 500 pixels (such as a smartphone, PDA, or
other mobile device). CSS3's speech module allows you to control properties of the
speech of a screen reader, including voice volume, balance, rate, stress, and more.
Section 4. Putting it all together: The sample
HTML5/CSS3 page
At this stage, you must be anxious to get your hands dirty and start creating pages
that use the great new features that HTML5 and CSS3 have to offer. In this section,
you will create an HTML page that contains many of these new features. This
section of the tutorial will divide the development of the page into subsections as
follows:
• The basic HTML5 page structure
• Using the new semantic elements
• Introducing the