CSS Tutorials 1

CSS Tutorials 1
********************************************************1
CSS --> Language used for web page layout and format.

It allow to apply special properties to any elements or tags in the html page.

-----------------------------------Method-1

Simplest way to apply CSS properties to html tags is to use "style" attribute with html in tag.

As value of "style" attribute we can specify one or more CSS properties.


Example:>>>>1

style="color:red;font-size:small;text-align:center;"

Here color,font-size,text-align are CSS property name and red,small,center are corresponding property values.
Here semicolon is used for seperate two CSS properties.
Here colon is used for seperate CSS property name and value.


<div style="color:red;font-size:small;text-align:center;"> Hello How are you </div>

This method need more coding.
This method is easy to understand but not using widly.

-----------------------------------Method-2

In this method all our style informations are put in one place called stylesheet.
Using html tag "style" .

<style type="text/css">
------ put all our style informations here ------
</style>

Here "type" is an attribute of "style" tag.


Example:>>>>1

<style type="text/css">
#test1
{
color:red;
font-size:small;
text-align:center;
}
</style>

<div id="test1"> Hello How are you </div>


# ----> is called CSS selector,because it is used for select one or more element or tag with in tha page to apply CSS property.
# ----> it select element or tag by ID.
Here id "test1" is used for uniqly identify the div tag with in that html page.


Example:>>>>2

<style type="text/css">

#test1{ <--------- Rule-1
color:red;
font-size:small;
text-align:center;
}

h1{ <--------- Rule-2
color:red;
font-size:small;
}

p{ <--------- Rule-3
text-align:justify;
}

</style>

----------------------Method-3
External stylesheet.
Link external stylesheet file to our page like image.
This method reduce code to be downloaded by the browser.
Web browser have to download external stylesheet file only once.
The extension of external stylesheet is "*.css".
This is most widely using method.

The html tag "link" is used to link stylesheet file.

<link type="text/css" rel="stylesheet" href="stylesheet1.css" />

Here "href" attribute of "link" tag specify the external stylesheet to be link.

===================

********************************************************2
CSS SELECTORS
===================

CSS selectors specify or select the parts of the page we want to style and CSS properties we want to apply that parts.
These selectors style our page based on properties of elements or html tags.
Different types of CSS selectors.
1) Type selector or element(tag) name selector.
2) ID selector.
3) CLASS selector.

===================
1) Type selector or element(tag) name selector.

It can apply to all tags or elements of specific type in a document or page.
It specify the name of the html tag.
h1{
color:red;
font-size:small;
}

===================
2) ID selector

ID selector start with "#".
ID means unique identifier.
It only can apply to one element or tag in a page.
Using "id" attribute of html tags or elements.
we can't have two element or tag with same ID in same page,because it not allowed in some browser.

Example:>>>>1

Suppose we want to apply same style to all paragraph in a page.

<style type="text/css">
#para
{
text-align:justify;
}
</style>

<p id="para"> some text1 </p>
<p id="para">some text2 </p>

Here we created an ID selector "para" for all "p" tags in this page.
But we can't have two element or tag with same ID in same page,So it not possible.

In this type situations we using "class" attribute of html tags or elements.

===================
3) CLASS selector

CLASS selector start with dot ".".
Using "class" attribute of html tags or elements.
It can apply to any element or tag in a perticular class in a page.

Example:>>>>1

Suppose we want to apply same style to all paragraph in a page.

<style type="text/css">
.para
{
text-align:justify;
}
</style>

<p class="para"> some text1 </p>
<p class="para">some text2 </p>
===================
********************************************************3
Combined Selector
===================
These selectors style our page based on properties of elements or html tags.
1)Type selector or element(tag) name selector with ID selector.
2)Type selector or element(tag) name selector with CLASS selector.
3)Type selector or element(tag) name selector with ID selector and CLASS selector
4)Multiple CLASS selector.
5) PSEUDO CLASS selector.
6)Attribute selector.

===================
1)Type selector or element(tag) name selector with ID selector.

<style type="text/css">
p#para <------- This selector select any "p" tag with ID "para"
{
text-align:justify;
}
</style>

<p id="para"> some text </p>

===================
2)Type selector or element(tag) name selector with CLASS selector.

