HTML How to link CSS

  • Reading time:7 mins read

HTML: How to link CSS?

There are three ways to add CSS styles to an HTML document. In this article, we are going to start with the most common, and then we’ll show examples of less common solutions about HTML How to link CSS.

 

HTML how to link CSS

 

HTML: How to link CSS – Adding an external style sheet 

The advantage of adding external CSS is that you can change the style of the whole website by adding a single file. 

All HTML pages require an external style sheet which should be added to the head section, inside the <link> element:

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="external">
</head>

 

 

For this task, the external CSS file looks like this:

 

body {
  background-color: #f3a8ff;
}
h1 {
  color: #5e4e61;
  margin-left: 20px;
}

 

You can write an external style sheet in any code editor, the only important thing is that it is saved with the .css extension.

 

HTML How to link CSS – Internal CSS

You should use an internal style sheet when the style of an HTML subpage is different from the style of the website as a whole.

The internal style sheet is specified inside the <style> element in the head section of the HTML code.

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>

 

 

HTML How to link CSS – Inline CSS – Formatting a specific HTML element

This solution comes up when you want to format an HTML element, not a whole page. Within the selected element, you can add formatting using the style attribute—any CSS property can be applied to the element.

 

<!DOCTYPE html>
<html>
<body>
<h1 style="color:salmon;">This is a salmon-colored headline</h1>
<p style="color:olive;">And this is a green paragraph.</p>
</body>
</html>

 

 

The inline style overrides the properties specified in the external CSS document or the internal style sheet. The order of the rules is as follows:

  1. Inline style (within the HTML element) 
  2. External and internal style sheets (inside the head section)
  3. The default settings of the browser

Summary

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

JavaScript:

Java:

Other materials:

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.