The dynamic websites with such interactive User Experience that we see on the internet are built with a lot more than HTML alone. HTML, CSS, and JavaScript are the three important pillars of website development. HTML is where you would enter your content, CSS is where you would style your webpage and JavaScript is where you would add the dynamic element of the webpage.
By now, we know that CSS is Cascading Style Sheets. These style sheets are used to add the styling and visual element to the content in HTML. The World Wide Web Consortium (W3C) is the organization that maintains the standards for CSS just like it does for HTML.
In this tutorial, we will see how to link CSS to HTML. We will also take a look at what is the difference between CSS & HTML.
It is noteworthy that CSS can be added to HTML in not one but three ways. The first method, which is often also called the inline method, is self-explanatory. It adds the CSS code directly into the HTML line of code. The second method is pretty simple as well. It writes the entire CSS code inside a style tage and this tag is then added into the <head> tag of HTML. The third and last method is the most extensively used. Here, the CSS code for styling is written in an external file and this file is then linked to the HTML code.
Now that we have discussed all the three ways, let us understand each method with an example.
Let’s see an example to learn all 3 ways to add CSS code to HTML:
<html>
<head>
<title> How to add CSS to HTML using Style Attribute </title>
<h1 style="color:blue; font-size:70px"> The style added above applies on me.
</h1>
</head>
</html>
Here’s how the output will be:
We can also get the same output by adding <style > tag in the head section. Let’s see how that is done:
<html>
<head>
<title> How to add CSS to HTML using Style tag </title>
<style>
#addCSS{
color:blue;
font-size:70px;
}
</style>
<h1 id="addCSS"> The style added above applies on me.
</h1>
</head>
</html>
Now, to add CSS from an external file, first, write the HTML code for the content. Then you can add a link of the CSS file into the <head> tag of the HTML code:
<html>
<head>
<link rel="stylesheet" href="externalstylefile.css">
<title> How to add CSS to HTML using external file </title>
<h1 > The style added above applies on me. </h1>
</head>
</html>
Let's take the name of the external CSS file as ‘externalstylefile.css’. This is what the file will look like:
h1{
color:blue;
font-size:70px;
}
You will get the same output for this code as well.
The Difference Between HTML and CSS
From the above example, we already know that HTML is used to add the content of the webpage. It creates the basic structure of the webpage, whereas CSS will add the layouts and styles to the webpage.
One of the most important advantages of using CSS is that you can easily change the entire document by making changes in the CSS file. For example, if you want to change the color of all h1 headers from blue to red, it can be done by making a single change in the CSS file rather than making multiple changes in the HTML code. It is interesting to note that CSS can makes changes across multiple webpages as well.
Another difference between CSS and HTML is of course how both the languages use syntax. While HTML uses a lot of tags, CSS code is always inside blocks. HTML has the content placed between tags. CSS, on the other hand, provides properties and values for the content. In our example, color is the property and blue is the value of the property that is applied to the content in the HTML file.
Conclusion
In this tutorial, we saw how to link CSS to HTML. We saw the three ways by which we can link the content and the styling. For longer webpages, it makes more sense to use CSS in an external file. This helps to keep the code clean and future updates can be made easily.
We also saw the difference between HTML and CSS, how they are used for different purposes, and how they differ in their syntax.
To learn how to comment in CSS, visit our previous post! To keep learning such CSS codes, subscribe to our blog!