CSS

adplus-dvertising
Types of Cascading Style Sheet
Previous Home Next

Cascading Style Sheet will give you much more control over the text on the page. cascading style sheet is the new feature that save lots of time of designer to style the page. Designer can give the size of font in numbers or in pixels and control the spacing. These are three types of style sheets which helps you to style your web page.

  1. Inline style
  2. Embedded style sheet
  3. Linked style sheet

INLINE STYLE

Inline style may be applied to any html element and modified only the specific instances of the element to which you applied it. to use inline you add a style attribute to specific instance of element. using the following syntax.

<ELEMENTSTYLEproperty:value;property:value;...></element>
<html>
<head>
<title>stylesamples</title>
</head>
<h1style="color:red;font_size:25px;font-name:TimesRoman;"
>ThisisCSSdocument</h1>
</html>

Inline style are used rarely because they are as much work as using the font tag.

EMBEDDED STYLE SHEET

To use embedded style sheet style block is defined which should be placed in the head section of the document.This block consists of set of style rules where each rule is defines the style of html element or group of element.

<html>
<head>
<title>Embedded style sheet example</title>
<style type="txt/css">
</style>
</head>
</html>

The required attribute of style element is type and it should be set to "txt/css" there are two main parts of embedded style sheet

  1. selector any html tab/element is the selector ,for every selector the property will be set.
  2. e.g..

    <p>,<h>,<b>.
  3. property must have a value
  4. (declaration may be one or two)

    h1 {color :red;} body {color: black;}

    here body and h are the two selectors ,color is the property of two selectors ,red and black are the values property color. declarations are written within the curly braces({}) ,property should followed by colon(:) and value should followed by semi colon(;).

    <html>
    <head>
    <style type="text/css">
    body
    {
    background-color: yellow;
    }
    h1
    {
    font-size:36pt;color:green;
    }
    h2
    {
    color:blue;font-size:20pt;
    }
    p
    {
    margin-left:50px;
    }
    </style>
    </head>
    <body>
    <h1>This header is 36 pt</h1>
    <h2>This header is blue</h2>
    <p>This paragraph has a left margin of 50 pixels</p>
    </body>
    </html>
    

    LINKED STYLE SHEET

    Linked style sheet is the easiest method of styling multiple html document. it is also called external style sheet. it is separate file which contains all the styling information. to link style sheet to the html document you use link element in the head of your document. to create linked style sheet you can use note pad and save the file with .css extension. now give link to css file in html document.

    the html file

    <html>
    <head>
    <link rel="style sheet" type="text/css" href="linked.css" />
    </head>
    <body>
    <h1>This header is 36 pt</h1> <h2>This header is blue</h2>
    <p>This paragraph has a left margin of 50 pixels</p> </body>
    </html>
    

    save the above file with .html extension in the same directory where css file is saved.

    The css file (style sheet file)

    body
    {
    background-color: grey;
    }
    h1
    {
    font-size:36pt;
    }
    h2
    {
    color:blue;font-size:20pt
    }
    p
    {
    margin-left:50px;
    }
    

    save the above file with .css extension in the same directory where html file is saved.

    when html file open on browser the document will be styled in the way which was defined inside the style sheet file that is css file. other than above three types of style sheets two more selectors will discuss in next chapter .those selectors are called user defined selectos will be discussed in next chapter.

    Previous Home Next