CSS

adplus-dvertising
Some Examples of CSS
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