<style type="text/css">
p.para <------- This selector select any "p" tag with CLASS "para"
{
text-align:justify;
}
</style>

<p class="para"> some text </p>

===================
3)Type selector or element(tag) name selector with ID selector and CLASS selector

<style type="text/css">
p#ipara.cpara <------- This selector select "p" tag with ID "ipara" and CLASS "cpara" only,this is rarely used.
{
text-align:justify;
}
</style>

<p class="cpara" id="ipara"> some text </p>

===================
4)Multiple CLASS selector.

We can assign more than one class to given html elment by separating class name with space in class attribute of tags.
Combining two class selector into single selector.

<style type="text/css">
.cpara1.cpara2 <------- This selector select tags with both CLASS "cpara1" and "cpara2" only.
{
text-align:justify;
}
</style>

<p class="cpara1 cpara2" > some text </p>

===================
5) PSEUDO CLASS selector.

Suppose we want to change color of hiperlink to red.

<style type="text/css">
a <------- This is an elment selector for html tag "a".
{
color:red;
}
</style>

<a href="www.google.com"> Click here </a> <--- Here element selector will work correctly.
<a name="name1"> Hello how are you </a> <--- Suppose we not need to color it ,But above element selector also will coloring it to red,that is a problem.

To avoid this type problem we using PSEUDO CLASS selector.

------------------------------------------------<>
Here ":link" is the PSEUDO CLASS and it combined with element selector "a".

<style type="text/css">
a:link <------- It select all elements or tags of type "a" when they are a link
{
color:red;
}
</style>

<a href="www.google.com"> Click here </a>

Problem solved.

------------------------------------------------<>
Some PSEUDO CLASSES

:link <--- hiperlink
:visited <--- visited link
:hover <---- mouse over, we can apply to any elements or tags.
:active <---- clicked or mouse press down.
:focus <---- keyboard focus ,we can apply to any elements or tags

<style type="text/css">
a:link <------- It select all elements or tags of type "a" when they are a link.
{
color:red;
}

a:visited <------- It select elements "a" when they are visited and apply style.
{
color:blue;
}

a:hover <------- It select elements "a" when mouse over and apply style.
{
color:yello;
}

a:active <------- It select elements "a" when clicked or mouse press down and apply style.
{
color:green;
}

a:focus <------- It select elements "a" when keyboard focus and apply style.
{
color:orange;
}
</style>

===================
6)Attribute selector.

Suppose we want to set the text size in a text field.
<style type="text/css">
input <--------It select all "input" tags and apply style, that is a problem.
{
font-size: 200%;
}
</style>

<form action="" method="POST">
<div><input type="text" name="unam" value=""/></div>
</div><input type="submit" name="submit" value="submit"/></div>
</form>

Here style will be applied to both text field and submit button.We can solve this problem by using "ID" or "CLASS" selector.
We can also solve this problem by using Attribute selector.

------------------------------------------------<>
<style type="text/css">
input[type="text"] <--------It select only "input" tags with type attribute is text (type="text") and apply style.
{
font-size: 200%;
}
</style>

<form action="" method="POST">
<div><input type="text" name="unam" value=""/></div>
</div><input type="submit" name="submit" value="submit"/></div>
</form>

Problem solved.
===================
********************************************************4
Complex Selectors (Advanced Selectors)
===================
Complex selectors style our page not only based on properties of elements or tags but also based on structure of our page.
1)Selector Grouping.
2)Sentence Selector.
3)Child Selector (>).
4)jsent Selector (+).
5) PSEUDO Element Selector.

===================
1)Selector Grouping

It allow to group more than one selectors and apply to ally of them a common set of CSS properties

------------------------------------------------<>
h1{
color:red
font-family: verdana,sans-serif; <----
}

p{
text-align:justify;
font-family: verdana,sans-serif; <----
}

Here tags "h1" and "p" have same property "font-family: verdana,sans-serif".
We can make it so simple by using "Selector Grouping" as follows.

------------------------------------------------<>
h1,p <---- grouping tag selectors "h1" and "p" and applying common properties
{
font-family: verdana,sans-serif; <----
}

h1{
color:red
}

p{
text-align:justify;
}

===================
2)Sentence Selector

Suppose we want to make only paragraph one red color with out affecting paragraph three.
Note here class of paragraph one and paragraph three are same.
We can do it by using "ID selector" in paragraph one,but that is inconveniant.So we using "Senetence selector" for it.
Using "Sentence selector" we can select "p" tag of class "leader" that is inside the "div" tag of class "latest".
Here style is applied to only right most element or tag that is "p.leader", and the previous elements ".latest" or "div.latest"
are used to specify the context or enclosing elements.

<style type="text/css">
.latest p.leader <--- means apply style to tag "p" of class "leader" which is inside tha tag with class "latest".
{
color:red;
}
OR
div.latest p.leader <--- means apply style to tag "p" of class "leader" which is inside tha tag "div" of class "latest".
{
color:red;
}
</style>


<div class="article latest"> <--- this "div" tag has two classes.
<p class="leader"> paragraph one </p>
<p> paragraph two </p>
</div>

<div class="article">
<p class="leader"> paragraph three </p>
</div>
------------------------------------------------<>
Example:
div.latest div.new p.new
{
color:blue;
}

Means apply style to right most element "p.new" which is inside the element "div.new"
which is inside the tag "div.latest".

===================
3)Child Selector (>)

------------------------------------------------<>
Suppose we want to display List items in the 'Unordered list' are in 'bold' and List items
in the 'Ordered list' are in 'normal'.
we can do it by using "Sentence selector"

<style type="text/css">
ul li <---apply style to all List items inside the Unordered list.(Rule-1)
{
font-weight:bold;
}

ul ol li <---apply style to all List items that inside the Ordrered list that inside the Unordered list.(Rule-2)
{
font-weight:normal;
}
</style>

<ul>
<li>List item-1</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-2</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-3</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>
</ul>

Here Rule-1 apply "bold" style to all list items inside the Unordered list.Then the Rule-2 remove this "bold"
style from only list items that inside the Ordered list that inside the Unordered list and apply new style "normal".
We can also do it with "Child selector" as follows.

------------------------------------------------<>
<style type="text/css">
ul > li <---means List items that directly inside the Unordered list.
{
font-weight:bold;
}

ol > li <---means List items that directly inside the Ordered list.
{
font-weight:normal;
}
</style>

<ul>
<li>List item-1</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-2</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-3</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>
</ul>

After this 'List items-1','List items-2','List items-3' are displayed in "bold" and
all 'List item-a','List items-b' inside the Ordrered list are displayed in "normal" style.

------------------------------------------------<>
ul <---- Unordered list
ol <---- Ordered list
li <---- List items(Ordered or Unordered)

===================
4)jsent Selector (+).

User to apply stye to a perticulat element or tag that come immediatlyt after
a perticular tag.

ul + p <-- apply style to "p" tag that come immediatly after "ul" tag.
{
text-indent:0;
}

===================
5)PSEUDO Element Selector.

"PSEUDO Element" actually not an element or tag in the html document.

------------------------------------------------<>
Examples of "PSEUDO Elements" are:
:first-line
:first-letter

------------------------------------------------<>
p:first-line <--- to select first line of paragraph and apply style.
{
font-weight:bold;
}

p:first-letter
{
font-sizet:300%;
color:red;
}
===================
********************************************************5
INHERITANCE
===================
All text properties support a special value called "inherit".

There are two types of properties is CSS.
1) Properties that inherit value from parent element or tag(Inherited Properties).
2) Properties that do not inherit value from parent element or tag(NonInherited Properties).


We can make 'NonInherited Properties' to 'Inherited Properties' by using the property value "inherit".
for example "border" propery is a NonInherited Propertiey.

All of the text properties in CSS are Inherited properties,that is they are automatically inherited to
child elements or tags by default.So not need to using the property value "inherit" in child elements or tags.

Visit "www.w3.org" to find which properties are Inherited and NonInherited.

The default value of "color: property is "inherit", that is "color:inherit".This means the "color" property
inherit value from its parent element or tag.

------------------------------------------------<>

Impotant Note : All browsers contain some default predefined stylesheet Rules for ecah tags to set default styles.
User defined stylesheet Rules overriding these styles.

That is there are two types of Rules.
1)Browser built in stylesheet Rules.
2)User defined stylesheet Rules.

These two types of Rules are combined to get finished style.
The process of combining the properties from multiple Rules for a perticular tag to get finished result is called CASCADING.


