CSS stands for cascading style sheets. It’s a stylesheet language that describes the appearance of a website. Essentially, CSS tells web browsers how each element in an HTML document should be displayed.
CSS rules start working after they are being added to HTML. There are a couple of ways for adding CSS into HTML and in this article, you are going to learn how to do it in three different ways. We will also uncover the advantages and disadvantages of using each method.
Then, without further ado, let’s get started.
3 Ways for adding CSS into HTML
To add CSS styles to your HTML documents, you can use three different ways to insert it and they are as follows:
- Inline styles (placed within the HTML elements)
- Internal (Embedded) styles (placed in head section of the web page you are writing)
- External Styles (placed on the external style sheet, which is a separate page linked to the web page (recommended).
Inline styles
Inline CSS is used to style a specific HTML element. For this, we make use of the style attribute and then we provide properties to it. Here is an example:
<body>
<h1 style="color: blue">Hello world!</h1>
</body>Here we are giving it the property of color, and setting the value to blue, which results in the following:
We can also set multiple properties inside the style tag if we wanted. However, we should not continue down this path, as things start to get messy if our HTML is cluttered with lots of CSS inside it.
💡Note
Advantages of Inline CSS:
👍 You can easily and quickly insert CSS rules to an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
👍 You don’t need to create and upload a separate document as in the external style.
Disadvantages of Inline CSS:
👎 Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy.
👎 Styling multiple elements can affect your page’s size and download time.
Based on CSS specificity this kind of style has a specificity value of 1000. In our opinion, during development, there are some cases we still have to apply inline style.
For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only. However since it overrides CSS access by selectors, be very careful when using it.
This is why the second method to include CSS was introduced i.e Internal (Embedded) styles.
Internal (Embedded) styles
Internal or Embedded style sheets only affect the document they are embedded in.
Embedded style sheets are defined in the <head> section of an HTML document using the <style> element.
You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let’s take a look at an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of CSS Embedded Style Sheet</title>
<style>
body {
background-color: YellowGreen;
}
p {
color: #fff;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
💡Note
Advantages of Internal CSS:
👍 You can use class and id selectors.
👍 Since you will only add the code within the same HTML file, you don’t need to upload multiple files.
Disadvantages of Internal CSS:
👎 Adding the code to the HTML document can increase the page’s size and loading time.
So this is the second approach for adding CSS into our HTML file, but it’s still not perfect because what we like to do is to keep HTML and CSS in separated files, which leads us to the third way.
External styles
An external style sheet is ideal when the style is applied to many pages of the website.
An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file.
You can attach external style sheets in two ways — linking and importing.
Linking external style sheets
Before linking, we need to create a style sheet first. Let’s open your preferred code editor (VS Code recommended) and create a new file. Now type the following CSS code inside this file and save it as “style.css”.
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section, as you can see in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Example of CSS External Style Sheet</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
💡 Note
Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents. As you can clearly see with external style sheets, the affected HTML file require minimal changes in the markup.
Importing external style sheets
The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles.
You can use it in two ways. The simplest is within the header of your document. Note that, other CSS rules may still be included in the <style> element. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of CSS Imported Style Sheet</title>
<style>
@import url("/examples/css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>The styles for this heading are defined in the imported style sheet</h1>
<p>The styles for this paragraph are defined in the embedded style sheet.</p>
</body>
</html>
Similarly, you can use the @import rule to import a style sheet within another style sheet.
💡 Note
All @import rules must occur at the start of the style sheet. Any style rule defined in the style sheet itself override the conflicting rules in the imported style sheets. However, importing a style sheet within another style sheet is not recommended due to performance issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of CSS @import rule</title>
</head>
<body>
<div>
<h1>Importing External Style Sheet</h1>
<p>
The layout styles of these HTML element is defined in 'layout.css' and
colors in 'color.css'.
</p>
</div>
</body>
</html>@import url('/examples/css/layout.css');
@import url('/examples/css/color.css');
body {
color: blue;
font-size: 14px;
}💡Note
Advantages of External CSS:
👍 Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
👍 You can use the same .css file for multiple pages.
Disadvantages of External CSS:
👎 Your pages may not be rendered correctly until the external CSS is loaded.
👎 Linking to multiple CSS files can increase your site’s download time.
Conclusion
In this tutorial, you have learned the difference between the three types of CSS: inline, internal and external . Here’s the recap:
- Inline styles – apply CSS rules for specific elements.
- Internal (Embedded) styles – add
<style>tag in the<head>section of HTML document - External styles – link the HTML sheet to a separate
.cssfile
So, which CSS style will you use? Share with us in the comments section below.
Add comment