How Many Ways to Include CSS in Html

In the previous post we have given you a CSS Selectors Cheat Sheet. We hope that it would have helped you to understand CSS easily. We have tried to give brief and to the point information in the last post. We will be discussing these in future as well.

How Many Ways to Include CSS in Html

It is very important to know where do you put CSS in html page. You should be familiar with how to apply CSS in HTML file and what is a difference between a HTML embedded CSS page and one without it. Let us show you that how to apply CSS in HTML file or how to add stylesheet to HTML. There are 3 ways to insert CSS in a HTML page e.g. inline CSS, Embedded CSS and External CSS. We will discuss them one by one.

How to Write Inline CSS in Html

This method is used to embed CSS within HTML tags. When you apply direct styles with a style attribute to a HTML element it is called including CSS within HTML element or inline style. It can be useful at times but most of the time it is recommended to avoid using inline styles in a HTML document. If you use inline styles you have to style every element separately and if you want to apply a change you have to change all the elements using that style. To avoid this kind of scenario it is recommended to avoid writing inline CSS.

To write inline CSS you use the style attribute of HTML elements and put CSS styles inside quotes. Let us see an example:

<p style=”color: red; background-color: #eee; font-size: 16px;”>I Love ilmiweb</p>

In the above HTML code you can see that we have styled a <p> tag using inline CSS or inline styles. But the more efficient way to use styles is by including embedded or external CSS.

Style in Header | Embedded CSS or Style Sheet

In this method the styles are embedded in the header of an HTML page. This kind of CSS is applied with the help of style tag in the header of a HTML document. In this method you can use declare classes, ids or you can style individual elements. It gives you the power of descendent selector styling etc. It is used when you just want to style the elements of the page. Otherwise it is not a recommended way of including CSS in a HTML document. Let us see how we can include CSS with style tag in a HTML page.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Style in Header </title>

<style>

p{

color: red;

background-color: green;

font-weight: bold;

}

</style>

</head>

<body>

<p>

We Love to learn through howtocode.pk

</p>

</body>

</html>

It is very simple to include styles in a head of a HTML page with a style tag.

How to Apply External CSS in Html

To include CSS styles the mostly used and mostly recommended way is to include and external file. It is known as the best way to include CSS in HTML pages. By using an external file you can apply styles to a whole website. You do not have to write styles for every page. This is the best way to include CSS in HTML document. You should always use external CSS in HTML if not necessary to used embedded or inline CSS.

Let us see how to apply external CSS in HTML document. It is included with the help of <link> tag. See the code below to understand more.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />

<title> Apply External CSS in Html </title>

</head>

 

<body>

<p>

We Love to learn through howtocode.pk

</p>

</body>

</html>

In the above code we included an external CSS style.css to the page. It is included with the help of a <link> tag. The link tag has some attributes as rel, type and href to be used to tell the browser that which file we are including and what is the type etc.

So that is how you can include an external CSS into your document.

Comments