HTML Page
Post date: Dec 31, 2017 9:14:07 AM
<html>
<head>
<title> Hello First html page</title>
<style>
p{
font-size:36px;
text-align:center;
}
.div1{
background-color:red;
width:100%;
height:60px;
}
.div2{
background-color:yellow;
width:100%;
height:60px;
}
</style>
</head>
<body>
<p style="color:blue ;font-size:24"> hello world </p> <!--inline-->
<div class="div1">
<h1 align="center">hello header</h1>
</div>
<div class="div2">
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
body {
background:red url("img_tree.png") no-repeat left top;<!--its call background shorthand property ;In this we can
use four property together
1.background-color
2.background-image
3.background-repeat
4.background-position;-->
margin-left: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
.r{
background-color:red;
}
#b{
background-color:blue;}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr class="r">
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr id="b">
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class="r">
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr id="b">
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
table, TD, th {
border: 1px solid black;
text-align:center;
}
table {
border-collapse: collapse;
border-radius:10px;
width: 500px;
height:300px;
}
th {
height: 50px;
}
.r{
background-color:red;
}
#b{
background-color:blue;}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr class="r">
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr id="b">
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class="r">
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr id="b">
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p:nth-child(2) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p:nth-child(odd) {
background: red;
}
p:nth-child(even) {
background: blue;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p:nth-child(3n+1) {
background: red;
}
<!--( an+b ) a represents a cycle size, n is a counter (starts at 0), and b is an offset value.-->
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</body>
</html>