| Previous | Home | Next |
Let here we see the styling with help of examples. styling of web page can be done in various ways we are here discuss few types of styling
Background Styling
<html>
<head>
<style type="text/css">
h1
{
background-color: silver;
}
p
{
background-color:lightblue;
}
div
{
background-color: pink;
}
</style>
</head>
<body>
<h1>This is background of html file</h1>
<div>
This is a text inside a div element.
<p>This is paragraph of html has it's own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Text Styling
Text coloring ,text alignment ,and text decoration, font style.
<html>
<head>
<title> this is text styling</title>
<style type="text/css">
body
{
background color: light
blue;
}
h1
{
color: green;
font-size:30pt;font-weight:
times roman; text-align: center;
}
p
{
color: red;
font-size:20;font-weight:
times roman ;font-decoration: none; text-align:
center;
}
</style>
</head>
<body>
<h1> This is stylig of text in html </h1>
<p> this para tells us about the styling of the text of html document</p>
</body>
</html>
Font Styling
Font styling consists font size, font color, font style, font family
<html>
<head>
<title> font styling</title>
<style type ="text/css">
h1
{
font- family:" times new roman", times ,serif;
}
h2
{
font-family: Aerial;
}
p.font{font-size:20px;
font-style: italic;}
p.fontstyle{font-size:20px;
font-style:bold;}
</style>
</head<>
<body>
<h1>This is font styling</h1>
<h2>this is another heading</h2>
<p class="font"
> this is the paragraph which shows the font styling of the text</p>
<p class="font style"
> this is another paragraph shows the font styling of the text</p>
</body>
</html>
Link Styling
link is used to link web pages. while styling link provide style to the links colors etc.
<html>
<head>
<title> This is link in css</title>
<style type="text/css"
a: link {color: greens;}
/* unvisited link */
a: visited {color: pink;}
/* visited link */
a: hover {color: light
green;} /* mouse over link */
a: active {color: red
;} /* selected link */
</style>
</head>
<body>
<p><b><a href="www.r4r.co.in"
target="_blank"
>This is a link</a></b></p>
<p><b>Note:</b> a: hover MUST come after a: link and a: visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a: active MUST come after a: hover in the CSS definition in order
to be effective.</p>
</body>
</html>
Table Styling
Table styling is the way to style the table using table borders .by increasing or decreasing the width of table. following are the border styling of table.
None:it defines border of table none means no border is present there.
Solid: it makes the border of the table in solid format.
Dotted: is used to make the border of table dotted.
Dashed: makes the border of the table dashed.
Double: shows the border of the table in double format
Inset: shows the border of table in 3D inset format.
Outset: shows the border of the the table in 3D outset format.
ridged: shows the table in 3D ridged form ,it depends on the color.
Inset: shows the border of table in 3D inset format.
Outset: shows the border of the the table in 3D outset format.
ridged: shows the table in 3D ridged form ,it depends on the color.
<head>
<title> border style</title>
<style type="text/css">
p.none { border-style: none;}
p.solid{border-style:solid;}
p.dashed{border-style:dashed;}
p.inset{border-style:inset;}
p.outset{border-style:outset;}
p.ridge{borde-style:ridged;}
</style>
</head>
<body>
<p class="none">table style is none</p>
<p class="solid"> table style is solid</p>
<p class="dashed"> table style is dashed</p>
<p class="inset"> table style is inset </p>
<p class="outset">table style is outset</p>
<p class="ridge"> table style is ridge</p>
</body>
</html>
Example which shows the table styling
<html>
<head>
<style type="text/css">
#Employee
{
font-family:"times roman", Arial, Helvetica,
sans-serif;
width:100%;
border-collapse:collapse;
}
#Employee td, #Employee th
{
font-size:1em;
border:2px solid purple;
padding:3px 7px 2px 7px;
}
#Employee th
{
font-size:1.1em;
text-align:left;
padding-top :5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#Employee tr.alt td
{
color:#0000F0;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="employee">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th> Employee ID</th>
<th>Salary</th>
</tr>
<tr>
<td>Maria</td>
<td>John</td>
<td>10253</td>
<td>10000</td>
</tr>
<tr>
<td>Shweta</td>
<td>Sharma</td>
<td>10254</td>
<td>12000</td>
</tr>
</body>
</html>
| Previous | Home | Next |