Include CSS File to HTML
CSS stands for Cascading Style Sheets and is a language used to define the look and feel of a web page. CSS is used to style HTML elements, which are the building blocks of web pages.
Adding CSS to HTML pages is an essential part of web design. Without it, a web page would look dull and unappealing. Fortunately, adding CSS to HTML pages is relatively easy. Here are the steps to follow to add CSS to HTML pages.
There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
Inline CSS
An inline style is commonly used for an element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">heading</h1>
</body>
</html>Internal CSS
An internal style is used for an HTML page. The internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: gray;
}
</style>
</head>
<body>
</body>
</html>External CSS
In this method, you write the desired style once and only by linking to it, you can apply changes to the HTML tags and with an external style sheet, you can change the look of an entire website by changing just one file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Here is how the “style.css” file looks:
body {
background-color: gray;
}Which One Is Better?
The quick answer is the external file. Here is why:
- In inline you have to add style to every element and it is time-consuming and not good for SEO at all.
- As you know, page load time is important. The inline method grows the page size massively and messy.
- In the internal method, you have to duplicate all styles into every page. It is not worst than the Inline method and also is not a good choice.
- As we said above, in the external method, you define styles once and use them everywhere by including files on the page.