Estilos CSS em HTML

Página 11

Estilos CSS em HTML

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.

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.

Next page of the Free Ebook:

12Introdução ao JavaScript em HTML