TL;DR
Only use online styling in the latter case, when you need to superimpose a style already defined on an external sheet and it will never be repeated.
To stylization incorporated can be used on pages that have a unique style sheet, which will not be reused by any other. A good example are one-page websites.
If you didn’t fit into any of the above, go with the external stylization.
Remember that what is said here is not a rule.
Yes, in fact there are different ways to apply the CSS stylesheet with HTML. We have the most talked about:
In-line stylisation (inline)
This is the most basic form. This is how we learn initially, as it is easy and quick to apply. It does not make it possible to reuse the style applied, while the other forms do.
It’s a nightmare to keep up. I would use in the latter case, except for exceptions, if I needed to superimpose a style defined in my external styles (I speak further below).
<p style="color: #333;">Olá!</p>
The problem is when I need the same style on multiple elements. Repeating the code for each is not smart. And if I want to change color: #333;
for anything else? It would have to change everything. The solution comes with the built-in styling.
Embedded stylization (Embedded)
Its advantages above online styling are apparent. Here we have reuse.
<style>
p {
color: #333;
}
</style>
Imagine I want all the elements p
have that style. I don’t need the attribute style
in all of them.
If you have a single page on your site, then I see no problem using it. On the contrary... if you need to use the same styles on different pages, see that copying all styles to another page is a costly alternative, when you need to change something you need to change for all your HTML files. The solution to this is external stylization.
External stylization (Xternal)
Your styles stored in .css. files can have several of them and use when appropriate. It helps in maintenance and does not hurt the Don’t Repeat Yourself when well used. Enables browser caching, consuming less client resources and consequently its multiple pages will load faster.
<link rel="stylesheet" type="text/css" href="estilos.css">
Some additional readings:
What you mean by "CSS method"?
– Woss