Before we start to write CSS code unless we know how to link CSS to HTML or how we can connect CSS to
HTML.
Let's look at the couple of ways when it comes to linking of CSS to HTML.
There are three ways to include CSS within the HTML.
The first step or the first concept is inline CSS.
What does it mean?
This method involves adding the CSS rule directly within the HTML element using the style attribute.
In the next video, we will get back to code to explain how it works.
But for the meantime, let me show you what it means when we say inline.
We are going to write the CSS within the element itself by using what is called the style attribute.
That's what it means.
The next video I will show you how we are going to write actual CSS code.
So what are some of the advantages and disadvantages of this?
Well, this approach is not recommended for larger projects as it makes maintenance more complex and
it doesn't utilize the advantage of CSS being able to control the styling from a single location.
However, it can be more useful for quick testing or minor style changes.
The next step or the next concept is called the internal or the embedded.
As the name implies.
This involves us adding the CSS rule within the style tags in the head section of the HTML document,
and this allows you to define the style for the entire HTML document in one place.
For this one, it means that we are going to add the CSS within the head tag using what is called the
style.
Again, don't worry, the next video, I'll show you how we are going to implement this.
For the meantime, let me remove that.
So what are some of the advantages for this?
As the name implies, this allows you to define the styles for the entire HTML document in one single
place.
The last one is external CSS and this is the most common and the recommended method for adding or including
or connecting CSS in larger project.
It involves creating a separate CSS file and linking it to the HTML document itself, using the link
tag in the head section.
And this allows you to write your CSS code separately from your HTML code, making your code cleaner
and more manageable.
So in the next video, we are going to explore each of these methods.