I was researching about it and saw that there are some different methods of doing this. For example, there is a method where you put the CSS code in the same HTML file, and there is another one where the CSS and HTML codes are in separate files.
I would like to understand which form would be most appropriate for creating a website.
The most appropriate way to assign a CSS style sheet to an HTML file for creating a website is by the external method, since you will be able to use the same style sheet for different pages, as well as facilitate the reuse of your issues. To use it is simple, just create a separate .css file from the HTML file. So in your HTML files you will use the following tag in the header:
<link rel="stylesheet" type="text/css" href="diretorioDoArquivo.css">
In this way, you can even use more than one style sheet on a single page.
And from there you can create beautiful websites. Hope this helps!
Only use inline styling in the latter case, when you need to overlap an already defined style on an external sheet and it will never be repeated.
Embedded styling can be used on pages that have a unique style sheet that will not be reused by any other. A good example are sites with only one page.
If you have not fit any of the above, go with external styling .
Remember that what is said here is not a rule.
Yes, in fact there are different ways to apply the CSS style sheet to HTML. Of the most spoken we have:
This is the most basic form. This is how we first learn, as it is easy and quick to apply. It does not allow reuse of applied style, while other forms do.
It's a nightmare to keep. I would use in the latter case, in the exception of exceptions, if I needed to overlap a defined style in my external styles (I'll tell you below).
<p style="color: #333;">Olá!</p>
The problem is when I need the same style in multiple elements. Repeating the code for each one is not smart. What if I want to change from color: #333; to something else? It would have to change everything. The solution comes with built-in styling.
Its advantages over online styling are apparent. Here we have reuse.
<style>
p {
color: #333;
}
</style>
Imagine I want all p elements to have this style. I do not need the style attribute in all of them.
If you have a single page on your site, then I see no problem in using it. Unlike ... 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 would need to change all your HTML files. The solution to this is external styling.
Your styles stored in .css files. You can have several of them and use them when you want. D on't R epeat strong> Y ourself when well used. It enables browser caching, consuming fewer client resources and consequently multiple pages will load faster.
<link rel="stylesheet" type="text/css" href="estilos.css">
Some additional readings:
There are several ways to handle CSS. By JavaScript is a way, and you can work more deeply with the style sheet, because you will work at the lowest possible level within a browser.
There is also the inline CSS declaration. Ex.:
<h1 style="color: red;">Olá Mundo!</h1>
You also declare styles in any part of your html file, but it is recommended within the <head> tag. Ex.:
<style>
h1 { color: red; }
</style>
None of the above 3 forms are wrong, all of them are right. However, the most recommended is that @MariaRita demonstrated:
<link rel="stylesheet" type="text/css" href="diretorioDoArquivo.css">
There are several reasons. But the main one is that it makes your interface much more productive and " maintainable". Thus, it is possible to develop a good screen of a system in a well-planned manner and each stylesheet designed for your responsibility. For example:
Remembering that this is not a rule, but it is good practice, in my view, to target such an organization in a project and merge everything into a file.
See the framework: Bootstrap
The project contains several css files, and each one is your responsibility.
I hope I have contributed!
There are three methods that you can use. First is the In: line method, in it the 'style' attribute is placed and the formatting that you want directly in the element is made, this method is more feasible for small texts, or those that will modify little things. 2º is the Internal method, the tag is applied, inside the header, between the opening and closing tag the formatting is placed, it allows the styles to be reused only on the page where were declared, it is indicated for those who want to format only one file and not use many formatting, but not so few. 3rd is the External method, it is the most suitable for anyone who wants to format a website, or use the same formatting for several files. All the style definitions are in an external file, saved as ".css", to use this file, have to "link" to the HTML files that will use it, the tag that must be put to "link" the CSS files is the link tag should come between the TAGS and. The most recommended method for using CSS is method 3, since it makes it possible to separate styles from the HTML page and makes it easier to reuse between multiple HTML pages.
So if you want to format a site via CSS, the most appropriate method is External Method 3.