Conheça todas as 3 formas de aplicar CSS no HTML.

Nas aulas anteriores aprendemos o que é CSS, como declarar os comandos de mudanças de estilo nas suas páginas, porém não vimos ainda como aplicar de fato o CSS nas nossas páginas. Nessa aula vamos esclarecer as 3 formas de usar CSS.

CSS interno

A primeira forma de aplicar CSS que vamos ver talvez seja a mais simples: O CSS interno. Para adicionar dessa maneira basta ir dentro do <head> de sua página, criar as tags “<style></style>” e dentro delas colocar todo o seu CSS.

Quando utilizamos CSS interno apenas a página que recebeu esse CSS é afetada por ele, impossibilitando reutilizar o CSS para todas as outras páginas de seu site.

Ao criar um site é preciso manter um padrão de aparência, então o menu é igual em todas as páginas por exemplo, a posição da marca, cor de textos, fonte e muito mais.

Por esse motivo usamos o CSS externo para que ele seja reutilizado em todas as páginas do site.

CSS externo

A forma mais indicada de utilizar o CSS em suas páginas HTML é através de um arquivo externo. Nessa forma separamos o CSS em outro arquivo diferente do seu HTML, e usamos a tag link para incorporar esse arquivo externo a sua página.

Uma vantagem em utilizar o CSS externo é que você pode reutilizar esse CSS em todas as páginas de seu site, basta apenas usar a incorporação acima.

Reaproveitar CSS interno é inviável pois ele esta diretamenta escrito na sua página HTML, para isso seria preciso copiar o CSS e sair colando em todas as suas páginas HTML.

CSS inline

A terceira e última forma de utilizar o CSS é inline. Essa forma de aplicar CSS é diretamete escrita nos elementos do HTML através de atributo. Para aplicar por exemplo CSS no elemento “h2” usamos:

Utilizamos o atributo “style” e dentro dele colocamos os comandos do CSS. Essa aplicação de CSS vai afetar apenas esse elemento que recebeu o valor.

Dessa forma não precisamos usar os seletores, pois como já estamos colocando o CSS no elemento que queremos modificar a aparência, só precisamos informar as propriedades que queremos alterar.

Essa maneira de usar CSS é indicada apenas quando queremos modificar algum muito específico num elemento, e que essa mudança não afete mais nenhum outro.