CSS Margin & padding

  Css margin:-

The Css margin properties are used to create space around elements, outside of any defined borders.

Syntax:-
Div
{
margin:70px;
}

Margin - individual sides

P {
Margin- top:100px;
Margin-bottom:100px;
Margin- right:100px;
Margin-left:100px;
}

Coding:-



Output is:-


Style 1:-

Syntax:-
h1
{
Margin:70px;
}

Coding:-




Output is:-



Style 2:-

Syntax:-
Div
{
Margin:70px 70px;
}
Coding:-




Output is:-



Style 3:-

Syntax:-
h1
{
Margin:70px 70px 70px 70px;
}

Coding:-



Output is:-


 Margin:25px 50px 75px 100px;
  • Top margin is 25px
  • Right margin is 50px
  • Bottom margin is 75px
  • Left margin is 100px
        Syntax:-
    P{
          Margin:25px 50px 75px 100px;
       }

Css padding:-

The Css padding properties are used to generate space
around  an element's content,inside of any defined borders.

With css,you have full control ever the padding.

There are properties for setting the padding for each side of an element top,right, bottom,and left.

Syntax:-
Div
{
Padding:100px;
}

Padding-individual sides
Padding-top
Padding-right
Padding-left
Padding-bottom

Coding:-



Output is:-


Style 1:-

Syntax:-
h2
{
Padding:100px;
}

Coding:-




Output is:-



Style 2:-

Syntax:-
h1
{
Padding:70px 70px;
}

Coding:-



Output is:-



Style 3:-

Syntax:-
h1
{
Padding:70px 50px 50px 70px;
}

Coding:-



Output is:-


Margin & Padding using by border :-

Syntax:-
Div
{
Border:solid 5px green;
Margin:50px;
Padding:50px;
}
Coding :-

<html>
   <head>
      <style type="text/css">
         .bob
          {
            border:solid 5px skyblue;
            padding-top:50px;
            padding-right:50px;
            padding-bottom:40px;
            padding-left:40px;
          }
          .kim
          {
            border:solid 5px red;
            margin-top:100px;
            margin-right:100px;
            margin-bottom:70px;
            margin-left:80px;
         }
</style>
<title></title>
</head>
<body>
<h1 class="bob">Example of margin
</h1>
<h1 class="kim">Example of padding
</h1>
</body>
</html>

Output is:-


Css table:-

1.border:solid;
2.width:500px; 
3.height:300px;
4.border-collapse:collapse;

Coding:-

<html>
<head>
<style type="text/css">
    table
        {
        border-collapse: collapse;
        width:500px;
        height: 300px;
        }
        table,td,th
        {
         border: solid 1px black;
        }
      td
        {
         text-align: center;
         vertical-align: bottom;
        }
      th
        {
         background-color: orange; 
        }
</style>
 <title>
 </title>
</head>
<body>
<table>
    <tr>
    <th colspan="4" >Employee Data</th>  
    </tr>
<tr>
<td>Emp Id</td>
<td>Name</td>
<td>Contact no</td>
 <td>salary</td>
 </tr>
    
    <tr>
<td>101</td>
<td>Soniya</td>
<td>5623478910</td>
 <td>20,000</td>
    </tr>
    
    <tr>
<td>102</td>
<td>taniya</td>
<td>2389916720</td>
 <td>22,000</td>
    </tr>
<tr>
<td>103</td>
<td>Riya</td>
<td>4323677215</td>
 <td>15,000</td>
    </tr>
    
</table>
</body>
</html>

Output is:-


By using hover effect:-

Coding:-

<html>
<head>
<style type="text/css">
    table
        {
        border-collapse: collapse;
        width:500px;
        height: 300px;
        }
        table,td,th
        {
         border: solid 1px black;
        }
      td
        {
         text-align: center;
         vertical-align: bottom;
        }
      th
        {
         background-color: orange; 
        }
      tr:hover
        {
          background-color: skyblue;
        }
</style>
 <title>
 </title>
</head>
<body>
<table>
    <tr>
    <th colspan="4" >Employee Data</th>  
    </tr>
