There are three levels of cascading style sheets -
- Inline style sheet
- Document level style sheet
- External level style sheet
Inline Style Sheet
The inline cascading style sheet is a kind of style sheet in which the styles can be applied to HTML tags. This tag can be applied using following rule.
Tag
{
property: value
}
For example:
<p style="font-family: Arial; color: blue" >
Here for the tag p two properties are used such as font-family and color and those associated with the values such as Arial and blue respectively.
If we want to use more than one property then we have to use separator such as semicolon. In the following HTML document we have used CSS.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is simple text</p>
<p style="font-size: 30pt;font-family:Arial" >This text is different</p>
<p style="font-size: 40pt;color:#444" >This text is colored</p>
</body>
</html>
In this document, in the body section the style sheets are created. In this section first of all we have displayed a simple text This is simple text. There is no style to this sentence. In the next line, we have applied style in which font-size is set to the font-size of 30 point and font-family is set by the font name "Arial" This can be very well illustrates in output.
Thus the inline style sheet specification appeares within the opening tag and can be applied in the contents of that tag.
Document Level Style Sheet
This type of style sheet appeares only in the head section and in the body section newly defined tags are used with the actual contents.
For example
In the following HTML script we have defined h1, h2 and p selectors. For each of these selectors different property and values are set. Such setting will help us to represent our web page in some decorative form. The important thing while writing document level style sheet is that we should mention the style type="text/css" in the head section. By this the browser will come to know that the program is making use of cascading style sheet.
<html>
<head>
<style type="text/css">
h1{
font-family: Arial;
color: red;
}
h2{
font-family: Arial;
color: green;
left: 20px;
}
p{
font-family:verdana;
font-size:14pt;
}
</style>
</head>
<body>
<h1>
<center>
This page is created using Document Level Style Sheet
</center>
</h1>
<h2>
This line is align left and green colored.
</h2>
<p>
The embedded style sheet is the most commonly used style sheet.
</p>
</body>
</html>
In above program, we have defined all the selectors in the head sections only. And these HTML elements are then used along with the web page contents. The setting defined in the selectors will affect the web page contents. This can be very well illustrates in output.
External Style Sheet
Sometimes we need to apply particular style to more than one documents in such cases external style sheets can be used. The central idea in this type of style sheet is that the desired style is stored in one .css file will be applied to all these web pages.
Here is a sample program in which external style sheet is used.
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1 class="special" ><center> This page is created using External style sheet </center></h1>
<h2>
This line is aligned left and red colored.
</h2>
<p>'
The External style sheet is the compact representation of CSS.
</p>
</body>
</html>
The Cascading style sheet ex1.css can be
<!--The file name ex1.css and can be opened in notepad--!>
h1{
font-family: Arial;
}
h2{
font-family: times new roman;
color: red;
left: 20px;
}
p{
font-size:14pt;
font-family: Monotype Corsiva;
}
When we want to link the external style sheet we have to use <link> tag which is to be written in the head section.
- link tells the browser some file must be linked to the page.
- rel="styelsheet" tells the browser that this linked thing a style sheet.
- href=" " denotes the path name of styel sheet file.
- type="text/css" tells the browser that what it is reading is text which is affected by the cascading style sheet. This can be very well illustrates in output.
0 comments:
Post a Comment