HTML and CSS Reference
In-Depth Information
Chapter 2
Using Basic Selectors
Choosing the right selector is the key to working successfully with CSS. The CSS3 specification defines more than
40 selectors, allowing you to target your styles accurately without the need for extra HTML markup. The latest
versions of all browsers support the full range of CSS3 selectors, plus some nonstandard ones. However, not
everyone uses the latest browsers, so—at least in the early stages of learning CSS— it makes sense to concentrate
on selectors that are supported even by older browsers.
In this chapter, you'll learn about the following:
•
How the browser uses the Document Object Model to apply styles
•
How to change the default look of HTML elements
•
Styling new HTML5 elements in older browsers
•
What the difference is between class and ID selectors
•
Choosing good names for classes
•
How to style links with pseudo-classes
•
How to apply styles to different sections of a page using descendant selectors
•
How to change the look of the cursor
•
How to style the first line or letter using pseudo-elements
•
Determining which styles take precedence in case of a conflict•
How Selectors Work
When a browser loads a web page, it reads the HTML tags to build a tree-like outline of the page's structure. This
is known as the
Document
Object Model
(DOM). Understanding the basic principles of the DOM is essential to
many aspects of web design and development. JavaScript manipulates the DOM to add dynamic widgets, such as
accordions and tabbed panels, or to load fresh data asynchronously. CSS also relies on the DOM to apply styles to
specific elements.
