You need to include the CSS file in your HTML document before using it. There are multiple ways to include CSS in an HTML file, such as writing inline CSS, internal CSS, or including a CSS file.
Styles can be associated with your HTML document in different ways, such as:
- Inline CSS − The CSS styling is placed inside an HTML element tag, which has an effect only on that element.
- Internal CSS − The CSS styling is placed inside the <style> tag, under the <head> tag.
- External CSS − The CSS styling is placed in an external file (.css extension) inside the <link> tag, under the <head> tag.
Embedded / Inline CSS – <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
Here is the generic syntax −
<element style = "...style rules....">
The value of style attribute is a combination of style declarations separated by semicolon (;).
Example
The following example demonstrates the use of inline css styling:
<html><head></head><body><div style = "border: 5px inset gold; background-color: black; width: 300px; text-align: center;"><h1 style = "color:#36C;">Hello World !!!</h1><p style = "font-size: 1.5em; color: white;">This is a sample CSS code.</p></div></body></html>
Internal CSS – <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>…</head> tag. Rules defined using this syntax will be applied to all the elements available in the document.
Syntax
Here is the generic syntax −
<head><style type = "text/css">h1 { color: #36CFFF; }p { font-size: 1.5em; color: white; }</style></head>div { border: 5px inset gold; background-color: black; width: 300px; text-align: center; }
Example
The same style is applied in the following example:
<html><head><style type = "text/css">h1 { color: #36CFFF; }p { font-size: 1.5em; color: white; }</style></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>div { border: 5px inset gold; background-color: black; width: 300px; text-align: center; }
Attributes associated with <style> elements are −
| Attribute | Possible Values | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is a required attribute. |
| media | screenttytvprojectionhandheldprintbrailleauralall | Specifies the device the document will be displayed on. Default value is all. This is an optional attribute. |
External CSS – <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 can define all the style rules in this text file and include this file in any HTML document using the <link> element.
Syntax
Here is the generic syntax of including external CSS file −
<head><link type = "text/css" href = "..." media = "..." /></head>
Attributes associated with <style> elements are −
| Attribute | Possible Values | 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 required. |
| media | screenttytvprojectionhandheldprintbrailleauralall | Specifies the device the document will be displayed on. Default value is all. This is an optional attribute. |
Create a style sheet file with a name ext_style.css having the following rules −
h1 {
color: #36CFFF;
}
p {
font-size: 1.5em;
color: white;
}
div {
border: 5px inset gold;
background-color: black;
width: 300px;
text-align: center;
}
Example
Now you can include this file ext_style.css in any HTML document as follows −
<head><link type = "text/css" href = "ext_style.css"/></head>
Following example demonstrates how to include an external css file in an HTML file:
<html><head><link type = "text/css" href = "ext_style.css"/></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>
Imported CSS – @import Rule
The @import is used to import an external stylesheet in a manner similar to the <link> element. The only key point to remember is, the @import rule must be declared on top of the document. Here is the generic syntax of @import rule.
Syntax
Refer the following two css files − style.css and demostyle.css
style.css
body {
background-color: peachpuff;
}
demostyle.css
@import url("style.css");
h1 {
color: #36CFFF;
}
p {
font-size: 1.5em;
color: white
}
div {
border: 5px inset gold;
background-color: black;
width: 300px;
text-align: center
}
You just need to include the stylesheet, that has @import rule defined, in the <link> tag in the HTML document as follows −
<head><link type = "text/css" href = "demostyle.css"></head>
Example
Following example demonstrates the use of @import rule, where one stylesheet can be imported into another stylesheet:
<html><head><link type = "text/css" href = "demostyle.css"></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>
CSS Rules Overriding
We have discussed different 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 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> tags will override rules defined in any external style sheet file.
- Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.
CSS Comments Inclusion
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /*…..this is a comment in style sheet…..*/.
You can use /* ….*/ to comment multi-line blocks.
Example
<html><head><style>h1 { color: #36CFFF; }</style></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>p { font-size: 1.5em; color: red; /* This is a single-line comment */ text-align: center; } div { border: 5px inset gold; /* This is a multi-line comment background-color: black; width: 300px; text-align: center; */ }