a:link{
text-decoration:none;
}

Browser contain a default Rule to set 'underline' for hyperlink.
This stylesheet override this default 'underline' style and removing underline from hyperlink.


------------------------------------------------<>
<style type="text/css">
body{ <----- Rule-1
color:red;
font-family: verdana,sans-serif;
border:1px solid blue;
}

ul{ <----- Rule-2
border:inherit;
}
</style>

<body>
<p> Paragraph one </p>
<p> Paragraph two </p>

<ul>
<li>List item-1</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-2</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>

<li>List item-3</li>
<ol>
<li>List item-a</li>
<li>List item-b</li>
</ol>
</ul>
</body>

Here "body" is the parent element of tags "p","ul","li" and "ol".
So all text properties specified in the parent element are by default automatically
inherited to all child elements.So here text properties "color:red" and "font-family: verdana,sans-serif"
are automatically inherited to child tags.So we can see all text in this page in color red and font verdana.
Here "border:1px solid blue;" is a Noninheried property ,so it not automatically inherited to child tags.If you want
to inherit this "border" property to a perticular child tag, then we need to explicitly specify it in style sheet of that tag.
Here we inherited the Noninherited property "border" from parent tag "body" to child tag "ul" by specifying explicitly
in it in style sheet of that "ul" tag

------------------------------------------------<>
<style type="text/css">
body{
color:red;
font-family: verdana,sans-serif;
border:1px solid blue;
}

ul{ <------- Explicitly inheriting the Noninherited property "border".
border:inherit;
}

p,ol{ <----- Overriding the default inherited property "color:red" with "color:black".
color:black;
}
</style>

------------------------------------------------<>
<style type="text/css">
ul{
color:blue;
}

ol{
color:black;
}
</style>

Here "ul" is the parent tag of "ol" tag.So inherited property "color:blue" is automatically inherited to child tag "ol".
Here we Overriding the default inherited property "color:blue" with "color:black".
===================
********************************************************6
CASCADING
===================
Important feature of CSS.
CASCADING is a process by which an element or tag goes through the Rules in the stylesheet and comes at other end when it finish styling.
When an element or tag goes through the stylesheet it select the maching Rules and apply styles specified in that Rules.
For each elements or tags in the html document the browser goes through the Rules in the stylesheet and comes at other end.
The process of combining the properties from multiple Rules for a perticular tag to get finished result is called CASCADING.
CASCADING does not necessary to happend from top to bottom of our stylesheet.

The order in which the Rules are declared are one of the factor that control the order in wich they are applied to the elements or tags.
Order of Rules in stylesheet are important.

------------------------------------------------<>
You can put Rules in stylesheet at any order you like.In this case
we need an other way to controling the order in which stylesheet Rules are applied to elements or tags.
For that CSS using SPECIFICITY.

Most specific "Selector" of an element or tag have higher priority and apply last.
If specificity of two Rules are different then order does not matter.
Order of two Rules are matter only when they are equaly specific, in this case thier order specify the priority.
Properties in the Higher priority Rule apply last.

------------------------------------------------<>
How browser Measuring SPECIFICITY(priority).

1)Browser first break up Grouped selectors into seperate selectors
2) then count number of IDs appears in the selector.
3) If two Rules have same number of IDs,then the browser count number of CLASS or PSEUDO in the selectors of perticular tag.
4) If two Rules of a perticulat tag have same number of CLASS or IDs,then the browser count number of properties in each Rules.
If number of properties are same,then the browser apply the Rules in the order they are specified in the stylesheet.

------------------------------------------------<>
1)Browser first break up Grouped selectors and make seperate selectors.
CSS actually treat Grouped selectors as seperate Rule for each selectors.
Grouped selectors are seperated by comma.

----------------Examples------------------
a:link,a:visited
{
font-style:normal;
font-weight:normal;
text-decoration:none
}

CSS treat this Grouped Selector as seperate selectors as follow:

a:link <----Rule-1
{
font-style:normal;
font-weight:normal;
text-decoration:none
}

a:visited <----Rule-2
{
font-style:normal;
font-weight:normal;
text-decoration:none
}

2) then count number of IDs appears in the selector.

----------------Examples------------------
<style type="text/css">
#ibody .cpara1 <------Rule-1
{
color:blue;
}

