Working with style classes in CSS

Sometimes you need style rules that apply only to specific instances of an HTML markup element. For example, if you want a style rule that applies only to paragraphs that hold copyright information, you need a way to tell the browser that a rule has a limited scope. To target a style rule closely, combine the class attribute with a markup element. The following examples show HTML for two kinds of paragraphs: ✓ A regular paragraph (without a class attribute) <p>This is a regular paragraph.</p> ✓ A class attribute with the value...

read more

CSS selectors and declarations

You probably want a style rule to affect the display of more than one property for any given selector. You can create several style rules for a single selector, each with one declaration, like this: h1 {color: teal;} h1 {font-family: Arial;} h1 {font-size: 36px;} Font family When assigning values to the font-family property, you can use a list of comma-separated font names. These names must match fonts available to a user’s Web browser. If a font name includes spaces — such as Times New Roman — enclose it in quotation marks. h1...

read more

CSS Structure and Syntax

A style sheet is made of style rules. Each style rule has two parts: ✓ Selector: Specifies the markup element to which style rules apply ✓ Declaration: Specifies how content described by the markup looks You use a set of punctuation marks and special characters to define a style rule. The syntax for a style rule always follows this pattern: selector {declaration;} A semicolon always follows each declaration to make it easier for computers to distinguish them. A single selector can include one or more declarations, as we explain later in...

read more

What you can do with CSS

What you can do with CSS You have a healthy collection of properties to work with as you write your style rules. You can control just about every aspect of a page’s display — from borders to font sizes and everything in-between: ✓ Background properties control the background colors associated with blocks of text and with images. You can also use these properties to attach background colors to your page or to individual elements, such as horizontal rules. ✓ Border properties control borders associated with a page, lists, tables, images,...

read more

What CSS can do for a Web page

The gist of how style sheets work is as follows: 1. You define rules in a style sheet that specify how you want content that is described by a set of markup to appear. For example, you could specify that every first-level heading (<h1>) be displayed in purple Garamond 24-point type with a yellow background (not that you would, but you could). 2. You link style rules and markup. 3. The browser does the rest. With the current specification, CSS2.1, you can ✓ Specify font type, size, color, and effects. ✓ Set background colors and...

read more