HTML

CSS blocks-and-menus

In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site.
Below are the some of examples you can refer .
Creating beautiful hyperlink buttons with CSS blocks.
Example 1.

<html>
<head>
<style> 
#corner1{
  border-radius: 15px 50px 30px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 15px 50px 30px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 15px 50px 30px 5px;
   background: red;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 50px 30px 5px;
   background: cyan;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}
</style>
</head>
<body>
<p id="corner1"> About us </p>
<p id="corner2"> Contact us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> siteMap </p>
</body>
</html>

output of the above code is:

Example 2.

<html>
<head>
<style> 
#corner1{
  border-radius: 20px 20px 0px 0px;
   background: khaki;
   padding: 20px; 
   width: 950px;
   height: 25px; 
background-image: url("ubuntu.png");
}

#corner2{
  border-radius: 15px 15px 15px 15px;
   background: skyblue;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner3{
   border-radius: 15px 15px 15px 15px;
   background: green;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 15px 15px 15px;
   background: magenta;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   background: red;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-image: url("solid.jpg");
background-color: blue;
}
</style>
</head>
<body>
<p id="corner1"><marquee> Hello world </marquee> </p>
<p id="corner2"> Hello world </p>
<p id="corner3"> Hello world </p>
<p id="corner4"> Hello world </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
<img src="d:\web-design.jpg" id="corner5">
<h3 id="corner4"> Welcome </h3>
</body>
</html>

output:

Example 3.

<html>
<head>
<style> 
#corner1{
  border-radius: 35px 15px 50px 5px;
   background: khaki;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 35px 15px 50px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<p id="corner1">Home </p>
<p id="corner2"> About us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> Contact us </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
</body>
</html>

Output:

Example 4.

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ff0000;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
</style>
</head>
<body>
<h1> CSS Blocks </h1>
<div class="img">
 <a target="f3" href="wp2.html"><img src="ubuntu.png" width="110" height="90"></a>
 <div class="desc">Ubuntu, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp3.html"><img src="solid.jpg" alt="Solid" width="110" height="90"></a>
 <div class="desc">Solid, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp4.html"><img src="java-logo.jpg" alt="java" width="110" height="90"></a>
 <div class="desc">Java,  a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp5.html"><img src="web-design.jpg" alt="web" width="110" height="90"></a>
 <div class="desc">web, a description of the image here</div>
</div>

</body>
</html>

output:

Example 5. Table with CSS properties.

<html>
<head>
<style>
table, td, th {
    border: 5px solid blue;
color:black;
}

th {
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>Ramu</td>
    <td>Gopi</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Suman</td>
    <td>Rastogi</td>
    <td>Indore</td>
  </tr>
  <tr>
    <td>Kevin</td>
    <td>Saman</td>
    <td>Delhi</td>
  </tr>
</table>
</body>
</html>

output:

 

SKB

Leave a Reply

Your email address will not be published. Required fields are marked *