.cpara1 <------Rule-2
{
color:red;
}
</style>

<body id="ibody">
<p class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 contain one ID and one CLASS , and Rule-2 contain one CLASS.
So Rule-1 has higher priority because it contain one ID.So properties in the Rule-1 apply last.
So here Paragraph one and two are displayed in "Blue" color.
Here actually Rule-2 firstly apply style "color:red" to Paragraph one and two,then the Rule-1 override this
style with "color:blue".

----------------Examples------------------
<style type="text/css">
.cpara1 <------Rule-1
{
color:red;
}

#ipara1.cpara1 <------Rule-2
{
color:blue;
}
</style>

<body id="ibody">
<p id="ipara1" class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-2 has higher priority(specificity) so it apply last.
Here actually Rule-1 firstly apply style "color:red" to Paragraph one and two,then the Rule-2 override this
style with "color:blue".
So here Paragraph one display in "blue" color and Paragraph two in "red" color.

3) If two Rules have same number of IDs,then the browser count number of CLASS or PSEUDO in the selectors of perticular tag.

----------------Examples------------------
<style type="text/css">
#ibody p.cpara1 <------Rule-1
{
color:blue;
}

#ibody p <------Rule-2
{
color:red;
}
</style>

<body id="ibody">
<p class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 and Rule-2 have same number of IDs.So browser count number of CLASSes.
Here Rule-1 has one CLASS and Rule-2 has no CLASS.So Rule-1 has higher priority(specificity) and apply last.

----------------Examples------------------
<style type="text/css">
p.cpara1 <------Rule-1
{
color:blue;
}

p <------Rule-2
{
color:red;
}
</style>

<body id="ibody">
<p class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 and Rule-2 have zero IDs.So browser count number of CLASSes.
Here Rule-1 has one CLASS and Rule-2 has no CLASS.So Rule-1 has higher priority(specificity) and apply last.

4) If two Rules of a perticulat tag have same number of CLASS or IDs,then the browser count number of properties in each Rules.
If number of properties are same,then the browser apply the Rules in the order they are specified in the stylesheet.

----------------Examples------------------
<style type="text/css">
p.cpara1 <------Rule-1
{
color:red;
font-weight:bold;
}

p.cpara1 <------Rule-2
{
color:blue;
}
</style>

<body id="ibody">
<p id="ipara1" class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 and Rule-2 have zero (same number of) IDs and same number of CLASSes.So the browser count
number of properties in Rule-1 and Rule-2.Here Rule-1 has more properties,so it has higher priority(specificity)
and apply last.So Paragraph one and two display in "red" and "bold".

----------------Examples------------------
<style type="text/css">
a:link,a:visited <------Rule-1
{
font-style:normal;
font-weight:normal;
text-decoration:none;
}

a:hover,a:focus <------Rule-1
{
text-decoration:underline;
}
</style>

Here browser first seperate the grouped selectors.So we get 4 selectors "a:link","a:visited","a:hover" and "a:focus".
Here number of IDs,CLASSes and PSEUDO classes of 4 selectors are same.So the browser count number of
properties in each selectors.Here selectors "a:link" and "a:visited" have more number of properties, so it have higher
priority and apply last.

----------------Examples------------------
<style type="text/css">
p.cpara1 <------Rule-1
{
color:red;
}

p.cpara1 <------Rule-2
{
color:blue;
}
</style>

<body id="ibody">
<p id="ipara1" class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 and Rule-2 have same priority,so the browser apply ths style in the order of Rules in the stylesheet.
That is apply Rule-1 first then Rule-2.So the Paragraph one and two are displayed in "blue" color, because Rule-2
override Rule-1.

===================
!imporant
---------------------------------------
This is an another way to control the order in which properties are applied to elements or tags in our page.
This method is used for give gratest priority to perticular propertyand is applied last after all other properties have been applied.
Here we using the keywors "!important" to specify grater priority.

Note: Avoid using "!important",that is not a good method.It is mainly usefull when you designing a website using Content
Management System(CMS).Because CMS using its own stylesheet. To override this stylesheet we can use this "!important"
technique.

<style type="text/css">
p
{
font-style:normal;
font-weight:normal;
color:red !important; <--- We using keyword "!important" to give higher priprity to this property
}
</style>

