Hello dear readers! welcome back to another section of my tutorial on Css. In my last tutorial guide, i talked about the Css syntax with numerious examples. Now in this tutorial guide, we are going to be discussing about the inclusion of Css to our various Html document i.e how Css is included to Html documents.
There are four ways to associate styles with your Html document. Most frequently used methods are inline and external Css. Now lets take a look at this four ways of associating styles with the Html documents one after the
other.
Embedded CSS - The <style> Element
You can put your Css rules into a 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 elements available in the document. Below is the syntax:
RECOMMENDED: Css Syntax
<head>
<style type="text/css" media="...">
Style Rules ............................
</style>
</head
<style type="text/css" media="...">
Style Rules ............................
</style>
</head
Attributes
Attributes associated with <style> element are:
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is required attribute. |
| media |
screen
tty
tv
projection
handheld
print
braille
aural
all
| Specifies the device the document will be displayed on. Default value is all. This is an optional attribute. |
Following is a short example of embeded Css based on the above syntax:
<html>
<head>
<style type="text/css" media="all">
body {
background-color: #444444;
}
p {
color: pink;
}
</style>
</head>
<body>
<p>
The background color of this document will be ash, and the color of
this paragraph will be pink.
</p>
</body>
</hrml>
<head>
<style type="text/css" media="all">
body {
background-color: #444444;
}
p {
color: pink;
}
</style>
</head>
<body>
<p>
The background color of this document will be ash, and the color of
this paragraph will be pink.
</p>
</body>
</hrml>
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. Here is the syntax below:
RECOMMENDED: Html Fonts
<html element style=".....style rule.....">
Attributes
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolon (;). |
Example
Following is the example of inline Css based on the sytax given above:
<html>
<head>
</head>
<body>
<h4 style="color: pink;">
This is an inline css
</h4>
</body>
</html>
<head>
</head>
<body>
<h4 style="color: pink;">
This is an inline css
</h4>
</body>
</html>
External CSS - The <link> Element
The <link> element can be uused to include an external CSS file into your Html document.
An external Css is a seperate text file with .css extension. You define all the Style rules within this text file and then you can include this file into any Html document using <link> element.
Here is the syntax of including external Css file:
<head>
<link type="text/css" href="...." media="...." />
</head>
<link type="text/css" href="...." media="...." />
</head>
Attributes
Attributes associated with <link> elements are:
| Attribute | Value | Description |
|---|---|---|
| type | text css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required. |
| media |
screen
tty
tv
projection
handheld
print
braille
aural
all
| Specifies the device the document will be displayed on. Default value is all. This is optional attribute. |
Example
Consider a simple style sheet file with a name style.css having the following rules:
h1, h2, h3 {
color: #000000;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text=transform: uppercase;
}
color: #000000;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text=transform: uppercase;
}
Now you can then include this file style.css into any Html document as follows:
RECOMMENDED: Css Introduction
<head>
< link type="text/css" href="style.css" media="all" />
</head>
< link type="text/css" href="style.css" media="all" />
</head>
Imported CSS - @import Rule
The @import rule is used to import an external stylesheet in a manner similar to the <link> element. Here is the syntax of @import rule.
<head>
<@import "URL";
</head>
<@import "URL";
</head>
Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:
<head>
<@import url("URL");
</head>
<@import url("URL");
</head>
Example
Following is the example showing you how to import a syle sheet file into a Html document:
<head>
@import "style.css" ;
</head>
@import "style.css" ;
</head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in a HTML document. Below 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 rules defined in any external style sheet file.
- Any rule defined in <style>....</style> tag 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.
RECOMMENDED: Scrollbar Css
Handling Old Browsers
There are still many old browsers that do not support Css. So let us be extremely careful while writing our Embedded Css in a Html document. The following example shows how to use comment tags to hide Css from older browsers:
<style type="text/css">
<!--
body > td {
color: pink;
}
-->
</style>
<!--
body > td {
color: pink;
}
-->
</style>
CSS Comments
You can use /* .....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
Example
/* This is an external style sheet file */
h1, h2, h3 {
color: #000000;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text=transform: uppercase;
}
/* end of style rules. */
h1, h2, h3 {
color: #000000;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text=transform: uppercase;
}
/* end of style rules. */
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the CSS Measurement Units.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.