- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Basics of Selectors
CSS selectors are the least understood part of the language, but a good understanding of selectors and their uses is a hallmark of a good professional developer. Here's your chance to really get to grips with the sophistication of CSS selectors.
Type Selectors
A CSS selector specifies which HTML elements a particular statement will style. The simplest kind of selector of the dozen or so is the HTML element, or type selector. These selectors use just the name of an HTML element (for example p, h3, or body), and select every element of that type. So p selects every paragraph, h3 selects every heading of level three, and body selects the body of the document (an HTML document can have only one body).
Grouping Selectors Together
We can group selectors so that the same declaration block of properties applies to all of elements selected by any of the selectors in the group. A selector group is simply the selectors separated by commas. For example, to select all heading levels at once, we can use the selector:
h1, h2, h3, h4, h5, h6
|
As we'll see later, we can group together selectors of different kinds. Selector groups produce more compact, readable, and maintainable style sheets. For example, if all headings in a document use the same font, we can simply use the selector group in the preceding example rather than having to repeat the font selection property six times (and then change it six times if the style changes).