- 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
Basic CSS Syntax
Of course, we need to have something to put into our external (or embedded) style sheet. This is CSS, a simple language, which uses just text. We'll start with the core of the CSS syntax, then dive into the major features of the language.
Selectors, Declaration Blocks, Declarations, and Properties
A style sheet, like an HTML file, is quite simple: in essence, it's just one or more statements, which are also referred to as rules.
Each statement has two parts, a selector and a declaration block. The selector specifies what elements in an HTML document the statement will style. The declaration block specifies the style that will be applied to the elements the statement selects.
The declaration block contains one or more declarations. A declaration is made up of a property name and a value. Here's an example statement:
p {
color: red;
font-weight: bold;
}
|
Try breaking this down in your own mind into selector, declaration block, declarations, and properties before we continue.
In the preceding example, our selector is p. This is one of many different types of selector we'll cover in this chapter, and throughout the book. It matches every element with the name p—that is, every paragraph element in the page's markup.
The declaration block is everything contained within the curly braces. It contains two declarations: one with a color property, and one with a font-weight property. Notice that the two declarations are separated by a semicolon (;). The semicolon after the second declaration is optional, as it is after the last declaration of any declaration block.
And that's all the syntax you need to learn to use CSS. You will need to understand the various types of selectors, their structures, and what types of elements they match in a document. In this chapter we'll cover all the major selector types in CSS1 and CSS2, and in Chapter 12, we'll look at CSS3. The other thing you'll want to learn are the various properties for styling these elements. There are several dozen, though only about two dozen are in common use. We'll cover all the most commonly used CSS1 and CSS2 properties in this chapter, and in Chapter 13, we'll look at CSS3 properties.
One note about the structure of this chapter: rather than simply cataloguing all the selector types and then all the properties of CSS, I'll begin with some of the simplest selectors and properties and then build up to progressively more sophisticated versions.