Sunday, October 10, 2010

CSS Syntax

The syntax of CSS is different from (X) HTML markup. Although it is not too confusing when you take a look. It consists of only 3 parts.
selector { property: value }

The selector is the element (X) HTML style you want. The property is the title of real property and the value is the style applied to this property.

Each selector can have several properties and each property within this selection can have independent values. The property and value are separated by a comma and keys. Several properties are separated by a semicolon. various property values are sperate coma, and if a single value containing more than one word in quotation marks to surround you. As shown below.

body {
  background: #eeeeee;
  font-family: "Trebuchet MS", Verdana, Arial, serif;

As you can see in the code above, I left the font color of the family with a semicolon, different fonts, separated by commas and containing "Trebuchet MS" in quotes. The end result sets the color of body light gray, and sets the font to ones that most users will have installed on there computer.

Combining Selectors
You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6 {
  color: #009900;
  font-family: Georgia, sans-serif;

As you can see in the above code, I have grouped all the header elements into one selector. Each one is separated by a comma. The final result of the above code sets all headers to green and to the specified font. If the user does not have the first font I declared it will go to another sans-serif font the user has installed on their computer.

Comment tags
Comments can be used to explain why adding a few options in the CSS file. In order to help others who may see a file or to help you remember what we think later. To add comments, do not consider the browser as follows.

/* This is a comment */

You will note that it begins with a / (forward slash) and than an * (asterisks) then the comment, then the closing tag which is just backward from the opening tag * (asterisks) then the / (forward slash).

No comments:

Post a Comment