Anatomy of CSS Code

Let's dissect the CSS code for blue paragraph text to understand how everything works:

The whole structure is called a ruleset. Note the names of the individual parts:

Selector

This is the HTML element name at the start of the ruleset. It defines the elements to be styled (in this example, <p> element). To style a different element, change the selector.

Declaration

This is a single rule like color: blue; It specifies which of the element's properties you want to style.

Properties

These are ways in which you can style an HTML element. (In this example, color is a property of the <p> element.) In CSS, you choose which properties you want to affect in the rule.

Property value

To the right of the property, after the colon, there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to blue.)

Note the other important parts of the syntax:

• Apart from the selector, each ruleset must be wrapped in curly braces. ({})
• Within each declaration, you must use a colon (:) to separate the property from its value or values.
• Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one

To modify multiple property values in one ruleset, write them separated by semicolons, refer the example below:

p {
  color: blue;
  width: 200px;
  border: 1px solid black;
}