Inline Style:
<p
style="color:blue;background-color:red;font-size:30px;font-family:verdana;margin-left:20px;text-align:center;">
Internal Style Sheet:
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
External Style sheet:
<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css" />
</head>
*save all the external style sheets with '.css' extension.
External Style sheet Example1:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
</html>
External Style sheet Example2:
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to
specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with
id="para1":
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Note: Do NOT start an ID name with a number! It will not work in
Mozilla/Firefox.
The class Selector
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on several
elements.
This allows you to set a particular style for many HTML elements with
the same class.
The class selector uses the HTML class attribute, and is defined with a
"."
In the example below, all HTML elements with class="center"
will be center-aligned:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
In the example below, all p elements with class="center" will be center-aligned:
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
*************************
<!DOCTYPE
html>
<html>
<head>
<style
type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS
background-color example!</h1>
<div>
This is a text
inside a div element.
<p>This
paragraph has its own background color.</p>
We are still in the
div element.
</div>
</body>
</html>
No comments:
Post a Comment