Fundamentals of CSS

CASCADING STYLE SHEET (CSS)

Introduction

Style sheets are powerful mechanism for adding different types of styles to any web document or web page. It allows web designer to improve and change the appearance of the web page in very efficient manner. It makes standard and uniformity throughout a web site. It enables us to control rendering of styles such as fonts, color, typeface, size, spacing, margins, and other aspects of document style. It is a style sheet language which specifies how to incorporate style information in a style sheet. These sheets are said to be cascade when they combine to specify the appearance of a web page, which indicate that several style sheet can be blended to a document. To embed style to a document <style>…. </style> tags are used.

ADVANTAGES

·        Its main advantage is its ability to make global change to all documents from a single location.

·        The primary intention of CSS is to separate document presentation from document content written in markup language.

·        This mechanism allows the user to give a different look to the same document, without significant effort.

·        The same style sheet can also be used on different documents.

·        It reduces the development time significantly.

                       Content + Style = Document

  

ADDING CSS

There are four different ways to indicate style information in a document:

·        External Style Sheets- In this, style information is written in a separate file and is referenced from an HTML document. It is useful when same style is applied on different document.

For e.g.-

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

·        Embedded Style Sheets- In this, style information is placed under the style tag in the head part of the HTML page.

For e.g.-

<style>

    P {

         color: green;

        }

</style> 

·        Imported Style Sheets-. In this, style information is embedded using @import statement. Its working is same as linking. It allows importing a style sheet from another style sheet.

For e.g.-

<style>

      @import URL (“style.css”)

</style>

·        Inline style Sheets- In this, style information is directly incorporated into the HTML tags. This is the least flexible styling method.

For e.g.-

<p style=”color: red”> Hello World </p>

CASCADING RULE

·        Specificity rule- more specific rules get preference over less        specific rules.

             P b {color: blue}

             b {color: black}

The formal makes text under the tag <b>,which is descendant of tag p, blue. The latter makes text under the <b> tag black.

·        Order rule- For conflicting rule, latter rules get preference over the earlier rule    

The order is from highest importance to lowest importance.

Inline Style

Internal style

External style

Imported style

Browser default style

Style attributes

There are mainly 6 style attributes.

1.    Font attributes

·        Font size

·        Font style

·        Font family

·        Font weight

2.  Color attributes

3.  background attribute

·        background color

·        background image

·        background repeat

4.  Text attribute

·        text alignment

·        text index

·        text transformation

·        text decoration

5.  Border attribute

·        border style

·        border width

·        Border color

6.  Margin attribute

·        Margin width