CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration consist of a property, a colon (:), a value and then a semi-colon (;).
selector {
property: value;
property: value;
}
Selectors are used to declare which elements a style applies to. Each selector can have multiple properties and each property within that selector can have independent values. If an individual value contains more than one work you surround it with quotation marks.
body {
background: #000000;
font-family: “Times New Roman” Arial, Serif;
}
When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.
For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.
body {
font-family: Arial, Serif;
}
Now all text within the (X)HTML file will be set to Arial. If you want to style certain text with another font, like an h1 or a paragraph, then you will need to do the following:
h1 {font-family: “Times New Roman”, sans-serif;}
p {font-family: Tahoma, serif;}
Now all <h1> tags within the file will be set to Times New Roman and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Arial.
You can combine elements within one selector, for example,
h1, h2, h3, h4, h5, h6 {
color: #FF0000;
font-family: Georgia, sans-serif;
}
Each element is separated by a comma. The final result of the above code sets all headers to red and to the specific font. If the user does not have the first font declared, it will go to another sans-serif font installed on their browser.
Comments can be used to explain why you added certain selectors within your css file. This is to help others who may see your file, or to help you remember what you were thinking at a later date. You can add comments that will be ignored by browsers in the following manner.
/* This is a comment */
The Comment tag begins with a / (forward slash) and then an * (asterisks). The closing tag is just backward from the opening tag, * (asterisks) then the / (forward slash).
