CSS Syntax

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.

You don't need to remember this in order to code CSS. Once you start coding CSS, you'll do so without thinking "this is a selector" or "that is a property". This should begin to make sense once you study the examples on this page.

Syntax:

Copy to Clipboard
selector { property: value }

The selector is often the HTML element that you want to style. For example:

Copy to Clipboard
h1 { color: blue }

This code tells the browser to render all occurences of the HTML <h1> element in blue.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

Copy to Clipboard
h1,h2,h3,h4,h5,h6 { color: blue }

Applying Multiple Properties

To apply more than one property separate each declaration with a semi-colon.

Copy to Clipboard
h1 { color:blue; font-family:arial,helvetica,"sans serif" }

Readability

You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.

Copy to Clipboard
h1 {
	color:blue;
	font-family:arial,helvetica,"sans serif";
	font-size:150%;
}

OK, so you've now learned about the CSS syntax. But how do you incorporate this syntax into your website? The next lesson will show you how to incorporate CSS into your HTML documents.

Enjoy this page?

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad