CSS Syntax

CSS uses a number of keywords for the names of various properties providing a simple syntax. There are four main parts that must be included: selector, declaration, properties and values.

selector { property: value; }

Selector. The part of the rule that selects the parts of the document to which the styles should be applied. Declaration. A combination of a CSS property and a property value. Declarations always begins and ends with curly braces.

Consider the following line of CSS code:

p { color:blue }

In this case our selector is p (paragraph), declaration { color:blue }, property: color and value is blue.

Internal Style:

<style type="text/css">
p { color:blue }
</style>

Inline Style:

<p style="color: blue">

Via grouping, style can be applied to multiple elements. You must use comma to delimit selectors.

h1, h2, h3 { margin: 0; padding: 0; font-family:sans-serif; font-weight: normal; color: #F93D00; padding:20px; letter-spacing:3px; }

For better readable, you can put one declaration on each line:

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family:sans-serif;
	font-weight: normal;
	color: #F93D00;
	padding:20px;
	letter-spacing:3px;
}

You may also select an element based on that element being a child of a specific parent.

selector_parent selector_child { property: value; }

Let's say you want all links in tag p, should be red. Then CSS Code will be:

p a { color:red }

CSS Comments

Comments are used to make notes or explain lines or parts of code. It may help you when source code is edited. Comments in CSS are ignored by web browsers.

A comment in CSS begins with “/*” and the comment ends with “*/”. Look at example:

/* Comment */
h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family:sans-serif;
	font-weight: normal; /* Another comment */
	color: #F93D00;
	padding:20px;
	letter-spacing:3px;
}

Another example:

h1, h2, h3 {
	margin: 0;
	padding: 0;
	/* Now I don't need this
	font-family:sans-serif;
	font-weight: normal;
	color: #F93D00;
	padding:20px; */
	letter-spacing:3px;
}