Estilos CSS em HTML

Capítulo 11

Tempo estimado de leitura: 3 minutos

+ Exercício
Audio Icon

Ouça em áudio

0:00 / 0:00

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a aparência e o layout de um documento HTML. Com o CSS, é possível separar o conteúdo do documento da sua apresentação visual, tornando a manutenção e a atualização do site mais fácil e eficiente.

Existem três formas de adicionar estilos CSS a um documento HTML:

  • Estilos inline: são aplicados diretamente a um elemento HTML, utilizando o atributo "style".
  • Estilos internos: são definidos dentro da seção "head" do documento HTML, utilizando a tag "style".
  • Estilos externos: são definidos em um arquivo CSS separado e vinculados ao documento HTML através da tag "link".

Independentemente da forma escolhida, os estilos CSS são compostos por um seletor e um conjunto de propriedades e valores. O seletor é utilizado para escolher os elementos HTML que receberão os estilos, enquanto as propriedades e valores definem a aparência e o layout desses elementos.

Por exemplo, o seguinte código CSS define um estilo para todos os títulos h1 do documento:

  
    h1 {
      color: red;
      font-size: 24px;
      text-align: center;
    }
  

Nesse caso, o seletor é "h1" e as propriedades e valores definem a cor do texto como vermelho, o tamanho da fonte como 24 pixels e o alinhamento do texto como centralizado.

Continue em nosso aplicativo e ...
  • Ouça o áudio com a tela desligada
  • Ganhe Certificado após a conclusão
  • + de 5000 cursos para você explorar!
ou continue lendo abaixo...
Download App

Baixar o aplicativo

Além das propriedades básicas de estilo, como cor, fonte e tamanho, o CSS oferece uma ampla variedade de propriedades para controlar a aparência e o layout dos elementos HTML. Algumas das propriedades mais comuns incluem:

  • background-color: define a cor de fundo do elemento.
  • border: define a borda do elemento, incluindo sua espessura, estilo e cor.
  • padding: define o espaço interno do elemento, entre seu conteúdo e sua borda.
  • margin: define o espaço externo do elemento, entre sua borda e o próximo elemento.
  • display: define como o elemento é exibido na página, como bloco, inline ou flexível.
  • position: define a posição do elemento na página, como estática, relativa ou absoluta.

Combinando essas propriedades e valores, é possível criar layouts complexos e personalizados para um site. No entanto, é importante lembrar que o CSS deve ser utilizado de forma responsável e eficiente, evitando o uso excessivo de estilos e garantindo a acessibilidade e usabilidade do site para todos os usuários.

Agora responda o exercício sobre o conteúdo:

_Qual das seguintes opções é uma forma de adicionar estilos CSS a um documento HTML?

Você acertou! Parabéns, agora siga para a próxima página

Você errou! Tente novamente.

Estilos inline são uma forma de adicionar CSS diretamente a elementos HTML usando o atributo "style". Eles são mencionados na introdução às formas de aplicar estilos CSS no texto fornecido.

Próximo capitúlo

Introdução ao JavaScript em HTML

Arrow Right Icon
Capa do Ebook gratuito Curso completo de HTML
30%

Curso completo de HTML

3.5

(2)

37 páginas

Baixe o app para ganhar Certificação grátis e ouvir os cursos em background, mesmo com a tela desligada.