HTML and CSS Reference
instead. You'll either be left with a class that no longer accurately describes it, or you will need to change every
instance of the class name in your HTML markup.
Class names must also adhere to the following rules:
No spaces are permitted.
- ) and underscore (
The only punctuation characters permitted are the hyphen (
The name cannot begin with a number or a hyphen followed by a number.
■ if you're using a language other than English, you can also use accented characters in class names, as long
as your pages are encoded as UTF-8. in fact, you can also use Chinese characters or other Asian scripts. When using
accented characters or other scripts in an external style sheet, put @charset "utf-8"; on the first line of the style
sheet to indicate that it uses UTF-8 encoding.
An ID selector applies styles to elements that have the equivalent id attribute in their opening HTML tag. Unlike
classes, which can be applied to multiple elements in the same page, IDs must be unique within a page. It's OK to
apply the same ID on different pages, as long as it's used only once on each page.
The selector is created by prefixing the ID with the hash or pound sign ( # ). For example, #sidebar applies to
the element that has id="sidebar" in its opening tag. The rules for naming IDs are the same as for class names.
A pseudo-class doesn't rely on a class attribute in the HTML markup, but is applied automatically by the browser
depending on the position of the element or its interactive state. The pseudo-classes listed in Table 2-1 apply
mainly to links and form elements.
Like a pseudo-class, a pseudo-element is not identified as such by HTML markup. It applies styles to content
based on its position in the HTML hierarchy. The most widely supported pseudo-elements are
:first-letter This applies a style to the first letter of the first line inside a block-level
element, such as a paragraph, as long as nothing else precedes it.
:first-line This applies a style to the first line of text in a block-level element. The
length expands and contracts dynamically if the text is rewrapped.
■ The Css3 selectors specification prefixes pseudo-elements with two colons instead of one.
so, :first-letter becomes ::first-letter and :first-line becomes ::first-line . The specification says brows-
ers must accept the single-colon prefix for :first-letter and :first-line , as well as for :before and :after ,
which are covered in Chapters 13 and 15 . iE 8 and earlier don't understand the double-colon prefix, so you need use
the single-colon versions to avoid styles breaking in older browsers.