CSS BASICS
Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of two parts, (1) Selector, and (2) Declaration
1. Selector : A selector is an HTML element you want to add style to. This could be any like <h1> <p> or <table> etc.
2. Declaration: The declaration is the statement of style for that element. It is made up of property and value.
Property: A property is the aspect of an element you want to change; for eg. color, border, font, etc. Put simply, all the HTML attributes
are converted into CSS properties.
Value: Value is the exact setting for the property. For example, color property can be set to value red or the font-size can be set to 30px,
and so on.
CSS Style Rule Syntax is as follows:
Selector {declaration;}
Or
Selector {property1:value;}
Example:
The style rule for <h1> element can be defined as follows:
h1{text-align:center;}
In this example, <h1> is a selector, text-align is a property and center is the value of the property.
Another Example:
body{background-color:green; Margin-left:2cm;}
When you add more properties to the style rule, the same are separated by semi-colon. (;). In the above example, background-color, and
Margin-left are separated by semicolon.
Property values
Property values are of three types, viz. specified, computed and actual
- Specified
It is the value specified in declaration. This type of value is sub-divided as absolute, and relative.
Absolute: value can be determined without reference to context (e.g., 2cm)
Relative: value depends on context (e.g., larger) - Computed
It is absolute representation of relative value (e.g., font-size:200%) - Actual
It is the value actually used by browser (e.g., computed value might be rounded)
CSS Length Unit Identifiers
| Identifier | Meaning |
| in | inches |
| cm | centimetres |
| mm | millimetres |
| pt | points: 1/72-inch |
| pc | picas: 12 points |
| px | pixels: typically 1/96-inch |
| em | 1em is roughly the height of a capital letter in the reference font |
| ex | 1ex is roughly the height of the lowercase character in the reference font. |
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */.
Comments can also span multiple lines.
Example of single line comment:
p { /*The paragraph elements will appear in red color.*/ color: red; }
Example of multi-line comment:
p { /*The paragraph elements in this web page
will appear in red color.*/
color: red; }