Claim Your Free E-book post Below

We value your privacy and would never spam you
No comments:

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
css pseudo class element

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
No comments:
Labels:

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
css pseudo class element

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:nth-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 .

nth -child :
It style nth 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:nth-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
No comments:
Labels:

Step By Step Tutorial to Create Own Website - learn Creating Website

INTRODUCTION

Most of the people I met in recent day ask me to show them step by step guidioing their own  for creating their own personal website .
 Who should take this Tutorial: This tutorial is intendent to those who have basic knowledge about html.

I am going to divide this tutorial into four step:

1) Domain registration :

At first you must have own domain name . Now you may be thinking what is domain name:
  WIKIPEDIA define Domain Name as "A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet. Domain names are formed by the rules and procedures of the Domain Name System (DNS). Any name registered in the DNS is a domain name."

In simple words : it's just the website name such as facebook.com . It is registrated in DNS (Domain Name System) whis is just like the telephone directory which link to the ip adress of hosting company.  we will discuss about it in step 2.

 Many country provide country specific domain for their citizen for their personal purpose

2)Hosting your Website:

It is the procress of keeping your website online  . It is only possible  if you put it in the computer that is always online. Computer  that is always online  and can be used to host website is called host computer . There  are different companies that provide hosting for free for trial period . You can also pay for  your personal website

 

3)Designing:

If you have already known html and you may have done project in your school level. Designing part deals with the fornt end part of website .For this you have to learn HTML ,CSS ,JAVASCRIPT , BOOTSTRAP ,JQUERY.

4)Development:

This part deals with the back end development of website .For this you have to learn web programming language such as PHP ,ASP.NET etc If you want to create database driven website then you have to learn MY SQL

No comments:
Labels:

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>
No comments:
Labels:

GOOGLE

LIKE US

Webschool

CATEGORY

CONTACT US

Name

Email *

Message *