<tr>
<td>Emp Id</td>
<td>Name</td>
<td>Contact no</td>
 <td>salary</td>
 </tr>
    
    <tr>
<td>101</td>
<td>Soniya</td>
<td>5623478910</td>
 <td>20,000</td>
    </tr>
    
    <tr>
<td>102</td>
<td>taniya</td>
<td>2389916720</td>
 <td>22,000</td>
    </tr>
<tr>
<td>103</td>
<td>Riya</td>
<td>4323677215</td>
 <td>15,000</td>
    </tr>
    </table>
</body>
</html>

Output is:-



Css table using by (odd &even number):-

Syntax:- even number

tr:nth-child (even)
{
Background-color:rgb(190,190,190);
}

Syntax:- odd number 

tr:nth-child (odd)
{
Background-color:rgb(171,231,221);
}

Coding :-

<html>
<head>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            border:dashed 1px grey;
            width:300px;
        }
        td,th
        {
            border: solid 1px black;
            text-align: center;
        }
         th
        {
           background-color: orange; 
        }
        tr:nth-child(even)
        {
            background-color:rgb(255,0,0);
        }
        tr:nth-child(odd)
        {
            background-color:rgb(17,231,221);
        }
</style>
 <title>
 </title>
</head>
<body>
<table>
    <tr>
    <th colspan="4" >Employee Data</th>  
    </tr>
<tr>
<td>Emp Id</td>
<td>Name</td>
<td>Contact no</td>
 <td>salary</td>
 </tr>
    
    <tr>
<td>101</td>
<td>Soniya</td>
<td>5623478910</td>
 <td>20,000</td>
    </tr>
    
    <tr>
<td>102</td>
<td>taniya</td>
<td>2389916720</td>
 <td>22,000</td>
    </tr>
<tr>
<td>103</td>
<td>Riya</td>
<td>4323677215</td>
 <td>15,000</td>
    </tr>
    </table>
</body>
</html>

Output is :-




Comments

Post a Comment

Popular posts from this blog

Css basic Properties ✍🏻

Image
Css Selectors - 1.  The Css id selector:- The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique with in a page, so the id selector is used to select one unique element. To select an Element with a specify id, write a hash(#) ch aracter , followed by the id of the elements. Output is:- 2. The Css class Selector:- The Class Selector selects HTML elements with a specific class attribute. To select an element with a specify class, write a period(.) character , followed by the class name. Output is:- The Difference between Id and Class:-  The Difference between an id and a class is that an Id can be used to identify one element , whereas a class can be used to identify more than one .   ID's are unique:- Each element can have only one I'd. Each page can have only one element with that Id. Classes are Not unique:- You can use the same class on multiple elements. You can use multiple classes on the same element. CSS...
Read more

Basic Html Notes

  What is website ? A website is a collection of web pages   which contains the information about the particular organization or institution or any product.It contains the related content that is identified by a common domain name and published on any one web server . Few examples of such websites are bing.com , wikipedia.org , google.com , amazon.com etc. Note:-A website can be opened using the software known as Browser . Commonly used browsers are Google Chrome , internet explorer , Mozilla Firefox etc.  Language used for website development :- The most common programming language used to develop websites are: HTML ( HyperText Markup Language ), CSS ( Cascading Style Sheets ), JavaScript and PHP ( Hypertext Preprocessor ). Note:-Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other languages to create a dynamic or static website . Purpose:- Websites are developed for a particular purpose,such as com...
Read more

Advanced Html Notes

Comments in HTML:- The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. <p>This html comment would<!-- This is a comment --> be displayed like this.</p> Note:- You don't see the text between the tags<--and-->.If you look at the source code,you would see the comment.To view the source code for this page,in your browser window, select View  and then select Source . HTML TEXT FORMATTING:- 1. <b> :- Defines  bold  text. 2.<Strong> :- Defines Important  text. 3. <i> :-   Defined Italic  text. 4. <em> :- Defined Emphasized  text. 5. <mark> :- Defined Marked text. 6. <small> :-  Defined Small  text. 7. <del> :- Defined deleted text. 8. <ins> :- Defined Inserted text. 9. <sub> :- Defined Subscript  text. 10. <sup> :- Defined Superscri...
Read more