Search This Blog

Showing posts with label CSS Programs Example. Show all posts
Showing posts with label CSS Programs Example. Show all posts

CSS Comment Example

CSS Comment Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
p {
color: green;
}

/* This is a multi-line comment */
</style>
</head>
<body>
<h1> CSS Comment Example </h1>
<p> CSS comments are not shown in the output </p>
</body>
</html>
OUTPUT
CSS Comment Example
No comments:
Labels:

CSS Navigation Bar With Background Color Example

CSS Navigation Bar With Background Color Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h1> Navigation Bar With Background Color Example </h1>
<p> Here we use Navigation Bar with background color property </p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
OUTPUT
CSS Navigation Bar With Background Color Example
No comments:
Labels:

CSS Navigation Bar With Display Example

CSS Navigation Bar With Display Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
li {
display: inline;
}
</style>
</head>
<body>
<h1> Navigation Bar With Display Example </h1>
<p> Here we use Navigation Bar with display inline property </p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
OUTPUT
CSS Navigation Bar With Display Example
No comments:
Labels:

CSS Navigation Bar Example

CSS Navigation Bar Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1> Navigation Bar Example </h1>
<p> Here we use Navigation Bar with List Style Type property </p>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> News </a></li>
<li><a href="#"> Contact </a></li>
<li><a href="#"> About </a></li>
</ul>
</body>
</html>
OUTPUT
CSS Navigation Bar Example
No comments:
Labels:

CSS Table With Caption Example

CSS Table With Caption Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, th, td {
border: 2px solid;
}

caption {
caption-side:bottom;
}
</style>
</head>
<body>
<h1> Table With Caption Example </h1>
<p> Here we give caption in table and we also select the way to display caption like top, bottom </p>

<table>
<caption> Table 11.3 Students </caption>
<tr>
<th> Firstname </th>
<th> Lastname </th>
</tr>
<tr>
<td> Amit </td>
<td> Ankit </td>
</tr>
<tr>
<td> Smith </td>
<td> Singh </td>
</tr>
</table>

</body>
</html>
OUTPUT
CSS Table With Caption Example
No comments:
Labels:

CSS Table With Padding Example

CSS Table With Padding Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, th, td {
border: 2px solid;
}

td {
padding:15px;
}
</style>
</head>
<body>
<h1> Table With Padding Example </h1>
<p> Here we use padding property in table td element </p>

<table>
<tr>
<th> Firstname </th>
<th> Lastname </th>
</tr>
<tr>
<td> Amit </td>
<td> Ankit </td>
</tr>
<tr>
<td> Smith </td>
<td> Singh </td>
</tr>
</table>

</body>
</html>
OUTPUT
CSS Table With Padding Example
No comments:
Labels:

CSS Table With Width Height Example

CSS Table With Width Height Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, th, td {
border: 2px solid brown;
}

table {
width: 40%;
}

th {
height: 30px;
}
</style>
</head>
<body>
<h1> Table With Width Height Example </h1>
<p> Here we use width and height property in table </p>

<table>
<tr>
<th> Firstname </th>
<th> Lastname </th>
</tr>
<tr>
<td> Amit </td>
<td> Ankit </td>
</tr>
<tr>
<td> Smith </td>
<td> Singh </td>
</tr>
</table>

</body>
</html>
OUTPUT
CSS Table With Width Height Example
No comments:
Labels:

CSS Table With Text Align Example

CSS Table With Text Align Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, th, td {
border: 2px solid brown;
width: 20%;
}

th, td {
text-align: right;
}
</style>
</head>
<body>
<h1> Table With Text Align Example </h1>
<p> Here we use text align property in table th and td elements </p>
<table>
<tr>
<th> Firstname </th>
<th> Lastname </th>
</tr>
<tr>
<td> Amit </td>
<td> Ankit </td>
</tr>
<tr>
<td> Smith </td>
<td> Singh </td>
</tr>
</table>
</body>
</html>
OUTPUT
CSS Table With Text Align Example
No comments:
Labels:

CSS Table With Background Color Example

CSS Table With Background Color Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, td{
border: 1px solid;
}

