Topics

How to add CSS

On reading a style sheet, a browser will format the HTML document as per the information in the style sheet.

 

Three Ways to Insert CSS

You can insert a style sheet in three ways:

  • External CSS 
  • Internal CSS 
  • Inline CSS

 

External CSS

An external style sheet lets you change the entire website's look by changing just one file!

Each HTML page should contain a reference to the external style sheet file inside the <link> element in the head section.

External styles are specified within the <link> element, inside the <head> section of an HTML page:

Example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/example/HowToAddCSS/mystyle.css">
</head>
<body>

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

</body>
</html>

Try With Example

One can write an external style sheet in any text editor, and you must save it with a .css extension.

You must ensure the external .css file does not contain any HTML tags.

Given below is how the "mystyle.css" file looks:

"mystyle.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

 

Internal CSS

You may use an internal style sheet if one single HTML page has a unique style.

The internal style is specified inside the <style> element in the head section.

Example: Internal styles are specified within the <style> element, in the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

Try With Example

 

Inline CSS

You may use an inline style to apply a unique style for a single element.

For using inline styles, add the style attribute to the relevant element. The style attribute can include any CSS property.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Try With Example

 

Multiple Style Sheets

It uses the value from the last read style sheet in case some properties have been specified for the same selector (element) in different style sheets.

Suppose that an external style sheet has the following style for the <h1> element: 

h1 {
  color: navy;
}

Then, suppose that an internal style sheet also has the following style for the <h1> element:

h1 {
  color: orange;   
}

 

Example: In case the internal style is specified after the link to the external style sheet, then, in that case, the <h1> elements will be "orange":

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/assets/example/HowToAddCSS/mystyle2.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>
<h1>Welcome to CSS Tutorial | TutorialWithExample</h1>
</body>
</html>

Try With Example

 

Example :

But, in case the internal style is specified before the link to the external style sheet, then, in that case, the <h1> elements will be "navy":

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="/assets/example/HowToAddCSS/mystyle2.css">

</head>
<body>
<h1>Welcome to CSS Tutorial | TutorialWithExample</h1>
</body>
</html>

Try With Example

 

Cascading Order

What style will be used when more than one style is specified for an HTML element?

Every style on a page will "cascade" into a new "virtual" style sheet as per the following rules, where the highest priority is given to number one:

  • Inline style (defined inside an HTML element) 
  • Internal and External style sheets (inside the head section) 
  • Browser default