CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.
There are many ways to include CSS file which are listed below:
- External style sheet (Using HTML <link> Tag): External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages. The link tag is used to link the external style sheet with the html webpage.
<link rel="stylesheet" href="style.css">
- External style sheet (Using the @import At-Rule): At-rule method must be included either within <style> tag or else inside the style sheet.
<style> @import url(style.css); </style>
- Internal style sheet (Using the <style> Element): This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
<style>
element {
// CSS property
}
</style>- Inline Style Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute. It is used to apply a unique style for a single element.
<h1 style="style property">Geeksforgeeks</h1>
Best Approach: The External Style Sheet (using HTML <link> Tag) is the best method which is used to link the element. Maintaining and re-using the CSS file across different pages is easy and efficient. The <link> tag is placed in the HTML <head> element. To specify a media type=”text/css” for a Cascading Style Sheet <type> attribute which is used to ignore style sheet types that are not supported in a browser.
Example 1: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">A computer science portal for geeks</p>
</div>
</body>
</html>
|
Output:
Example 2: This example describes the Internal or Embedded CSS.
<!DOCTYPE html> <html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">A computer science portal for geeks</p>
</div>
</body>
</html>
|
Output:
Example 3: This example describes the inline CSS.
<!DOCTYPE html> <html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
GeeksForGeeks</p>
</body>
</html>
|
Output:
@import rule: The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration.
Characteristics of @import:
- The @import at-rule is used to import a style sheet into a HTML page or another style sheet.
- The @import at-rule is also used to add media queries, therefore import is a media-dependent.
- It always to be declared at the top of the document.
Syntax:
@import url|string list-of-mediaqueries;
Property values:
- url|string: A url or a string represents the location of the resource to be imported. The url may be relative or absolute.
- list-of-mediaqueries: The list of media queries condition the application of the CSS rules defined in the linked URL.
Example 1: Consider the two CSS files as shown below.
-
icss.css
@import url("i1css.css");
h1 {
color: #00ff00;
}-
i1css.css
h1 {
text-decoration: underline;
font-size:60px;
}
p {
padding-left: 20px;
font-size: 60px;
}
<!DOCTYPE html> <html>
<head>
<title>WebPage</title>
<link href="icss.css" rel="stylesheet">
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html><html>
<head>
<title>@import property</title>
<style type="text/css">
@import url(
</style>
</head>
<body>
<div id = "Geeks">
<h1>GeeksforGeeks</h1>
<h2>External style sheet (Using @import At-rule)</h2>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Opera 3.5
- Safari 1.0