css ou html?

[Kauan Oliveira]

Primeiramente boa madrugada à todos, meu nome é Kauan eu sou novo na comunidade então espero que me perdoem se eu estiver fazendo esta pergunta no fórum errado.

Sou estudante de Ciência da Computação e em meu primeiro semestre me deparei com a matéria de desenvolvimento web, nela o professor esta ensinando um pouco sobre XHTML até então, porém como sou mega curioso e gostei dessa matéria em especial decidi buscar mais informações por contra própria nos YouTubes da vida.

Aprendendo bastante sozinho sobre HTML ( Não sei a nível completo o quanto é bastante, mas já consigo criar uma página com tabelas, frameworks, imagens, textos, formulários, etc ) me deparei com o CSS e estou começando a aprender sobre ele, porém estou vendo que existem muitos comandos com a mesma função que no HTML, por exemplo o comando de inserir uma imagem de fundo, ou colocar uma cor de fundo, etc.

Com isso surgiu uma dúvida em minha cabeça, a dúvida é seguinte, o que é mais usual e qual o motivo disso, usar os comandos de formatação de textos, imagens, cores, fontes, etc tiretamente no código HTML ou usa-los diretamente no CSS e importa-los através do " <link rel="stylesheet" type= "text/css" href="exemplo.css" /> " ???

( por enquanto sei que podemos usar o CSS dentro do próprio HTML e/ou usa-lo como um documento separado e importa-lo com o "link rel" , se tiver outra forma de importar os comandos do CSS no HTML favor relevar, estou começando do básico, não quero pular partes )

[DiF]

@Kauan Oliveira Olá, seja bem vindo em nosso Clube do Hardware.

 

O CSS ou Folhas de estilo em cascata, serve para  estilizar a estrutura HTML. Isso você  já sabe.

O CSS incorporado e linkado  são iguais, a única diferença é que uma é escrita dentre a estrutura de cabeçalho pela tag <style>  e outra você linka  para um arquivo externo.

 

Ainda existe um outro que se chama "Inline"  que é usada diretamente no elemento através do atributo  style.

Este método inline,  tem grau de precedência maior. veja um exemplo:

 

<div class="green" style="background-color: blue;"></div>

div{
  width: 300px;
  height: 300px;
}
.green{
   background-color: green;
}

O elemento DIV, possui uma classe chamada green dizendo que ela deve ter o fundo verde, mas como atributo style foi declarado ali dentro do elemento, vai fazer com que o elemento DIV tenha o fundo azul porque o atributo inline tem grau de precedência maior.

 

Para que o elemento DIV tenha o fundo verde sem retirar o atributo style inline,  usa-se o " !important " fazendo que você sobrescreva o grau de precedência.

 

.green{
   background-color: green !important;
}

Veja um exemplo prático aqui: https://jsfiddle.net/dife/8f3q56gg/

Aplique o !important na classe green e clique em "Run" !

 

Respondendo a sua pergunta,  dê preferência para usar o CSS linkado, pois permite a manutenção do código de forma mais fácil.

No HTML não existe nenhum elemento de estilo. Ele serve somente para estruturar o site. 

Antigamente quando não existia o CSS, os estilos eram feito diretamente nos elementos deixando o código muito sujo. O CSS veio para resolver isso. Isso permitiu ter heranças e especificidades

 

Normalmente quando se estuda o HTML, você estuda em paralelo o CSS também. Os dois sempre estão juntos.

Por recomendação, sugiro que você dê uma estudada sobre a técnica Tableless que é justamente a estrutura sem tabelas!