O CSS (Cascading Style Sheets) é uma linguagem de estilo que é utilizada para controlar a aparência visual de uma página da web. Através do CSS, pode-se definir o layout, as cores, as fontes, os tamanhos e outras propriedades de estilo de uma página HTML.
Neste artigo, vamos ver os princípios básicos do CSS, desde a sintaxe até a aplicação de estilos em elementos HTML.
Sintaxe do CSS
O CSS é composto por regras que definem o estilo dos elementos HTML. Cada regra é composta por um selector, que especifica qual elemento HTML a regra se aplica, e um bloco de declarações, que define as propriedades de estilo para o elemento selecionado. A sintaxe básica de uma regra CSS é a seguinte:
seletor {
propriedade: valor;
propriedade: valor;
/* mais propriedades */
}
O selector pode ser um elemento HTML, uma classe, um ID ou qualquer outro atributo. As propriedades são os estilos que se deseja aplicar ao elemento selecionado, e o valor é o valor da propriedade.
Selectores do CSS
Existem várias maneiras de selecionar os elementos HTML utilizando o CSS. Aqui estão alguns dos selectores mais comuns:
- Selector de elemento: selecciona todos os elementos com uma tag específica. Por exemplo,
p
seleciona todos os parágrafos na página. - Selector de classe: selecciona todos os elementos com uma determinada classe. Por exemplo,
.destaque
seleciona todos os elementos com a classedestaque
. - Selector de ID: selecciona o elemento com um determinado ID. Por exemplo,
#cabecalho
seleciona o elemento com o IDcabecalho
. - Selector de atributo: selecciona todos os elementos com um determinado atributo. Por exemplo,
[type="text"]
selecciona todos os elementos com o atributotype
definido comotext
.
Propriedades do CSS
Existem centenas de propriedades CSS que podem ser utilizadas para definir o estilo dos elementos HTML. Aqui estão algumas das propriedades mais comuns:
background-color
: define a cor de fundo do elemento.color
: define a cor do texto do elemento.font-size
: define o tamanho da fonte do elemento.font-family
: define a família de fontes usada para o texto do elemento.margin
: define a margem ao redor do elemento.padding
: define o espaço interno do elemento.border
: define a borda ao redor do elemento.
Exemplos de utilização de CSS
Vamos ver alguns exemplos básicos de como o CSS pode ser utilizado para alterar o formato uma página HTML
Mudar a cor do texto
p {
color: blue;
}
Este exemplo define que todos os elementos "p"
(parágrafos) terão sua cor de texto como azul.
Alterar a fonte do texto:
h1 {
font-family: Arial, sans-serif;
}
Este exemplo define que todos os elementos h1
terão a fonte de texto definida como “Arial”, ou uma fonte sans-serif no caso de “Arial” não estar disponível.
Mudar a cor de fundo:
body {
background-color: #f0f0f0;
}
Este exemplo define que a cor de fundo de todo o documento será de um tom de cinza claro (#f0f0f0).
Definir a largura e altura de uma imagem:
img {
width: 200px;
height: 150px;
}
Este exemplo define que todas as imagens terão sua largura e altura definidas como 200 e 150 pixels, respectivamente.
Criar uma borda em redor de um elemento:
div {
border: 1px solid black;
}
Este exemplo define que todos os elementos div
terão uma borda sólida de 1 pixel com a cor preta.
Estes são apenas alguns exemplos básicos de como o CSS pode ser utilizado para formatar os elementos HTML. Há muitas outras propriedades que podem ser utilizadas para personalizar a aparência de uma página.