CSS interno - exemplo

CSS básico – Aprenda 3 formas de usar CSS

Usando CSS, existem 3 formas de alterar o estilo das páginas web de um site: externo, interno e inline.

O inline é a forma mais fácil de fazer porque você só precisa escrever o código CSS no elemento HTML que você quer modificar o estilo, o exemplo de código-fonte abaixo, mostra como isso pode ser feito:

CSS inline - Exemplo
 Exemplo de como você pode alterar o estilo de uma página HTML, usando CSS inline.

O exemplo da figura acima, altera o tamanho e a cor do texto, repare que para isso ser possível, o atributo style foi utilizado.  Lembre-se que se optar por usar a forma inline, terá que usar a palavra style no elemento que você quer modificar.

No texto abaixo, eu explico as duas outras formas de alterar o estilo:

Como usar CSS interno

Para usar CSS interno no seu código HTML, escreva o seu código CSS dentro da tag style (Lembrando que as linhas de código desta tag devem ser colocadas dentro do <head>, como mostra o exemplo abaixo):

CSS interno - exemplo
Exemplo que mostra um trecho de código que utiliza CSS interno.

O exemplo da figura acima, altera o fundo da tela para cor prata.

Como utilizar um arquivo CSS externo

Esta é a minha forma preferida porque permite alterar o estilo de várias páginas web ao mesmo tempo.

Para utilizar um arquivo CSS externo, crie um arquivo CSS para ser chamado pela sua página web, neste exemplo, ele será chamado de “estilo_teste.css” e em seguida coloque dentro do <head> da sua página web, linhas de código para vincular este arquivo CSS à sua página web.

Exemplo de conteúdo de um arquivo CSS externo
Exemplo de conteúdo de um arquivo CSS externo.

Para entender melhor, veja o exemplo de arquivo CSS na imagem acima e veja o exemplo de trecho de código HTML abaixo, em seguida repare que no fim da linha tem o nome do arquivo CSS, é este arquivo CSS que vai alterar o estilo da página HTML.

Trecho de código que mostra como vincular um arquivo HTML a um arquivo CSS externo.
Trecho de código que mostra como vincular um arquivo HTML a um arquivo CSS externo.

Espero que eu tenha conseguido te ajudar com o conteúdo deste post, caso precise de mais informações para começar a desenvolver sites e ainda não sabe o que precisa priorizar na hora de estudar desenvolvimento web, recomendo que leia o post As primeiras linguagens que você deve aprender para criar um site – parte 1.

As primeiras linguagens que você deve aprender para criar um site – parte 1

– Para criar e manipular a estrutura básica do site aprenda HTML;
– Para criar e manipular o estilo do site aprenda CSS (Existem 3 formas de usar CSS);
– Para criar e manipular a parte dinâmica do site aprenda Javascript;

Este post é apenas uma introdução ao assunto desenvolvimento web, para saber mais sobre desenvolvimento de site, clique aqui para ler a parte 2.