Adding style to HTML document:
Let's discuss adding styles to the document and what are all types of style sheets available in CSS.ln order to add styles to the HTML document, we have to add CSS style sheets with it. Different types of styles can be added to the HTML document, depending upon which kind of style sheets we are attaching.
There are three types of style sheets in CSS and they are:
- External Style Sheet
- Embedded Style Sheet
- Inline Style Sheet
External style sheet:
In the External stylesheet, Style information is written in the separate file and it is a reference from the HTML document. This type of style sheet is very useful when the same style is applied to a different document. As I already said that it is a reference from the HTML document, the external style sheet is linked by using the HTML <link> tag. The general form is
<link rel="stylesheet" type="text/css" href="mystyle.css>
This tag specifies that the style information to be used to display this document is stored in a file named "mystyle.css".It is inserted in the <head> section of an HTML document.
Sample program:
Main.html:
<html>
<head>
<title>sample of external style sheet</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>
style1.css:
h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}
2.Embedded style sheet:
Embedded Style Sheet is also known as an internal style sheet or document level style sheet.it should be used when a single document has a unique style.In this method,style information is placed under the <style> tag in the <head> section of an HTML page.
Sample program:
<html>
<head>
<title>sample program for internal style sheet</title>
<style type="text/css">
h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}
</style>
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>
3.Inline style sheet:
In the inline style sheet, Style information is in line using the style attribute. The style attribute may be applied to any BODY element including BODY itself. The attributes take as it values any number of CSS declarations, where each declaration is separated by a semicolon.
<html>
<head>
<title>sample program for inline style sheet</title>
</head>
<body>
<h1 style="font-family:'lucida handwriting';font-size:50pt;color:red;">welcome to my online help blog</h2>
</body>
</html>
No comments:
Post a Comment