----------------Examples------------------
<style type="text/css">
p.cpara1 <------Rule-1
{
color:blue;
}

p <------Rule-2
{
font-style:normal;
font-weight:normal;
color:red !important; <--- We using keyword "!important" to give higher priprity to this property
}
</style>

<body id="ibody">
<p class="cpara1"> Paragraph one </p>
<p class="cpara1"> Paragraph two </p>
</body>

Here Rule-1 has one CLASS and Rule-2 has no CLASS.So Rule-1 has higher priority(specificity) and apply last.
Here when applying low priority Rule-2, the browser not apply the property "color:red !important" to "p" tag,because it is marked as
"!important" browser hold(saved) this property and apply it only last after applying higher priority Rule-1.
So here even Rule-1 has higher priority, Paragraph one and two are displayed in "red" color.

Here browser apply style by going on 2 passes.
In the first pass browser only apply properties which do not have "!important" marking.
In the second pass browser only apply properties which have marked "!important".

===================
CASCADING STEPS

For each element or tag in the html document the browser apply style to it in 4 passess.

1) The first pass for the built in stylesheet of the browser.Webdevelopers dont warry about that.
2)The second pass is for our stylesheet(auther stylesheet).In this pass only includes the properties that not marked "!important".The browser
orders the Rules according to their specificity(priority) by First counting the number is IDs then number of CLASSes or
PESUDO classes and finaly the number of properties in each selector.If after counting these 3 things there are any selectors that
are equaly match in terms of specificity(priority),then they are apply in the order they are exist in the stylesheet.
Then for each selector that match the current element or tag the properties specified in that Rule are applied to it.The least priority
selectors are apply first and higher priority selectors are apply last.
3) In the thired pass same thing(thing happend in Pass 2) is happend but only for the properties which are marked "!important".
4)The forth pass is for the user control properties that have marked "!important" in the user stylesheet.We dont worry about it.

===================
********************************************************7
CSS Properties
===================
color:red;
or
color:#222222;
------------------------------------------------<>
text-align:right; <----Align text to right
text-align:left;
text-align:center;
text-align:justify; <----- lines are wrap at exact spot on the same page and give a rectangular block look to paragraph.
justify is not realy recomented to use on web.
------------------------------------------------<>
CSS support number of different unit of measurements they are:
1) em <----- It depend of current font.This change when font size change.
1em ---> correspods to the height of the capital letter "M" in the current font.
3m ---> correspods to 3 times the height of the capital letter "M" in the current font.

2)pt <----(points)This is an absolute measurement.Not change when font size change.Used in documents for specifying font size.
24pt

3)px <----(Pixels)This is an absolute measurement.Not change when font size change.But change(vary) with screen resolution.
24px

Note : Using Points(pt) instead of Pixels(px) is a good practice
------------------------------------------------<>
text-indent:3em; <--- To gegin further from the margin than the other lines.

It take any CSS measurements "em","pt","px".
------------------------------------------------<>
font-family:verdana,Geneva,sans-seriff;

verdana --> for Windows users.
Geneva --> for Mac uses.
sans-seriff --> standard font.

We have to specify a list of font names here.Because there is a chance that a perticular font not available in some computers.
So we have to specify some standard font names.
------------------------------------------------<>
font-size:10pt;

It take any CSS measurements "em","pt","px".
font-size:small;
font-size:largel;
font-size:x-small; <--- extra small
font-size:x-large; <--- extra large
------------------------------------------------<>
font-style:italic;
font-style:normal;
------------------------------------------------<>
font-weight:bold; <---- To controle boldness of text.
font-weight:normal;
font-weight:bold
------------------------------------------------<>
font-variant:small-caps; <--- Dislay all lowercase letters in small uppercase latters.
------------------------------------------------<>
line-height:normal; <--To controle line spacing.
line-height:1.5;
------------------------------------------------<>
font-decoration:none; <---- To remove underline.
font-decoration:underline; <---- To add underline.
font-decoration:line-through; <--- To draw line through the center of the text.
font-decoration:overline: <---- To add overline(line above text).
------------------------------------------------<>
word-spacing:0.1em <--- To add space between words.
letter-spacing:0.1em <--- To add space between letters.

*********************FINISHED*************************