A CSS syntax differs from an (X)HTML markup. It is easy to remember because it is only comprised of three basic parts:

selector { property: value }

The selector refers to the element intended for styling. The property is the actual title of the property while the value signifies the specific style to be applied on the property.

With CSS, every selector could be assigned more than one properties, with each property within a selector representing different values.

A colon separates the property and the value that are placed inside curly brackets while a semi-colon is used to divide multiple properties.

Commas are used to divide multiple values inside a property while quotation marks serve to enclose an single value that is composed of more than one word. See the following example:
body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

As shown above, the color was separated by a semi-colon from the font-family while the fonts were divided by commas. The font Trebuchet MS was enclosed in quotation marks because it is a phrase. The code will format the body color into grey and the fonts will be set up according to which one is installed on most users’ computers.

You could change the layout of your code by mounting it all in one line if you prefer. However, I chose the layout above (2 lines, space 2 indentation) to present my codes for easier readability.

Inheritance
Nesting an element within another causes the nested element to acquire or “inherit” the properties of the containing element. However, inner elements could be styled to take on values independent from the containing element.

Example:
A font declared within the body will be inherited by all text in the whole file. The containing element will be ignored unless you declare another font attribute for a targeted nested element.
body {font-family: Verdana, serif;}

Taking the example code above, all text within the (X)HTML file will be configured to Verdana.
If you wish to use another font on a specific text such as an h1 or a paragraph, try the following code:
h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

As a result, all <h1> tags in the document will be set to Georgia while Tahoma will be the prevalent font on all <p> tags. Text placed within other elements will still comply with the body declaration of Verdana.

Sometimes, nested elements may not inherit the properties of their containing elements. For instance, if the body margin is affixed to 20pixels, the file’s other elements will not automatically take after the margin.
Body {margin: 20px;}
Piling Up Selectors
It is possible to merge elements in one selector as such:
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

As shown in the example, I put together all header elements under one selector, with each one being separated by a comma. As a result, all headers above will be set to green and to the font I specified. If the first font I named is not read by a user’s browser, it will switch to another Sans Serf family that was installed by the user on his computer.

Tags: CSS Syntax