Location of CSS

February 19, 2021

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Ways to Insert CSS

There are three ways of inserting a style sheet:

Inline Style Sheet (Inline CSS)
Internal Style Sheet (Document level style sheet) (Internal CSS)
External Style Sheet (External CSS)

Inline Style Sheet

This type of style sheet directly written in the HTML tag using style attribute. for example,

<p style="color:#313131;font-family:Arial;">This is text</p>

Here for the <p> tag two properties are used such as color and font-family and those are associated with the values such as #313131 color and Arial font.

If you want to use more than on properties then you have to use separator such as semicolon.

Inline styles are defined within the “style” attribute of the relevant element, see example,

See the Pen inline css by Arpit (@soniarpit) on CodePen.

Internal Style Sheet (Document level style sheet)

This style sheet define inside head section. An internal style sheet may be used if one single HTML page has a unique style.

The most important thing while writing an internal level style sheet is that we should mention the style type="text/css" in the head section. By doing this the browser will come to know that the program is making use of cascading style sheet. But if you do not write by default it takes CSS. So don’t worry

See the Pen internal css by Arpit (@soniarpit) on CodePen.

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

html file (index.html)

<!DOCTYPE html>
<html>

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

<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>

</html>

css file (style.css) in same folder

body{
  background-color:lightblue;
}

h1{
  color:teal;
}

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Try above example by your self to better understand.

Note: Throughout this tutorial, I’m using the following style to insert CSS in HTML. I don’t need to write a link tag in the following codpen editor. But you have to write if you using external css. So hope you understand

click on css tab to see css code

See the Pen external style by Arpit (@soniarpit) on CodePen.

Previous: CSS Syntax and Structure

Next: CSS Comments