Cascading Style Sheets/Defining Style Rules

From Wikibooks, open books for an open world
Jump to: navigation, search

You can associate formatting instructions with a web page by defining CSS rules in either an embedded, linked, or inline stylesheet. Although there are many ways of defining styles, the main difference between them is where they are located. Linked stylesheets are preferred for live websites. Embedded and inline stylesheets are useful for prototyping but do not have the maintenance savings associated with linked stylesheets.


A stylesheet consists of one or more rules.

Each rule has two parts: a selector and a group of one or more declarations surrounded by braces (curly brackets):

selector { declaration; declaration2; ...}

Each declaration is formed like this:

property: value

Remember that there can be several declarations in one rule. A common mistake is to mix up colons, which separate the property and value of a declaration, and semicolons, which separate declarations. A selector chooses the elements for which the rule applies and the declaration sets the value for the different properties of the elements that are chosen.

The property is one of many properties. has a list of all of the CSS Properties.

Basic Uses[edit]

Here is an example of how you would make all span elements appear bold:

span {
	font-weight: bold;

The font-weight: bold; declaration has the property font-weight and the value bold which makes the font bold.

That would appear like this:

Bold Text

A slightly more complex example is

span {
	font-weight: bold;
	color: yellow;
	background-color: black;

That would appear like this:

Yellow Bold Text

You can use many other properties, and values, but this is just a beginning as to how to use CSS.