Note for students: Adding CSS in a webpage or Specifying CSS in a webpage or Types of CSS, all of them refer to this article and means the same.
Introduction
There are different ways to specify style information for the HTML elements in a web page. Each method has its own advantages and disadvantages over the other methods. The different ways in which we can specify the style information are:
- Inline CSS
- Embedded CSS (Document Level CSS)
- Imported CSS
- External CSS
Inline CSS
In Inline CSS, the style information is specified inline i.e., within the HTML tag. We will use the style attribute of a HTML tag to specify the style information using Inline CSS. The syntax for Inline CSS is as shown below:
<tagname style=“property-name:value[;]”>Content</tagname>
An example for specifying style information Inline CSS is given below:
<p style=”color:red;font-weight:bold”>Content</p>
The advantage of Inline CSS is, for a single web page with minimal content, it is easy to change the style information. The disadvantage is, for a website containing multiple web pages, it becomes difficult to change the style information as we have to parse through each tag and change the style information.
In the above example, the content of all the <p> tags in the web page are affected by the above style information. The color of the paragraph’s content turns red and displayed in bold font.
Embedded CSS
Using Embedded CSS, the style information is specified in the head section of the web page. In this method, the style information is enclosed within the <style> and </style> tags which are placed in the head section. The syntax for Embedded CSS is as shown below:
<head>
<style type=”text/css”>
selector
{
Property-name 1: Value;
Property-name 2: Value
}
</style>
</head>
An example for specifying style information Embedded CSS is given below:
<head>
<style type=”text/css”>
p
{
color : red;
font-weight : bold
}
</style>
</head>
The advantage of Embedded CSS is, the style information of the HTML elements is separated and is placed in the head section. This will make it easy to find and change the style information when needed.
The disadvantage is, in a website with multiple web pages, it is still difficult to change the style information using Embedded CSS as we have to open each web page and change the style information.
Imported CSS
Imported CSS is similar to External CSS. In Imported CSS, the style information is specified in another file apart from the web page and linked to the web page using the import statement which will be placed inside the <style> and </style> tags in the head section.
While using the import statement, we must remember to declare the import statement as the first line inside the <style> and </style> tags. The syntax for specifying the style information using Imported CSS is as shown below:
<head>
<style>
@import url(“style.css”);
</style>
</head>
or
<head>
<style>
@import “style.css”;
</style>
</head>
We can specify multiple import statements in the head section. The style sheets (.css files) which are specified later will have higher preference (priority) over the previous style sheets. An example for specifying style information using Imported CSS is as shown below:
Style1.css
p
{
color : red;
font-weight : bold
}
…
<head>
<style>
@import url(“style1.css”);
</style>
</head>
…
The advantage of Imported CSS is, the style information is specified in another file which makes it easy to change the style information when needed. It also makes it easy to apply different look and feels to a single page with less effort. The disadvantage is, the import statement is not supported in older versions of the browsers.
External CSS
In External CSS, the style information is specified in an external file. This file is linked with the web page using a <link> tag. The syntax for the <link> tag is as shown below:
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
According to W3C, there are three types of external style sheets: persistent, alternate and preferred. The <link> tag supports an attribute, title which specifies the name for a style sheet. The three types of external style sheets are declared as shown below:
Persistent style sheet
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
Alternate style sheet
<link rel=”alternate stylesheet” type=”text/css” href=”style.css” title=”large” />
Preferred style sheet (default style sheet when none is selected)
<link rel=”stylesheet” type=”text/css” href=”style.css” title=”normal” />
In the above examples, type specifies the MIME type, href specifies the address (URL) of the style sheet to be linked and rel specifies the relationship of the target document with the current document.
The advantage of External CSS is, the style information is specified in a separate file which makes it easier to modify in future. Different look and feels can be provided by simply changing the value of the href attribute in the <link> tag. The disadvantage is, for web pages with less content, maintaining style information in separate files tend to be overhead.
Note: In favour of separating style information from HTML markup, inline CSS has been deprecated in XHTML 1.1.
Note: A semicolon is optional when there is only one declaration. A semicolon is used to separate multiple declarations from one another. Also a rule can be written in a single line if needed as shown below:
p { color:green }
Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.
He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.
He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.
I like your tutorials . this tutorial are very best and easy to learn.