Where to Write CSS Code in HTML

The CSS code can be written in these places/ways, to apply styles to HTML elements:

Inline CSS
Internal CSS
External CSS

Inline CSS

The inline CSS can be used to style particular HTML element. To write inline CSS, use following syntax:

<ELEMENT style="property1:value1; property2:value2; ...; propertyN:valueN;"></ELEMENT>

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<body>
   
   <h2>Where to Write Inline CSS Code</h2>
   <p>The paragraph given below is styled using inline CSS.</p>
   <p style="background-color: purple; color: white; padding: 12px;">fresherearth</p>
   
</body>
</html>

Output

Where to Write Inline CSS Code

The paragraph given below is styled using inline CSS.

fresherearth

Note - The syntax to write CSS code is described in its separate tutorial.

Main Advantage of Inline CSS

CSS code written as inline CSS to an HTML element, has the highest precedence over internal and external CSS

Main Disadvantages of Inline CSS

Inline CSS increases the difficulty to maintain, and the download time
Pseudo-elements and/or Pseudo-classes can not be used using Inline CSS

Internal CSS

The internal CSS are be used to style particular web page. The internal CSS are written inside the STYLE tag, that must be inside the HEAD of HTML document. Here is the syntax:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      Selector1{property1: value1; property2: value2; ...; propertyN: valueN;}
      Selector2{property1: value1; property2: value2; ...; propertyN: valueN;}
	  .
	  .
	  .
      SelectorN{property1: value1; property2: value2; ...; propertyN: valueN;}
   </style>
</head>
<body>
   
   ...The Content of HTML Document's BODY goes here...
   
</body>
</html>

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{background-color: purple; color: white; padding: 12px;}
   </style>
</head>
<body>
   
   <p>fresherearth</p>
   
</body>
</html>

Output

fresherearth

The advantage of internal CSS over inline CSS is, if we want to style all paragraphs without writing CSS for each and every paragraph, then the internal CSS helps in doing this task. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{background-color: purple; color: white; padding: 12px;}
   </style>
</head>
<body>
   
   <h2>Where to Write Internal CSS Code</h2>
   <p>All the paragraphs are styled</p>
   <p>fresherearth</p>
   <p>This is the third paragraph</p>
   
</body>
</html>

Output

Where to Write Internal CSS Code

All the paragraphs are styled

fresherearth

This is the third paragraph

See, all the three paragraphs are styled using one single CSS declaration. Now the question is, what if we need to style only two paragraphs or two paragraph with one, and the last with other style. Then we need to define either class and/or id to the paragraph or use pseudo-classes, for identification and/or selection. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{font-size: 200%;}
      p.a{background-color: purple; color: white; padding: 12px;}
      p.b{background-color: black; color: whitesmoke; padding: 20px;}
   </style>
</head>
<body>
   
   <h2>Where to Write Internal CSS in HTML Document</h2>
   <p class="a">All the paragraphs are styled</p>
   <p class="a">fresherearth</p>
   <p class="b">This is the third paragraph</p>
   
</body>
</html>

Output

Where to Write Internal CSS in HTML Document

All the paragraphs are styled

fresherearth

This is the third paragraph

You will learn all about selectors and pseudo-classes in upcoming tutorial. For now, the thing is, internal CSS code can be written in HTML document, in the same way as done in above example.

Main Advantage of Internal CSS

Affects only the page where the internal CSS is written

Main Disadvantage of Internal CSS

Since internal CSS are written for every page, therefore if we need to change/update some style, then we have to do the same change/update for every page

External CSS

External CSS are written in an external file whose extension must be .css say fresherearth.css. For example, write the following CSS code in a new file:

h2{font-size: 200%;}
p.a{background-color: purple; color: white; padding: 12px;}
p.b{background-color: black; color: whitesmoke; padding: 20px;}

Now save the file with name say fresherearth followed by .css extension. Here is the snapshot of the file:

Now because the CSS code is written in an external file, therefore we need to link that file to the HTML document to which we want to apply the CSS written in that external CSS file.

The syntax to include an external CSS file in an HTML document is:

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

Another way to include external CSS file to an HTML document is:

<style>
   @import url("ExternalCSSFileURL");
</style>

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="fresherearth.css">
</head>
<body>
   
   <h2>Where to Write and Link External CSS in HTML</h2>
   <p class="a">This is the first paragraph</p>
   <p class="a">This is another paragraph</p>
   <p class="b">This is the last paragraph of this Document</p>
   
</body>
</html>

Output

Where to Write and Link External CSS in HTML

This is the first paragraph

This is another paragraph

This is the last paragraph of this Document

In above example, I've written only the file name of external CSS file, because the HTML document and the CSS is saved in the same directory. But you can still provide the complete URL of the external CSS file.

Note - If the external CSS file is not saved in the directory, where the HTML document is saved, then include the complete URL of the CSS file.

Note - You can also provide the complete URL of external CSS file without caring where the HTML document is saved.

Main Advantages of External CSS

It becomes easy to maintain
To change the style of whole website, we need to update only a single CSS file
Write once, use everywhere

Main Disadvantage of External CSS

Increases the page load time, as the page loads only after the entire CSS codes written in an external CSS file, gets loaded

CSS Online Test

« Previous Tutorial Next Tutorial »