Do you want to describe your html file and display it on the web page with some styles. If your answer is yes….
Just use
CSS…
What is
CSS?
CSS is
expanded as Cascading Style sheets which allows the user to style your web
pages.
How to
do it???
The user
follows the syntax
Selector { Property1: Value1; …………; Property n:Value n;}
You can add the CSS code to style your web pages by
three types. They are as follows
- ·
Inline CSS
- ·
Internal CSS
- ·
External CSS
Now, each and every CSS type is explained with code.
Inline CSS:
This is the simple way of adding styles to your html
document.
There is an element called “Style” in paragraph and
heading style tags. You can set the
properties with some value for this method.
Program:
<!DOCTYPE html>
<html>
<body>
<h2 style="color:red;"> This is the
example of Inline CSS </h2>
<h3 style="color:blue;">This is the
sample text </h3>
</body>
</html>
The output is given below….
 |
| Inline CSS |
Now, Internal
usage of CSS is given below.
Internal
CSS:
When you
want to use the styling for a single HTML page, internal CSS is recommended.
Here, you can code in separate
<Style> tag.
For eg,
<!DOCTYPE
html>
<html>
<head>
<style>
body
{background-color:green;}
h1 {color:yellow;}
p {color: white;font-style:Italic;
font-size:25pt;}
</style>
</head>
<body>
<h1>
Internal CSS </h1>
<p>This
is a Sample paragraph.<br>
This
includes the text in Italic style </p>
</body>
</html>
Output:
Internal CSS
This is a Sample paragraph.
This includes the text in Italic style
The final type of CSS is External CSS.
External
CSS:
When you
want to use CSS file for multiple web pages ,you can create a single CSS file
and link that file to all html files.
First, create
a CSS file “external.css” in c:\program folder.
body
{
background:color:Yellow;
}
H2
{
font-size:25pt;
font-family: timesnewroman;
color:red;
}
P
{
Font-size:20pt;
Font-family:
Arial;
Color:
green;
}
Externalcss.html
<!DOCTYPE
html>
<html>
<head>
<link rel="stylesheet"
href="c:\program\external.css">
</head>
<body>
<h2>
External CSS</h1>
<p>
This is sample paragraph with different font family</p>
</body>
</html>
output:
 |
| External CSS |
No comments:
Post a Comment