4

Estava pesquisando a respeito e vi que existem alguns métodos diferentes de se fazer isso. Por exemplo, tem um método onde coloca-se o código CSS no mesmo arquivo do código HTML, e já tem outro, onde os códigos CSS e HTML ficam em arquivos separados.

Gostaria de entender qual forma seria a mais adequada para a criação de um site.

1
  • 1
    O que você entende por "método CSS"?
    – Woss
    24/10/2017 às 23:38

4 Respostas 4

4

TL;DR

Só utilize estilização em linha no último caso, quando precisa sobrepor um estilo já definido em uma folha externa e ele nunca será repetido.

A estilização incorporada pode ser utilizada em páginas que tem uma folha de estilos única, que não será reutilizada por nenhuma outra. Um bom exemplo são sites com uma página só.

Se não se encaixou em nenhuma das anteriores, vá com a estilização externa.

Lembre que o que for dito aqui não é regra.


Sim, de fato existem diferentes maneiras de aplicar a folha de estilos CSS com o HTML. Das mais faladas temos:

Estilização em linha (inline)

Essa é a forma mais básica. É assim que aprendemos inicialmente, pois é fácil e rápido de aplicar. Ela não possibilita o reuso do estilo aplicado, enquanto as outras formas sim.

É um pesadelo para manter. Eu usaria em último caso, na exceção das exceções, se precisasse sobrepor um estilo definido em meus estilos externos (falo mais abaixo).

<p style="color: #333;">Olá!</p>

O problema é quando eu preciso do mesmo estilo em vários elementos. Repetir o código para cada um não é inteligente. E se eu quiser mudar de color: #333; para qualquer outra coisa? Teria que modificar tudo. A solução vem com a estilização incorporada.

Estilização incorporada (embedded)

Suas vantagens acima da estilização em linha são aparentes. Aqui temos reutilização.

<style>
    p {
      color: #333;
    }
</style>

Imagine que quero que todos os elementos p tenham esse estilo. Não preciso do atributo style em todos eles.

Se você tem uma página única em seu site, então não vejo problema em utilizar. Ao contrário... se você precisa utilizar os mesmos estilos em diferentes páginas, veja que copiar todos os estilos pra outra página é uma alternativa custosa, quando você precisasse alterar alguma coisa precisaria alterar pra todos seus arquivos HTML. A solução para isso é a estilização externa.

Estilização externa (external)

Seus estilos armazenados em arquivos .css. Pode ter vários deles e utilizar quando convir. Ajuda na manutenção e não fere o Don't Repeat Yourself quando bem utilizado. Possibilita o cache do navegador, consumindo menos recursos do cliente e consequentemente suas múltiplas páginas carregarão mais rapidamente.

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

Algumas leituras adicionais:

2

A forma mais adequada de atribuir uma folha de estilos CSS para um arquivo HTML objetivando a criação de um site é pelo método externo, pois você vai poder utilizar a mesma folha de estilos para páginas diferentes, além de facilitar a reutilização de suas edições.
Para utilizar é simples, basta criar um arquivo .css separado do arquivo HTML. Assim, em seus arquivos HTML você utilizará a seguinte tag no cabeçalho:

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

Dessa forma será possível, inclusive, o uso de mais de uma folha de estilos em uma única página.

E a partir daí você poderá criar belíssimos sites. Espero ter ajudado!

3
  • 2
    :o que resposta rápida. :s
    – NoobSaibot
    24/10/2017 às 23:39
  • 2
    Sua resposta faz até sentido, mas ela é tão subjetiva quanto a pergunta. :)
    – Sam
    24/10/2017 às 23:41
  • 1
    Ótima resposta @MariaRita... Vou estendê-la! 25/10/2017 às 1:52
-1

Existem diversas formas de tratar um CSS. Pelo JavaScript é uma forma, e dá para trabalhar mais a fundo com a folha de estilo, pois você trabalhará o mais baixo nível possível dentro de um navegador.

Existem também a declaração de CSS inline. Ex.:

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

Também existe a que você declara os estilos em qualquer parte do seu arquivo html, porém é recomendável dentro da tag <head>. Ex.:

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

Nenhuma das 3 formas acima são erradas, todas elas são certas. Porém, a mais recomendável é a que @MariaRita demonstrou:

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

Por que a forma dela é mais recomendável?

Existem vários motivos. Mas a principal dela é que deixa a sua interface bem mais produtiva e "manutenível". Assim, é possível desenvolver uma boa tela de um sistema de forma bem planejada e cada folha de estilo destinado à sua responsabilidade. Por exemplo:

  • grid.css
  • format.css
  • style.css
  • meuFramework.css

Lembrando que isso não é uma regra, mas é uma boa prática, em minha visão, destinar esse tipo de organização em um projeto e mesclar tudo dentro de um arquivo.

Vide o framework: Bootstrap

O projeto contém vários arquivos css, e cada um com a sua responsabilidade.

Espero ter contribuído!

2
  • Também existe a que você declara os estilos em qualquer parte do seu arquivo html, porém é recomendável dentro da tag <head> onde você leu isso? Que eu saiba dentro da tag head só ficam os meta dados, não posso afirmar que isso é uma prática ruim, mas acho que semanticamente falando ficaria "melhor" no inicio do body
    – Raizant
    26/10/2017 às 2:32
  • O primeiro link que peguei na internet. Também trabalho nesta área há mais de 10 anos, e sempre me preocupei com bos práticas. Sei que o time de experiência não quer dizer nada, mas todos os projetos que peguei e que passam por minha análise, sempre seguem essa regra... Já peguei plataformas que usavam também antes da tag body... como eu disse, onde você vai deixar, não é uma regra... você pode deixar em qualquer lugar da página... mas o recomendável e manter responsábilidades em arquivos diferentes e importa-lo ao projeto guilhermemuller.com.br/ead/html-css-na-pratica/inserindo-css 26/10/2017 às 2:49
-1

São três métodos que se pode usar. 1º é o método In:line, nele coloca-se o atributo 'style' e coloca a formatação que deseja diretamente no elemento, esse método é mais viável para textos pequenos, ou aqueles em que irá modificar poucas coisas. 2º é o método Interno,aplica-se a tag , dentro do que é o cabeçalho, entre a tag de abertura e fechamento coloca-se as formatações, possibilita que os estilos sejam reutilizados apenas na página onde foram declarados, é indicado para quem quer formatar apenas um arquivo e não usar muitas formatações, mas nem tão poucas. 3º é o método Externo, é o mais indicado para quem quer formatar um site, ou usar uma mesma formatação para vários arquivos. Todas as definições dos estilos ficam em um arquivo externo, salvo como ".css", para usar esse arquivo, tem que “linkar” aos arquivos HTML que a utilizarão, a tag que deve-se colocar para "linkar" o arquivos CSS é o , a tag link deve vir entre as TAGS e . O método mais recomendado para se utilizar CSS é o método 3, pois possibilitam separar os estilos da página HTML e facilita a reutilização entre múltiplas páginas HTML.

Então se você deseja formatar um site por meio do CSS, o método mais indicado é o método 3 Externo.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .