CSS -INCLUSION
There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.
Here is the generic syntax:
<head>
<style>
. . . . . . . . . // Style Rule
</style>
</head>
Example
Following is an example of embed CSS based on the above syntax:
<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.
Syntax:
<element style="...style rules....">
Ex:
<h1 style ="color:#36C;"> This is inline CSS </h1>
out put:
This is inline CSS
External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href=" . . . " rel="stylesheet" />
</head>
Ex:
Consider a simple style sheet file with a name mystyle.css having the following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows:
<head>
<link type="text/css" href=" mystyle.css " rel="stylesheet" />
</head>
There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.
Here is the generic syntax:
<head>
<style>
. . . . . . . . . // Style Rule
</style>
</head>
Example
Following is an example of embed CSS based on the above syntax:
<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.
Syntax:
<element style="...style rules....">
Ex:
<h1 style ="color:#36C;"> This is inline CSS </h1>
out put:
This is inline CSS
External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href=" . . . " rel="stylesheet" />
</head>
Ex:
Consider a simple style sheet file with a name mystyle.css having the following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows:
<head>
<link type="text/css" href=" mystyle.css " rel="stylesheet" />
</head>
CSS Rules :
We have discussed three ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.
Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>... </style> tags or the rules defined in any external style sheet file.
Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file.
Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be applied only when the above two rules are not applicable.
CSS COMMENTS:
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in the style sheet. You can simply put your comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
Ex:
/* This is an external style sheet file */
h1, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
0 comments:
Post a Comment