Jump to content

Cascading Style Sheets/Defining Style Rules

From Wikibooks, open books for an open world

You associate formatting instructions with a web page by defining CSS rules (whether in separate files, embedded, or inline see Applying CSS to HTML and XHTML)

Syntax

[edit | edit source]

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. w3.org has a list of all of the CSS Properties.

Basic Uses

[edit | edit source]

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.