HTML and CSS Reference
In-Depth Information
Type Selectors
A
type
selector
uses the name of an HTML tag without the angle brackets, and redefines the default look of the
tag. For this reason, type selectors are sometimes called
tag selectors
. For example,
h1
defines the style of
<h1>
tags. You can use type selectors for all HTML 4.01 and XHTML 1.0 elements without problem. However, you need
to exercise care when using type selectors for new HTML5 elements, as explained in the sidebar “Styling New
HTML5 Elements in Older Browsers.”
Styling new htMl5 eleMentS in Older BrOwSerS
HTMl5 is designed to be backward compatible, so most browsers allow you to apply Css to the new HTMl5
semantic elements, such as
<header>
,
<section>
, and
<nav>
, even if they don't recognize them. All that's
necessary is to add the following rule to your style sheet:
article, aside, figure, footer, header, nav, section {
display: block;
margin: 0;
padding: 0;
}
This style rule tells the browser to treat the new HTMl5 elements the same as a
<div>
. in other words, the
element occupies a line of its own with no extra vertical or horizontal spacing. Unfortunately, iE 6-8 leave
HTMl5 elements unstyled unless you convince the browser to recognize the new elements by adding the
following code just before the closing
</head>
tag in each page:
!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
This code is an internet Explorer conditional comment (
www.quirksmode.org/css/condcom.html
)
that tells
versions of internet Explorer earlier than iE 9 to load a tiny script created by Javascript genius, Remy sharp.
The script creates dummy HTMl5 elements in the browser's memory. The elements are never displayed, but
their existence is sufficient to coax iE 6-8 into styling other HTMl5 elements in your page. The link loads the
script from google's content distribution network. if you prefer, you can download the script, and store it on
your own web server.
The only disadvantage of this technique is that it relies on Javascript being enabled in the browser.
A detailed survey by Yahoo! in 2010 estimated that about 2 percent of users in the UsA have Javascript
javascript-disabled/
). The figure for most other countries was 1.3 percent. Although that's a small
proportion, on a busy site it can represent tens of thousands or even millions of users. Consequently, if your
target audience is still using iE 6-8, you should probably avoid using the new HTMl5 elements.
Class Selectors
A
class
selector
applies style rules to elements that have the equivalent
class
attribute in their opening HTML tag.
The selector is created by prefixing the class name by a period. For example, the
.warning
class selector applies to
all elements that have
class="warning"
in the opening tag. Multiple classes can be applied to the same element
by separating the class names by a space in the
class
attribute, for example,
class="warning important"
.
When choosing class names, try to pick a name that describes what the style is for rather than what it looks
like. For example, if you choose
boldRed
as a class name, it won't make any sense if you decide to use italic
