CSS works with HTML or XML documents but it does not follow the XML syntax nor any programming language syntax.
1. Basic Syntax
CSS consists of style rules. The basic syntax of each rule is like this:
selector { property: value; property: value; }
Note that the use of “{ }“, “:“, and “;“. You can specify multiple styles for a selector; each of them are separated by a semi-colon (;).
Note: The common mistake is to confuse the equal sign “=” with the colon “:”.
2. Selectors
CSS selector are really powerful and complex. But there are 3 basic selectors:
- Element
- Class : with “.“
- ID : with “#“
body { background-color: gray; } /* element */
.title { font-weight:bold; } /* class */
#mainSection { margin: 10px; } /* id */
3. style Attribute
When you specify the style inside of an element directly, the “style” attribute is used. You do not need a selector, of course.
<header style="font-size:2em; font-weight:bold"> <p>Hello World</p> </header>
4. CSS Browser Extensions
It takes time that new CSS rules are standardized by WWW Consortium. Meanwhile, browsers start to support their own implementation of the rules in order to promote their own solutions.
These browser specific rules come with the unique prefix to the properties.
- -ms- : IE
- -moz- : Firefox
- -webkit- : Safari, Chrome
- -o- : Opera
These extensions will be removed once the rules are standardized.
figure {
background-color:gray;
ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
width:100%; /* Required for IE filter */
-moz-opacity: 0.6; /* Mozilla extension */
opacity: 0.6; /* the correct CSS3 */
-moz-border-radius: 10px; /* Mozilla extension */
-webkit-border-radius: 10px; /* Webkit extension */
border-radius: 10px; /* the correct CSS3 */
}
