How to include css in HTML
What is CSS?
CSS (Cascading Style Sheets) is a language used to describe how a document written in HTML (HyperText Markup Language) should look. Think of HTML as the skeleton of a webpage, providing the structure, while CSS is like the skin and clothes, providing the looks and styles.
CSS does all the job of making your webpage attractive, aligning elements, setting backgrounds, fonts, colors, and more. In this blog, we will focus on how to include CSS in your HTML document.
Three Ways to Include CSS in HTML
There are three main ways to include CSS in HTML:
- Inline CSS
- Internal CSS or Embedded CSS
- External CSS
Let's discuss each of these methods in detail.
Inline CSS
Inline CSS involves adding CSS rules directly within the HTML tags using a style attribute. Here's an example:
<p style="color:blue; font-size:20px;">This is a paragraph with inline CSS.</p>
In this example, the <p> tag has a style attribute with the CSS properties color and font-size. The text within the paragraph tag will appear blue and in the font size of 20px.
However, inline CSS is not frequently used because it doesn't promote CSS and HTML separation, which is a good coding practice. It also becomes complex when you have a large HTML document with numerous tags.
Internal CSS
Internal CSS, also known as embedded CSS, involves adding CSS rules within a <style> tag in the <head> section of the HTML document. An example is shown below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
</body>
</html>
In this example, the style tag contains CSS rules for the body and <p> tags. The body has a lightblue background color, and all paragraphs will appear blue and in the font size of 20px.
Internal CSS is a better approach than inline CSS as it allows separation of CSS from HTML to some extent. Moreover, it is easier to manage as you can style multiple elements from one place.
However, it is not the best approach when you have multiple HTML documents. If you want to change the style, you'd have to change it in every HTML document.
External CSS
External CSS is the most preferred and efficient way of including CSS in HTML. It involves creating a separate CSS file and linking it to the HTML document.
Here's how an external CSS file (named styles.css) may look like:
body {
background-color: lightblue;
}
p {
color: blue;
font-size: 20px;
}
And this is how you link it in your HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with external CSS.</p>
</body>
</html>
In the head section of your HTML file, you use the link tag to include the CSS file. The rel attribute specifies the relationship between the HTML document and the linked resource (stylesheet in this case), and the href attribute specifies the path to the CSS file.
Using external CSS has many advantages. It promotes the complete separation of HTML and CSS, which is a good coding practice. It enhances code reusability as you can use the same CSS file for multiple HTML documents. It also makes maintenance easier as you only need to modify one file to change the style of elements on all related HTML pages.
Conclusion
Including CSS in HTML is a crucial part of web development, allowing you to create visually appealing webpages. While each method has its uses, external CSS is the most efficient and widely used, especially for larger, more complex websites.
Whether you're just starting or have been coding for a while, understanding these techniques gives you more tools to improve the appearance of your webpages and create more engaging user experiences. Remember, practice is key to mastering any skill, so don't hesitate to get your hands dirty and write some code!