Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

Internal Css in HTML :-   

We will create separate block of css under head section using <style type="text/css"></style>

We will define three different types of block under the .css file.

#blockname
{

}

.blockname
{

}

htmlelementblock
{

}


#block will be called by id selector

<div id="blockname"></div>

.block will be called by a class selector

<div class="blockname"></div>

html element block will be called automatically

p
{
   width:100px;
   color:yellow;
}

<p></p>



Example of Internal Css in HTML:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#header
{
height:100px;
background-color:#4867AA
}
#logo
{
         float:left;
         width:30%;
         height:75%;
         padding-top:10px;
         padding-left:160px;

}
#login{
float:right;
width:55%;
height:75%;
}
#logintable{

margin-left:100px;
margin-top:25px;
}
        #middlecontainer
        {
        height:650px;
        background-color:#EDF0F5;
        }
         #middleleft
        {
        float:left;
        height:100%;
        width:50%;
        border:1px solid red;
        }
         #middleleftfirst
        {
        margin-top:90px;
        margin-left: 100px;
        }
         #middleright
        {
        float:right;
        height:100%;
        width:49%;
        border:1px solid red;
        }
       #login input[type="button"]{

        background-color:blue;
        color:white;
        font-weight: bolder;
         border:0px ;
        }
       #login td{
         color:white;
        }
        a{
         color:white;
        }
       #middleleftfirst p{
        font-size: 27px;
        font-weight: bolder;
        color:blue;
        }
        #middleright tr{
        height: 50px;
        }
        .text1
        {
        height:35px;
        width:195px;
        border-radius: 3px;
        padding-left: 3px;
        }
        .text2{
        height:25px;
        width:400px;
        border-radius: 6px;
        }
        #birth
        {
        font-size: 22px;
        color: gray;
        font-weight: bolder;
        }
        #gender{
        font-size: 22px;
        color: gray;
        font-weight: bolder;
        }
        #middleright input[type="button"]
        {
        width: 200px;
        height: 35px;
        border-radius: 5px;
        background-color: green;
        }
         #middleright input[type="radio"]{
          color:black;
         }
        #footer{
        height:100px;background-color:#FFFFFF
        }
</style>
</head>
<body>
<div id="header">
<div id="logo">
 <img src="logo.jpg" width="210" height="75" />
</div>
<div id="login">
 <table id="logintable">
  <tr><td >Email or Phone</td><td style="color:white;">Password</td><td></td></tr>
  <tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="button" value="Log in" ></td></tr>
  <tr><td></td><td><a href="" >Forgotten account?</a></td><td></td></tr>
 </table>
</div>
</div>
<div id="middlecontainer">
<div id="middleleft">
<div id="middleleftfirst">
<p >Facebook helps you connect and share with the people in your life</p>
   <img src="bg.png" >
    </div>
</div>
<div id="middleright">
<h1>Create An Account</h1>
<h3>It's quick and easy.</h3>
<table >
<tr><td style="width:32%;"><input class="text1" type="text" placeholder="First name" /></td><td style="width:63%;"><input class="text1" type="text" name="" placeholder="Surname"/></td></tr>
<tr s><td colspan="2"><input class="text2" type="text" placeholder="Mobile number or email address "/></td></tr>
<tr ><td colspan="2"><input class="text2" type="password" placeholder="New Password"  /></td></tr>
<tr><td colspan="2" id="birth">Birthday</td></tr>
<tr ><td colspan="2"><select><option value="">10</option><option value="">Day</option><option value="">1</option><option value="">2</option></select><select><option value="">DEC</option><option value="">MONTH</option><option value="">Jan</option><option value="">Feb</option></select><select><option value="">1994</option><option value="">YEAR</option><option value="">2019</option><option value="">2018</option></select></td></tr>
<tr ><td colspan="2" id="gender">Gender</td></tr>
<tr ><td colspan="2"><input type="radio"   />Female <input type="radio"   />Male <input type="radio"   />Custom</td></tr>
<tr ><td colspan="2"><p>By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p></td></tr>
<tr ><td colspan="2"><input  type="button" value="Sign UP"   /></td></tr>
</table>
</div>
</div>
<div id="footer">

</div>
</body>
</html>




Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post