Learn How to use css pseudo tag - Master css pseudo in 2 step part-2

You must read part One Of this Article to understand below article Read Part One

---

1] Pseudo-element

syntax: Tag::pseudo-element

Use: Style targeted text and place fake element before and after tag

1

Pseudo element is divided into three type based on the Targeting :

• Tag:first-line -Style first line of paragraph
• Tag:last-letter -style first letter of paragraph
• Tag:selection -style selected text

<div> First child

</div>

 style:
div:first-letter{color:red;} 

---

2

Pseudo class is divided into two type based on the placing tags :

• Tag::before
• Tag::after

Basic Syntax

        
<div>
first child first type

 </div>
style:
    div:before {
   content: "before";
}

div:after {
   content: "after";
}

Some Notes On The Syntax

You could leave the content property empty and just treat the pseudo-element like a content-less box, like this:

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

However, you can’t remove the content property altogether. If you did, the pseudo-element wouldn’t work. At the very least, the content property needs empty quotes as its value.

One final point regarding the syntax. Technically, you could implement a pseudo-element universally, without targeting any element, like this:

:before {
   content: "#";
}

While the above is valid, it’s pretty useless. The code will insert a hash symbol before the content in each element in the DOM. Even if you removed the <body> tag and all of its content, you’d still see two hash symbols on the page: one in the <html> element, and one in the <body> tag, which the browser automatically constructs.

• Why to use ::before and ::after
• Important to write nested tags
• Used when you want to add less tags to your Html document

• Notice about ::before and ::after
• Display content within the tags not outside
• Your content get effect of parent tags but You can also style content individually

Learn How to use css pseudo tag - Master css pseudo in 2 step part-1

• What you will learn :
• Description of pseudo tag
• Remove confussion related to use of : and ::
• Style element on the basis of Document Structure
• Style element on the basis of position
• Style element on the basis of position and type
• Style element on the basis of target text group based on state or location

---

Introduction:

Pseudo it self refer to fake which means does not exist. It will be more clear in :before and :after section . There are basically two type of pseudo tag

• Pseudo-class
• Pseudo-Element

We will go furthur deep in these topic below .

1] Pseudo-class

syntax: Tag:pseudo-class

Example: div:first-child

Notice!: Pseudo class use ':' single but pseudo Element use two'::'

1

Pseudo class is divided into four type based on the position of tag :

• Tag:first-child
• Tag:last-child
• Tag:n^th-child

first-child:

It matches a specified element that is the first child of another element.

Example: Div:first-child
Notice!: Many people are confused that the above but it is mistake , it rather search div that is first child of another Element. Example:

<p>
<div> first child
<div> div inside first child
</div>
<div>
</p>
 style:
div:first-child{color:red;} 

last-child:

It matches specified element that is last child of another element .

n^th -child :

It style n^th element inside another element .You can also specify odd or even element

---

2

Pseudo class is divided into four type based on the position and type of tag :

• Tag:first-of-type
• Tag:last-of-type
• Tag:n^th-child-of-type

Main different between 1)position and 2)position and type is illustrated below:

        
<div>
first child first type
<br />
<div>
child of first child</div>
</div>
<div>
first child </div>
style:
     div:first-child{color:red}
     div:first-of-type{ font-size:25px;}

3

Pseudo class is divided into four type based on the Document structure :

• Tag:empty
• Tag:not(selector)

4

Pseudo class is divided into four type based on state of element :

a)Links

• visited
• focus
• hover
• active

a)forms

• enabled
• disabled
• checked

Example:

<a href="https://www.blogger.com/blogger.g?blogID=3692262285405580599#"> please hover </a>
style:
a:hover{
color:red;
}

Continue to read Second part of this article Read Part Two

Develop own css grid system



<html>
<head>
<title>
</title>
<style>
/*-- setting width of body to 100 % and max-width to 1200px --*/
body{
        width: 100%;
        max-width: 1200px; 
      margin:auto;
         
    }

    /*-- applying clear around row so that column of one content do nat overflow on other-- */
    .row {
      
        clear:both;
    }
/*-- setting common property for column --*/
    [class*='col-'] {
        float: left;
        min-height: 1px;
     
        margin:5px;
        background-color: #ffffff;
    }
/*-- we are dividing whole row into 6 column and other different possibility . as 100/6 =  16.66% -- */
    .col-1{ width: 16.66%; }
    .col-2{ width: 33.33%; }
    .col-3{ width: 50%;    }
    .col-4{ width: 66.66%; }
    .col-5{ width: 83.33%; }
    .col-6{ width: 100%;   }
  
    *{
  
    box-sizing: border-box;
  
  
    }

 
/*-- applying media query for responsive page --*/
  @media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ width: 50%;        }
        .col-3{ width: 83.33%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }

        .row .col-2:last-of-type{
            width: 100%;
        }

        .row .col-5 ~ .col-1{
            width: 100%;
        }
    }
 @media all and (max-width:650px){
        .col-1{ width: 50%;        }
        .col-2{ width: 100%;    }
        .col-3{ width: 100%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;      }
    }
</style>
</head>
<body>

    <div class="row">
        <div class="col-1"> col-1 </div>
        <div class="col-1"> col-1 </div>
        <div class="col-1"> col-1 </div>
        <div class="col-1"> col-1 </div>
      
    </div>
<div class="row">
       
        <div class="col-1"> col-1 </div>
        <div class="col-1"> col-4 </div>
    </div>  
    <div class="row">
        <div class="col-2"> col-2 </div>
        <div class="col-2"> col-2 </div>
        <div class="col-2"> col-2 </div>
    </div>
    <div class="row">
        <div class="col-3"> col-3 </div>
        <div class="col-3"> col-3 </div>
    </div>
    <div class="row">
        <div class="col-4"> col-4 </div>
        <div class="col-2"> col-2 </div>
    </div>
    <div class="row">
        <div class="col-5"> col-5 </div>
        <div class="col-1"> col-1 </div>
    </div>
    <div class="row">
        <div class="col-6"> col-6 </div>
    </div>

</body>
</html>

Jquery manipulate the position

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'});
    });
});
</script>
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

Php css html calender

CSS CODE

/* calendar */
table.calendar  { border-left:1px solid #999; }
tr.calendar-row {  }
td.calendar-day { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover { background:#eceff5; }
td.calendar-day-np { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number  { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

PHP CODE

/* draws a calendar */
function draw_calendar($month,$year){

 /* draw table */
 $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';

 /* table headings */
 $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
 $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

 /* days and weeks vars now ... */
 $running_day = date('w',mktime(0,0,0,$month,1,$year));
 $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
 $days_in_this_week = 1;
 $day_counter = 0;
 $dates_array = array();

 /* row for week one */
 $calendar.= '<tr class="calendar-row">';

 /* print "blank" days until the first of the current week */
 for($x = 0; $x < $running_day; $x++):
  $calendar.= '<td class="calendar-day-np"> </td>';
  $days_in_this_week++;
 endfor;

 /* keep going with days.... */
 for($list_day = 1; $list_day <= $days_in_month; $list_day++):
  $calendar.= '<td class="calendar-day">';
   /* add in the day number */
   $calendar.= '<div class="day-number">'.$list_day.'</div>';

   /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/
   $calendar.= str_repeat('<p> </p>',2);
   
  $calendar.= '</td>';
  if($running_day == 6):
   $calendar.= '</tr>';
   if(($day_counter+1) != $days_in_month):
    $calendar.= '<tr class="calendar-row">';
   endif;
   $running_day = -1;
   $days_in_this_week = 0;
  endif;
  $days_in_this_week++; $running_day++; $day_counter++;
 endfor;

 /* finish the rest of the days in the week */
 if($days_in_this_week < 8):
  for($x = 1; $x <= (8 - $days_in_this_week); $x++):
   $calendar.= '<td class="calendar-day-np"> </td>';
  endfor;
 endif;

 /* final row */
 $calendar.= '</tr>';

 /* end the table */
 $calendar.= '</table>';
 
 /* all done, return result */
 return $calendar;
}

/* sample usages */
echo '<h2>July 2009</h2>';
echo draw_calendar(7,2009);

echo '<h2>August 2009</h2>';
echo draw_calendar(8,2009);

Css Rounded Buttons

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

Rounded Buttons

Add rounded corners to a button with the border-radius property: