Introduction to css <>

Introduction to css

Style sheet basics


---------------------------
A style sheet associates look or formatting to a particular

piece of content in document . in the case of css style sheet

relay

on an underline markup structure such as xhtml .
they are not a replacement of markup.


Without a binding to an element , a style really does not

mean anything the purpose of a style sheet is to create a

presentation for a particular element or a set of elements.
Binding an element to a style specification is a very simple
it consist of a selector in this case simply the element name

followed by its associated style information (called rules)
with in curly braces . the rules are composed of properties

name and prooperty value separated by coulmns with each

rule in turn being seprated by semicolon . The basic syntax

is as follows.

selector {property1: value1; property2: value;.......}
for example

<.style type="text/css">
h1{font-size:21pt;color:red;}
<./style>
on some of the browsers this may also work

Most of the times style tag is given outof html or in the head

tag but in internet explorer it can be written any where it

works forward only.

Note: Final rule in a list of style properties doesnt require

semicolon.

The syntax should be followed by the programmer is

h1
{
font-size: 21pt ;
color : red ;
font-family : Impact ;
}





Different Types of Styles
-----------------------------------
1) External Style sheet
-----------------------------



Syntax
---------
<.link rel="stylesheet" type="text/css" href="main.css" />

Note:
a) Type property is optional in most of the browsers.
b)href property is the name of the stylesheet file which is

already constructed.


Example of style sheet file

File Name : main.css.
File Extension : should be css.
code:
font
{
font-size:23pt;
font-face:Verdana;
}
h1
{
font-size:34pt;
font-face:Times;
}
First of all in a note padtype the above code and save the

file with css extension example main.css

After That
---------------
In html file where u want to use this style sheet just mention

the link with the link tag in head tag as follows

File Name:Sample.html
extension:html
<.html>
<.head>
<.link rel="stylesheet" type="text/css" href="main.css"/>
<./head>
<.body>
<.font>
Testing the font
<./font>
<.h1>
Testing the header
<./h1>


Purpose
-------------
Can set style for many documents with one style sheet

style information cached by the browser.

Concern
-------------

Require extradownload time for the style sheet ,
which might delay the page rendering or in case of import
cause a rendering flash.


2) Document Wide Style
-------------------------------------
<.style type="text/css">
body{
color:red;
font-size:21pt
}
<./style>



This syntax can be used with in the html outof the html tag or

in the head tag

in the above example body tag is having setting color is red
and font size is 21 point what ever u are mentioning in the

tag is considered as the part of the body .

Purpose
--------------
Can easily control the style document by document
No extra file is require

Concern
---------------
Need to reapply style information for other documents


3)Inline Styles
------------------------




Example
<.p style="color:red">Test

Purpose
-----------
1) Can easily control style to a single character
instance.
2)Overrides any external or document styles.

Concern
--------------
1)Need to reapply style information
throughtout the document and outside the
document

2)Bound to closely to the markup difficult to update