CSS Include
CSS Inclusion
There are four ways to associate styles with an HTML document. The most common methods are inline CSS and external CSS.
Inline CSS – The <style> Element
You can place CSS rules into an HTML document using the <style> element. This element is placed within the <head>...</head> tags. Rules defined using this syntax apply to all available elements in the document. The following is a general syntax example:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
It will produce the following result −
Properties
The properties associated with the <style> element are as follows:
| Property | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as the content type (MIME type). This is a required attribute. |
| media | screen tty tv projection handheld braille aural all |
Specifies the devices on which the document will be displayed. The default value is all. This attribute is optional. |
Inline CSS – The style Attribute
You can use the style attribute on any HTML element to define style rules. These rules will apply only to that element. The following is a general syntax example:
<element style = "...style rules....">
Attributes
| Attribute | Value | Description |
|---|---|---|
| style | Style rules | style The value of the attribute is a set of style declarations separated by semicolons (;). |
Example
The following is an example of inline CSS based on the above syntax −
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
It will produce the following −
>
External CSS – The <link> Element
<link> The element can be used to include external style sheet files in an HTML document.
An external style sheet is a separate text file with a .css extension. You define all your style rules in this text file and then include it in any HTML document using the <link> element.
Here is an example of the general syntax for including an external CSS file:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Attributes
Attributes associated with the <style> element include:
| property | value | description |
|---|---|---|
| type | text css | Specifies the style sheet language as the content type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file with the style rules. This attribute is required. |
| media | screen tty tv projection handheld braille aural all |
Specifies on which devices the document will be displayed. The default value is all. This is an optional attribute. |
Example
Consider a simple style sheet file called mystyle.css that contains 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" media = " all" />
</head>
Imported CSS – The @import Rule
@import is used to import external style sheets in a similar manner to the <link> element. Below is the general syntax of the @import rule.
<head>
@import "URL";
</head>
Here, URL is the URL of the style sheet file that contains the style rules. You can also use an alternate syntax.
<head>
@import url("URL");
</head>
Example
The following is an example showing you how to import a style sheet file into an HTML document −
<head>
@import "mystyle.css";
</head>
CSS Rule Overriding
We have discussed four ways to include style sheet rules in an HTML document. The following are the rules that override any style sheet rule.
- Any inline style sheet has the highest precedence. Therefore, it will override any rules defined within the
<style>...</style>tags or any rules defined in any external style sheet file. - Any rules defined within the
<style>...</style>tags will override rules defined in any external style sheet files. - Any rules defined in an external style sheet file have the lowest precedence, and rules in this file are applied only if the two rules above do not apply.
Dealing with Old Browsers
There are still many old browsers that do not support CSS. Therefore, you should be careful when writing embedded CSS in HTML documents. The following code snippet shows how to use comment tags to hide CSS for compatibility with old browsers—
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>
CSS Comments
There are times when you may need to add additional comments to your style sheets. Adding comments to a stylesheet is easy. You enclose the comment within /*.....This is a stylesheet comment.....*/.
You can use /* ....*/ to comment out a multi-line block of code, just like in C and C++ programming languages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
It will produce the following results −
