CSS Rules

A CSS rule is a statement or series of statements that tells the web browser how to render a certain element or elements on the page. Each statement in a CSS rule starts with a selector, which is the element to which the rule will be applied. For example, in the following assignment, h1 is the selector that is being given a font size 240 percent larger than the default:

h1 { font-size:240%; }

All properties to be changed in rules must appear within the { and } symbols that follow the selector. The part before the colon (font-size, in this example) is the property to be changed, while the part after the colon is the value applied to it (240%, in this case). Providing a value of 240% to the font-size property of the h1 selector ensures that the contents of all <h1>...</h1> tags will be displayed at a font size that is 240 percent larger than the default size.

Lastly comes a ; (semicolon) to end the statement. In this instance, because font-size is the last property in the rule, the semicolon is not required (but it would be if another assignment were to follow).

Using Semicolons

In CSS, semicolons are used to separate multiple CSS statements on the same line. But if there is only one statement in a rule (or in an inline style setting within an HTML tag), you can omit the semicolon, as you can for the final statement in a group.

However, to avoid hard-to-find CSS errors, you may prefer to always use a semicolon after every CSS setting. You can then copy and paste them, and otherwise ...

Get Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.