CSS Rule Structure

To understand how CSS styles your HTML, you need to know the structure of a CSS rule. A CSS rule is made up of three main parts: the selector, the property, and the value. Looking at the example above, you see h1 { color: blue; } in the style.css file. Here, the selector is h1. This tells the browser which HTML elements should be styled—in this case, all <h1> elements. Inside the curly braces { }, you find one or more property-value pairs. The property is color, which defines what aspect of the element you want to change. The value is blue, which sets the color property to blue. Together, the property and value (color: blue;) describe exactly how the selected element should appear. When the browser loads the HTML and CSS, it matches the selector to the elements in the HTML and applies the specified property and value to those elements. This is the basic way CSS rules interact with HTML to control the look of your web pages.