What is the most appropriate method to "connect" a CSS code to an HTML?

Asked

Viewed 581 times

4

I was looking around and I saw that there are some different methods of doing this. For example, there is a method where you put the code CSS in the same code file HTML, and already has another, where the codes CSS and HTML are kept in separate files.

I would like to understand what would be the most appropriate way to create a website.

  • 1

    What you mean by "CSS method"?

4 answers

4

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:

2

The most appropriate way to assign a CSS style sheet to an HTML file to create a website is by the external method, as you will be able to use the same style sheet for different pages, as well as making it easier to reuse your edits.
To use it is simple, just create a separate . css file from the HTML file. Thus, in your HTML files you will use the following tag in the header:

<link rel="stylesheet" type="text/css" href="diretorioDoArquivo.css">

This way it will be possible, including, the use of more than one style sheet in a single page.

And from there you can create beautiful websites. I hope to have helped!

  • 2

    :what quick response. : s

  • 2

    Your answer makes sense, but she’s as subjective as the question. :)

  • 1

    Great reply @Mariarita... I’ll extend it!

-1

There are several ways to treat a CSS. By Javascript is a way, and you can work more in depth with the style sheet, because you will work as low as possible within a browser.

There is also the inline CSS declaration. Ex.:

<h1 style="color: red;">Olá Mundo!</h1>

There is also the one where you declare the styles in any part of your html file, however it is recommended within the tag <head>. Ex.:

<style>
    h1 { color: red; }
</style>

None of the 3 ways above are wrong, all of them are right. However, the most recommended is the one @Mariarita demonstrated:

<link rel="stylesheet" type="text/css" href="diretorioDoArquivo.css">

Because her form is more recommendable?

There are several reasons. But the main reason 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 way and each style sheet intended for your responsibility. For example:

  • grid css.
  • css format.
  • css style.
  • myFramework.css

Remembering that this is not a rule, but it is a good practice, in my view, to allocate this type of organization in a project and merge everything within a file.

See the framework: Bootstrap

The project contains several css files, each with its own responsibility.

I hope I contributed!

  • Também existe a que você declara os estilos em qualquer parte do seu arquivo html, porém é recomendável dentro da tag <head> Where did you read that? That I know inside the tag head are only the meta data, I can not say that this is a bad practice, but I think semantically speaking would be "better" at the beginning of body

  • The first link I picked up on the internet. I have also been working in this area for more than 10 years, and I have always been concerned about practical Bos. I know that the experience team does not mean anything, but all the projects that I took and that go through my analysis, always follow this rule... I’ve taken platforms that used also before the tag body... as I said, where you will leave, it’s not a rule... you can leave it anywhere on the page... but we recommend it and keep it accountable in different files and import it to the project https://guilhermemuller.com.br/ead/html-css-pratica/inserindo-css

-1

That’s three methods you can use. 1º is the In:line method, it places the attribute 'style' and puts the formatting you want directly in the element, this method is more feasible for small texts, or those where will modify few things. 2º is the Internal method, applies the tag , inside what is the header, between the opening and closing tag put the formatting, allows the styles to be reused only on the page where were declared, it is indicated to anyone who wants to format only one file and not use many formatting, but not so few. 3º 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 style settings are in an external file, save as ". css", to use this file, you have to "link" to the HTML files that will use it, the tag you have to put to "link" the CSS files is the , tag link should come between TAGS and . The most recommended method to use CSS is method 3, as it makes it possible to separate styles from the HTML page and facilitates reuse between multiple HTML pages.

So if you want to format one website through CSS, the most suitable method is the External 3 method.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.