CSS - Introduction , syntax , types , border

INTRODUCTION :

  • CSS stands for Cascading Style Sheet . 
  • To overcome the limitations of html we uses css .
  • It is a language used for decoration of an web page . 
  • CSS gives extra features for decorating an page .
  • It makes web page more attractive to user and everyone .
  • CSS use for designing style sheets for web page .
  • It was found by Hakon Wium Lie on 10th October . 
  • There are many editors of CSS like notepad ,  sublime text , atom , visual studio , komodo edit , etc .
  • The style is made up three main parts i.e. 1. selector , 2. property , 3. value
  • Selector is the tag where we can add styling .
  • Property is the attribute of an tag or selector .
  • value is the value of attribute or property .

BASIC SYNTAX : 

selector {property:value;}

  • Selector is the tag name (like html) , shows how document will appear after adding it .
  • Property is like attributes , shows which characteristics we are using .
  • Value is the value used for  property .
EXAMPLE :

h1 {font-size:10px;}

h1 = selector 
font-size = property
value = value of property 

CSS TYPES :


HTML has some limitation for decorating the document , but CSS helps to add extra features  and decoration to an html document .
Following are the types of CSS :-
  1. Inline css
  2. External css
  3. Internal css or embedded css
1. INLINE CSS :-
                   Inline css is used to add css in the oepening tag of an html document . Place the code in the opening tag .

SYNTAX :
 
<tag style="property:value;">

</tag>

EXAMPLE :

<html>
<head>
<body>
<p style="font-size:20px;color:blue;">TPROGRAMING</p>
</body>
</head>
</html>



2. EXTERNAL CSS:-

  • External css is an external file that contains only css code . 
  • By used external css we can change the whole format of a html document .
  • It is referred to in html file and it works externally . It's file saved with extension .css .
  • This file linked using anchor tag and comes in head tag .

SYNTAX :

tag1{
      property1:value;
      property2:value;
} 

tag2{
      property:value;
}


EXAMPLE :

We have to create two files , one is .html and second is .css 

external.html

<html>
<head>
<link rel="stylesheet" href="external.css">
</head>
<body>
<p>TPROGRAMING-Learn with us !</p>
</body>
</html>


external.css

p{
text-align:center;
color:red;
}
body{
background-color:pink;
}






3. INTERNAL CSS OR EMBEDDED CSS :-
  • Internal css is used in the head sectionof an html code.
  • HTML  and CSS different so have to tell browser we are using css in html code.
  • Add style tag to show css .
  • Place the code with style tag in head section .
  • Style tag has type attribute .                      
STNTAX :

<html>
<head>
<style type="text/css">
tag{
property:value;
}
body{
property:value;
}
</style>
</head>
<body>
.
.
.
</body>
</html>


EXAMPLE :

<html>
<head>
<style type="text/css">
p{
text-align:center;
color:blue;
}
body{
background-color:red;
}
</style>
</head>
<body>
<p>TPROGRAMING-Learn with us!</p>
</body>
</html>


CSS BORDER :

To add CSS border in html document use border-style property and it has four values i.e. left, right, top, bottom .Also have to add class of border value in the main opening of tag.

SYNTAX :

tag.border_type{border-style:border_type;}

EXAMPLE :

p.solid{border-style:solid;}

VALUES OF CSS BORDER :

  • solid: shows solid border
  • dashed: shows dashed border
  • dotted: shows dotted border
  • double: shows double border
  • hidden: shows hidden border
  • groove: shows groove border
  • inset: it is a 3D border and shows inset border
  • outset: it is a 3D border and shows outset border
  • ridge: it is also an 3D border and shows ridge border
  • none: No border 
  • mix: shows solid, double, dashed and dotted border

EXAMPLE :

<html>
<head>
<style>
 p.double {border-style: double;}
</style>
</head>
<body>
<p class="double">TPROGRAMING-Learn with us!</p>
</body>
</html>