Styling Web pages with CSS

CSS stands for Cascading Stylesheets. CSS are a blessing to web programmers; it provides you the power to create a definite layout of your site and then be able to change the complete look altogether from a single place. Earlier you needed to go to each page of your website and then change each component look and style which saves lot of time and frustration.

Styling with CSS is easy, and one can understand the feel of the page by looking at the CSS structure. Presently CSS has become a standard and is a must for anybody working with web designs. CSS is also fun to learn and just requires basic knowledge of HTML.

Basic Syntax of CSS: E.g. if we want to have the background color of the body as Yellow, we’ll code it like this.

Body  {background-color:  #FFFF00; }

This is a simple and easy to understand code, #FFFF00 is the color code for yellow. Hence the syntax for CSS will be

Selector { property : value; }

How to implement CSS style in your page?
CSS can be used in your page by three ways

1. Inline styling – you can define the CSS style by using the HTML attribute ‘style’ like this

   This text is Red!
   

2. Internal Tag Style – you can include the style tag in the page tag like this

3. External CSS file linking – A good method to use CSS is to declare a CSS file link in the tag like this would make your stylesheet centralized.

   
   
    …
   

Among these three methods, External linking is preferred method by programmers as it centralizes the style to a single source which when edited would change the look of all the pages linked to that file.

Properties in CSS
CSS can take care of almost all the properties required to create the look and feel of your site. You can experience how CSS can change the entire page look so different by visiting this popular link – http://www.csszengarden.com/

• Colors & backgrounds: e.g. h1{ color : Red ; background-image: url (“mybg.gif”);}
• Fonts : e.g. h2{ font-family : arial, verdana, sans-serif ; font-size : 12pt;}}
• Text : e.g. body { text-align : right ; text-transform : uppercase ; }}
• Links : e.g. a:link{ color : red; } a:hover { color : yellow; }}
• Margin & paddings : e.g. p { margin-top : 15px ; padding-left : 15px ; }}
• Borders : e.g. ul { border-width : thin ; }}
• Width & Height : e.g. div.box { height : 120px ; width : 300px ; }}
• Positioning : e.g. #sty1{position : relative; left : 50px ; top : 10px;}}

Above listed categories are just selective and there are loads of others in these categories and apart which you can use in your webpages to make it effective and manageable.