[CSS] Syntax

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 */
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s