Cascading style sheet is used for creating responsive web pages. We can control the look of the web pages by defining its elements with attributes in one file. However CSS has included wide range of properties to support cross browser applications.

This article belongs to the style rules in CSS.  In this article i have mentioned the four components with brief description about the style rules, which is the basics of CSS.  CSS basically used for designing cross-browser web pages, which is compatible with many popular browsers.  So let’s start a brief tutorial and understand the basics of style rules in CSS by its four core components.

Basic Style Rules in CSS

a) Selector

Selector tells the browser where we want to apply the rule.  For example: if we want to change the background color of the web pages or paragraph color, then we have to implement the value for ‘body‘ and ‘p‘ selector in css respectively.

Sample Code

body { background-color:#000; }  /* defining selector with css property and value. */

p { color:#fab; }

Conclusion

Above code can control the web page by defining its body and paragraph color with two predefined selector. We can customize selectors according to our web requirements.

b) Declaration block

This block mainly called as a “declaration block” in css and very important style rule among other style rules in css, where we declare properties and their respective values.  This block starts with ‘{‘ (left curly brace)  and ended with ‘}’ (right curly brace).  Each declaration followed by a colon ‘:‘ and value.  We ended value with ‘;’ semicolon in this block. For example:

Sample code

a { font-weight:bold; }  /* Sample declaration block defines within curly braces "{ }" following by colon and semicolon. */


c) Property

We can declare property in the declaration block of the CSS, where property could be any valid CSS property.  There are many CSS properties in version 2 and 3.  From all of them we need to implement properties according to our requirement in web pages.  As some CSS properties are browser specific, so we need to add browser specific prefixes in front of the CSS property to work properly (See browser specific prefixes at the end of this article).  There are many valid CSS properties. Among of those properties we can see few of them such as:

properties {  border
font-family
color
text-decoration
height
width
background
font-weight
text-align
}

Note:  Property names are not case-sensitive, but we usually write property names in lowercase.

d) Value

We apply this value with the property(any CSS property).  Some properties have fixed values and for some other properties we need to specify values.  Also we must not forget to put semicolon in the middle of a block because if we fail to put semicolon then CSS might not work as defined by the developer/designer.

Sample code

p {
text-align:center;  /* Specifc value for specific css property */
font-weight:bold;
color:#000;
}

Note: Declaration block contains only one property/value pair, but we can define any number of properties in the same declaration block.

Popular browser specific prefixes for CSS3 properties:

-moz-        Mozilla firefox
-ms-          Internet explorer
-o-             Opera
-webkit-    Google Chrome, Safari

Uploaded by:  Author