CSS-Backgrounds , text-decorations , links , tables

CSS - BACKGROUNDS :

To add background effects , properties and decoration to document or any element use css background properties .

1. CSS background-color property :

                         This property specifies the background color used in the background of a document . Using background-color can add any color to background .

SYNTAX :

   {body background-color:color_name/color_number;}

EXAMPLE :

   {body background-color:red;}

2. CSS background-image :

                        This property specifies  how many background images added to the background of document. Using this property  can add any background image .

SYNTAX :

    body{

    background-image:url(image_name);

    }

EXAMPLE :

   body{

   background-image:url(flower.png);

   }

3. CSS background-size :

                           This property specifies the size of background . Using background-size property can add every size to background .

VALUES : 

  1. auto
  2. percentage
  3. initial
  4. length
  5. cover
  6. contain
  7. inherit

SYNTAX :

     background-size:value;

EXAMPLE :

    background-size:percentage;

4. CSS background-attachment :

                       The background image used in the document is fixed it means it does not scroll with the whole document .

VALUES :

  1. scroll
  2. fixed
  3. inherit
  4. local 
  5. initial

SYNTAX : 

     background-size:attachment;

EXAMPLE :

     background-size:fixed;

5. CSS background-position :

                        This property specifies the background image position in document. Using background-position property can add any needed position to background image .

VALUES :

  1. center top
  2. center bottom
  3. center center
  4. left top
  5. left bottom
  6. left center
  7. right top 
  8. right bottom
  9. right center
  10. x%y%
SYNTAX :
 
   background-position:value;

EXAMPLE :

  background-position:center;   

6. CSS background-repeat

                Using background-repeat property can repeat background image .

SYNTAX :

 background-repeat:value;

Values :

  1. repeat-x
  2. repeat-y
  3. no-repeat
  4. initial
  5. inherite

Example :

background-repeat:repeat;

CSS - TEXT DECORATIONS :

The text-decoration property is used to add decorations to text or content . It applies decoration for text .

Types :

  1. none : no decoration to text
  2. underline : underline is added to text
  3. overline : line is drawn above text
  4. line-through : line is drawn through middle of text
  5. blink : I adds blinking effect to text 
Example :


<html>
<head>Tprograming.com</head>
<body>

<p style="text-decoration:none;"> Tprograming </p>
<p style="text-decoration:underline;"> Tprograming </p>
<p style="text-decoration:overline;"> Tprograming </p>
<p style="text-decoration:line-through;"> Tprograming </p>
<p style="text-decoration:blink;"> Tprograming </p>

</body>
</html>

CSS - LINKS :

In this topic we will see how to add links to any text, image and document in css .

Types of links :

  1. a:link : It displays color for unvisited links 
  2. a:visited : It displays color for visited links
  3. a:hover : It displays color when we move cursor/pointer on text . 
  4. a:active : It displays color for active link
Example :

1.a:link : It displays color for unvisited links 

<html>
<head>
   <style type="text/css">
      a:link {color:#fff}
  </style>
</head>
</html>

2. a:visited : It displays color for visited links

<html>
<head>
   <style type="text/css">
      a:visited {color:#fff}
  </style>
</head>
</html>

3. a:hover : It displays color when we move cursor/pointer on text . 

<html>
<head>
   <style type="text/css">
      a:visited {color:#fff}
  </style>
</head>
</html>

4. a:active : It displays color for active link

<html>
<head>
   <style type="text/css">
      a:visited {color:#fff}
  </style>
</head>
</html>


CSS - TABLES :


This topic will show you how to build a table in css .


<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Tpro</td>
    <td>graming</td>
  </tr>
  <tr>
    <td>Tpro</td>
    <td>graming</td>
  </tr>
</table>

</body>
</html>