th{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h1> Table With Background Color Example </h1>
<p> Here we use background color property in table header </p>
<table>
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Roll No </th>
</tr>

<tr>
<td> Mohan </td>
<td> Rana </td>
<td> 17056 </td>
</tr>

<tr>
<td> Ankit </td>
<td> Jems </td>
<td> 15071 </td>
</tr>

<tr>
<td> Amit </td>
<td> SIngh </td>
<td> 16002 </td>
</tr>

</table>
</body>
</html>
OUTPUT
CSS Table With Background Color Example
No comments:
Labels:

CSS Table With Border Example

CSS Table With Border Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
table, th, td {
border: 2px solid brown;
}
</style>
</head>
<body>
<h1> Table With Border Example </h1>
<p> Here we use border property with brown color in table, th and td elements </p>
<table>
<tr>
<th> Firstname </th>
<th> Lastname </th>
</tr>
<tr>
<td> Amit </td>
<td> Ankit </td>
</tr>
<tr>
<td> Smith </td>
<td> Singh </td>
</tr>
</table>
</body>
</html>
OUTPUT
CSS Table With Border Example
No comments:
Labels:

CSS Create Link Box Example

CSS Create Link Box Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
a:link, a:visited {
display:block;
color:#FFFFFF;
background-color:blue;
width:100px;
text-align:center;
padding:2px;
text-decoration:none;
}

a:hover,a:active {
background-color:lightblue;
}
</style>
</head>
<body>
<h1> Create Link Box Example </h1>
<p> Here we use link tag < a > and we Create Link Box in our web pages </p>
<a href="#" target="_blank">This is a link</a>
</body>
</html>
OUTPUT
CSS Create Link Box Example
No comments:
Labels:

CSS Link With Hover Example

CSS Link With Hover Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
a:link{
background-color:orange;
}

a:hover {
background-color:white;
}
</style>
</head>
<body>
<h1> Link With Hover Example </h1>
<p> Here we use link tag < a > with hover in our web pages </p>
<a href="#" target="_blank"> This is a link </a>
</body>
</html>
OUTPUT
CSS Link With Hover Example
No comments:
Labels:

CSS Visited Link Example

CSS Visited Link Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
a:link{
background-color:orange;
}

a:visited{
background-color:blue;
}
</style>
</head>
<body>
<h1> Visited Link Example </h1>
<p> Here we use link tag < a > with visited in our web pages </p>
<a href="#" target="_blank"> This is a link </a>
</body>
</html>
OUTPUT
CSS Visited Link Example
No comments:
Labels:

CSS Active Link Example

CSS Active Link Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
a:link{
background-color:orange;
}

a:active{
background-color:black;
}
</style>
</head>
<body>
<h1> Active Link Example </h1>
<p> Here we use link tag < a > with active in our web pages </p>
<a href="#" target="_blank"> This is a link </a>
</body>
</html>
OUTPUT
CSS Active Link Example
No comments:
Labels:

CSS Link Color Example

CSS Link Color Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
a:link
{
color: orange;
}
</style>
</head>
<body>
<h1> Link Color Example </h1>
<p> Here we use link tag < a > in our web pages </p>
<a href="#" target="_blank"> This is a link </a>
</body>
</html>
OUTPUT
CSS Link Color Example
No comments:
Labels:

CSS Image Transparency Example

CSS Image Transparency Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
img {
opacity: 0.4;
}
</style>
</head>
<body>
<h1> Image Transparency Example </h1>
<p> Here we use image tag with opacity property in our web pages </p>
<img src="img\css.jpg" alt=" please refresh web page ">
</body>
</html>
OUTPUT
CSS Image Transparency Example

No comments:
Labels:

CSS Image With Width Height Example

CSS Image With Width Height Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
img {
width: 145px;
height: 130px;
}
</style>
</head>
<body>
<h1> Image With Width Height Example </h1>
<p> Here we use image tag with width and height property in our web pages </p>
<img src="img\css.jpg" alt=" please refresh web page ">
</body>
</html>
OUTPUT
CSS Image With Width Height Example
No comments:
Labels:

CSS Image With Border Example

CSS Image With Border Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
img {
border: 5px solid red;
}
</style>
</head>
<body>
<h1> Image With Border Example </h1>
<p> Here we use image tag with border property in our web pages </p>
<img src="img\css.jpg" alt=" please refresh web page ">
</body>
</html>
OUTPUT
CSS Image With Border Example
No comments:
Labels:

CSS Set image In UL Tag Example

CSS Set image In UL Tag Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
ul {
list-style-image: url('point.jpg');
}
</style>
</head>
<body>
<h1> Set image In UL Tag Example </h1>
<p> Here we replace bullet with image in our web pages </p>

<ul>
<li> Coffee </li>
<li> Tea </li>
<li> Coca Cola </li>
</ul>

</body>
</html>
OUTPUT
CSS Set image In UL Tag Example
No comments:
Labels:

CSS UL With List Style Example

CSS UL With List Style Example :
<!DOCTYPE html>
<html>
<head>
<title> kod4u </title>
<style type="text/css">
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.u {list-style-type: none;}
</style>
</head>
<body>
<h1> UL With List Style Example </h1>
<p> Here we use Different List Item Example in our web pages </p>

<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>


<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
OUTPUT
CSS UL With List Style Example
No comments:
Labels:
Subscribe to: Posts (Atom)