CSS Syntax

selector { property: value }

CSS syntax is simply composed of three parts: a selector, a property and a value.

p { color: #221133 }

The selector is mainly an html tag or element you like to style like the selector “p” for paragraphs. The property is an attribute of the html element that contains a specific value. An html element has one or more properties and are enclosed in curly braces {}. When using two or more properties, separate each with a semicolon.

p { color: #221133; font-size: 12px;}

if value contains two or more words, place quotes around the value.

p { font-family: “Times New Roman” }

If you wish to apply similar properties for different selectors, you may do so by grouping the selectors and separate each with a comma.

p, h1, h2, h3, body { color: #221133; font-size: 12px;}

You may type in your CSS code in any way you want as long as the syntax is correct. White spaces don’t count. You can define all properties in single line or define a property on each line and put indentions for readability.

p, h1, h2, h3, body {
color: #221133;
font-size: 12px;
}

CSS Comments

You can place comments on your css code by enclosing them with /* */. Comments are very useful for explaining and describing your css code. It may serve as a guide to others viewing your code and also for you when viewing it on later dates.

/* For Home Page paragraphs and headers */
p, h1, h2, h3 {
color: #221133;
font-size: 12px;
}