1. CSS Tutorial
2. Using CSS in HTML
3. CSS Properties and CSS Rules
4. CSS Selectors
5. CSS Inheritance
6. CSS Precedence
7. CSS Box Model
8. CSS margin
9. CSS padding
10. CSS border
11. CSS Units
12. CSS Colors
13. CSS Text Styling
14. CSS List Styling
15. CSS Table Styling
16. CSS Link Styling
17. CSS Form Styling
18. CSS Image Styling
19. CSS Background Images
20. CSS Gradients
21. CSS Box Shadow
22. CSS display
23. CSS float
24. CSS position
25. CSS Media Queries
26. CSS Column Layout
27. CSS opacity
28. CSS Web Fonts
29. CSS 2D Transformations
30. CSS Transitions

• CSS Properties
• CSS Rules

You style HTML elements via CSS properties. Different HTML elements may have different CSS properties you can set. CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS properties together, and applies all properties to the HTML elements matched by the CSS rule. Both CSS properties and CSS rules will be covered in detail in this text.

CSS Properties

A CSS property styles an aspect of an HTML element. Here are a few examples:

<div style="border: 1px solid black;
            font-size: 18px; "> Style This </div>

In this example two CSS properties are applied to the div element: The border and the font-size properties.

A CSS property declaration consists of a property name and a property value. The property name comes first, then a colon, and then the value. Here is the general pattern a CSS property declaration follows:

property-name : property-value

If you specify more than one CSS property, the each name - value pair is separated by a semicolon, like this:

property1 : property-value1;
property2 : property-value2;

The last property declaration does not have to end with a semicolon, but it makes it easier to add more CSS properties without forgetting to put in that extra semicolon.

There are many CSS properties you can specify for different HTML elements. These CSS properties are covered in their own texts.

CSS Rules

A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more target HTML elements.

A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties specifies what to style of the targeted HTML elements.

Here is a CSS rule example:

  div {
      border    : 1px solid black;
      font-size : 18px;
  }

This example creates a CSS rule that targets all div elements, and the set the CSS properties border and font-size for the targeted elements.

The CSS selector part a CSS rule is the part before the first {. In the example above it is the div part of the CSS rule. The CSS properties are listed inside the { ... } block.

CSS rules have to be specified inside either a style element or inside an external CSS file.