Back Next

Inserting CSS to HTML Document

There are three ways of adding a CSS. They are:

Inline CSS
Internal CSS
External CSS

The main difference between Inline CSS and External CSS is that Inline CSS is processed faster as it requires the browser to download only one file while using External CSS will require downloading HTML and CSS files separately. In bigger projects, it is feasible to use External CSS rather than Inline or Internal CSS as it contains thousands of lines of code.

Inline CSS

An inline style can be used to apply the style for a specific HTML element. For using inline styles, add the style attribute to the HTML element.
Eg: <h1 style="color:yellow;margin-left:20px;">Inline CSS</h1>
Here, CSS properties will be applicable for the HTML element h1 only.

Advantages of Inline CSS:

We can add CSS rules to an HTML page easily and quickly. So it is easy for the beginners to understand the use of CSS.
This method is useful for previewing the changes and performing quick-fixes to the HTML content.
No need to create and upload a separate page for stylesheet as in the external style.

Disadvantages of Inline CSS:

If you use quotations inside Inline CSS, the browser will interpret this as an end of your ‘style’ which may affect the styling of the page.
Inline CSS can not be reused as it is applicable to a specific HTML element only. We may need to repeat the same code against another HTML element for styling that element. This will increase the number of lines of code.
These styles are tough to edit because they are not stored at a single place.
It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
Adding CSS rules to every HTML element is a tedious task and makes your HTML structure confused.

Internal CSS

The internal CSS is used to add a unique style for a single HTML document. The internal CSS is defined inside the <style> element, in the head section of the HTML document.

Eg:
<head>
<style type="text/css">
h1
{
color:yellow;
margin-left: 20px;
}
#head-topic
{
font-family: Arial, Helvetica, Sans Serif;
}
</style>
</head>

Advantages of Internal CSS:

We can use Selectors like ‘id’ and ‘class’ in internal CSS
Reusability of code is possible.
No need to create and upload a separate page for stylesheet as in the external style.

Disadvantages of Internal CSS:

HTML and CSS code are in the same HTML page. It increases the size of the page and loading time of the page.

External CSS

The best way to attach style sheets to your documents is with external style sheets since it is the most feasible way for creating larger websites. With External CSS, you can link your web pages to an external CSS file with ‘.css’ extension. External style sheets are the most flexible because you can change the look of an entire website by updating a single CSS file.

Eg:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Above code includes an External CSS file ‘style.css’ to the HTML document.
Best practice is to link the External CSS file in the head section of the HTML page.
In the style.css page, directly write the CSS code. No need to add <style> tag inside it.
Eg:
h1
{
color:yellow;
margin-left: 20px;
}
#head-topic
{
font-family: Arial, Helvetica, Sans Serif;
}

Advantages of External CSS:

HTML document size is reduced and coding becomes more structured.
External CSS files can be used for multiple web pages.
Code becomes reusable.

Disadvantages of External CSS:

We need to create and upload a separate page for the stylesheet.
Styles in the HTML page will not be shown until the External CSS file is loaded.

Multiple Style Sheets
If different properties have been defined for the same selector in different style sheets, the value from the last read stylesheet will be used.

CSS Comments

Comments are used to describe the code in many programming languages. CSS also provides a way to comment inside the code which tells the browser that they should not be displayed on the front end. The main purpose of these comments is to clarify quickly the purpose of a file or code block. Comments will help you while editing the source code at a later time.

To include a comment in CSS, simply place your plain text inside /**/. It is a multi-line comment.
Eg:
<style>
/* This is a comment. This will not be displayed in the browser. */
h2 {
color: yellow;
}
</style>