What Is a CSS Rule (Or Style)?

By: Dusty Arlia
Published on August 16, 2012
Last Updated on Saturday, July 18, 2015 at 2:31 PM
Total Updates: 5

A CSS rule, sometimes called a CSS style, is a rule that tells a web browser how to display a particular element on a webpage. For example, you can change the color of your font, the font-size, or even change the font-family (Times New Roman, Arial, Verdana, etc.). You can also do things like add borders or change the position of elements using CSS. The way browsers render the element may be slightly different from browser-to-browser.

A single CSS rule (or style) has two main parts:

  1. The Selector (the webpage element or elements that get formatted by the browser)
  2. The Declaration Block (the formatting instructions)

The W3C calls CSS styles "rules". The terms "CSS styles" and "CSS rules" can be used interchangeably, though "CSS rules" seems to be more commonly used (most people follow W3C conventions).

Here's an example of a CSS rule:

div {width: 400px; height: 200px;}

The selector in this example is div. This refers to all divs on any webpage that gets this CSS rule. The code between the two braces ({…}) and including the two braces themselves is called the "declaration block". This code is the formatting instructions you want to apply the selector.

The declaration block is made up of one or more declarations. A declaration is a CSS property (like font-size, margin, or background-color) followed by a colon and then a property value (like 16px, 1in, or orange). Here is an example of a CSS Rule:

css rule

Which can also be written like:

h1 {
	color: green;
	font-family: times new roman;
}

You can write your CSS style on one line to save space or across multiple lines to make it easier to read. When using multiple lines it's recommended that you indent the individual declarations to visibly separate the selector (making it easier to read).

You should also add a space after the colon to separate the property and the value (again making it easier to read. All this whitespace is optional but makes your code easier to read.

Comments:

Ad:

Ad: