saftutorials.com
HTML Class Tutorial

HTML Class is attribute of HTML tag. Its use with HTML tag like: <div>, <p>, <span> and also <table> and all HTML tag. HTML Class is most important element of website. If any developer want to develop a website so his should be complete learn of HTML Class. An Class define only one and it's declare multiple place.

How to declare HTML Class?

HTML Class declare in a Style. The first of step for declare HTML Class write <style> div.classname </style>.


Basic Structure of HTML Class
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Class Tutorials</title>
<style type="text/css">
  div.box
  {
    width:95%;
    float: left;
    padding: 20px;
    background:#999;
    border:2px solid red;
    margin-top:20px;
  }
</style>
</head>
<body>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>

</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
HTML Class with Border Radius
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Class Tutorials</title>
<style type="text/css">
  div.box
  {
    width:95%;
    float: left;
    padding: 20px;
    background:#999;
    border:2px solid red;
    margin-top:20px;
    border-radius: 40px;
  }
</style>
</head>
<body>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>

</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
HTML Class one declare multiple call
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Class Tutorials</title>
<style type="text/css">
  div.box
  {
    width:15%;
    height: 200px;
    float: left;
    padding: 20px;
    background:#ddd;
    border:2px solid red;
    margin:5px;
    border-radius: 4px;
    font-size: 14px;
  }
</style>
</head>
<body>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<div class="box"> <!-- Here declare your class -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<div class="box"> <!-- Here declare your class -->
  <img src="../uploads/sample.png" width="100%" height="100%">
</div>

</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic