CSS Stands for Cascading Style Sheet. CSS is an
advance tool for styling web pages which allow web designers to design
professional web pages.
1.1
Internal CSS – The Stylesheet
which defined within html document.
1.2
External CSS – This
type of style is ideal when the style applied to many pages. In this method
style definition is stored in separate file.
1.3
Inline CSS – In Inline
Style sheet we can use style element as an attribute of any tag.
Internal
Style Sheet
<html>
<title>Internal
CSS</title>
<style>
h2{
color: purple; text-align:center;
background-color:pink; font-family:Arial;
}
</style>
</head>
<body>
<h2>This
is example of internal CSS</h2>
</body>
</html>
External Style Sheet
<html>
<html>
<html>
<html>
<html>
<html>
External Style Sheet
Style.css
h2{
font-family:Monotype
Corsiva;
color:blue;
text-align:center;
}
p{
background-color:yellow;
color:red;
text-decoration:underline;
}
External.html
<html>
<head>
<title>External
CSS</title>
<link
rel="stylesheet" type="text/css" href="ext.css">
</head>
<body>
<h2>This
is example of External CSS</h2>
<p>In
external css we link the .css file to html document.</p>
</body>
</html>
Inline
Style Sheet
<html>
<head>
<title>Inline
Css</title>
</head>
<body
style="background-color:yellow;">
<h2
style="background-color:red;font-family:Arial">This is a
heading</h2>
<p
style="background-color:green;">This is a paragraph.</p>
<p>This
is a paragraph.</p>
</body>
</html>
</html>
Class
Selector
<html>
<head>
<title>Class
Selector</title>
<style>
.abc{
color: red;
background-color:pink; font-family:Arial; }
.pqr{
font-size:12pt;font-weight:bold;text-align:justify }
</style>
</head>
<body
class="abc">
<p
class="pqr">This paragraph style define using the class</p>
</body>
</html>
ID
Selector
<html>
<head>
<title>ID
Selector</title>
<style>
#abc{
color: blue;
background-color:yellow; font-family:Times
New Roman; font-style:italic;}
</style>
</head>
<body>
<p
id="abc">This paragraph style define using the ID
selector</p>
</body>
</html>
Contextual
Selector
<html>
<head>
<title>Contextual
Selector</title>
<style>
p
i{color:green}
h1
{color:red}
</style>
</head>
<body>
<h1>Using
<i>Selector</i></h1>
<p>Contextual
<i>selector</i></p>
<i>selector</i>
</body>
</html>
Grouping
Selector
<html>
<head>
<title>Grouping
Selector</title>
<style>
p,h1{font-family:arial;color:red;background-color:yellow}
</style>
</head>
<body>
<h1>Using
Selector</h1>
<p>Contextual
selector</p>
<h2>This
is Heading Level 2 </h2>
</body>
</html>
Positioning
using CSS
Absolute
position
<html>
<head>
<title>Absolute
position</title>
<style>
h1
{position:absolute;top:150px;left:150px}
p
{position:absolute;top:75px;left:75px}
</style>
</head>
<body>
<h1>This
is heading level 1 which is absolutely set to 150px at top and 150px at left</h1>
<p>This
is paragraph which is absolutely set to 75px at top and 75px at left</p>
</body>
</html>
Text
Decoration
<html>
<head>
<title>Text
Decoration</title>
<style
type="text/css">
h1
{text-decoration:overline}
h2
{text-decoration:line-through}
h3
{text-decoration:underline}
h4
{text-decoration:blink}
h5
{text-decoration:none}
</style>
</head>
<body>
<h1>This
is Heading 1</h1>
<h2>This
is Heading 1</h2>
<h3>This
is Heading 1</h3>
<h4>This
is Heading 1</h4>
<h5>This
is Heading 1</h5>
</body>
</html>
</html>