CSS (Cascading Style Sheets)
Hoje iremos falar um pouco sobre CSS (Cascading Style Sheets), é uma linguagem de estilos usada para controlar a aparência dos elementos em uma página web. Ele trabalha em conjunto com o HTML(assunto do post anterior), que é usado para definir a estrutura e o conteúdo da página.
Abaixo estão os passos básicos para começar a usar o CSS:
1.Seletores:
Os seletores CSS são usados para selecionar os elementos HTML que você deseja estilizar. Existem diferentes tipos de seletores, mas os mais comuns são os seletores de tipo, classe e ID.
- Seletores de tipo: Seleciona elementos com base em seu tipo HTML. Por exemplo, <"h1"> seleciona todos os cabeçalhos de nível 1 na página.
- Seletor de classe: Seleciona elementos com base no valor no atributo "class" do elementos HTML. Por exemplo, ".destaque" seleciona os elementos com a classe "destaque" (na prática ficaria "class='destaque' como parâmetro no HTML e no css '.destaque {os estilos desejados}'".
- Seletor de ID: Seleciona um elemento com base no valor atribuído "id" do elemento HTML. Por exemplo "#cabecalho" seleciona o elemento com o ID "cabecalho".
Você pode estar se perguntando "se já existe o class porque usaria o ID?", eu te respondo jovem gafanhoto, o class você pode usar em várias partes do código, já o ID é exclusivo de uma tag, sua estilização será somente pra onde ele for chamado.
2.Propriedades e valores:
As propriedades CSS são usados para definir o estilo dos elementos selecionados. Cada propriedade tem um valor associado que especifica como o estilo deve ser aplicado.
Por exemplo, a propriedade "color" define a cor do texto e pode ter valores como "vermelho", "azul", "rgb(255,0,0)" (vermelho em formato RGB) ou "#FF0000" (vermelho em formato hexadecimal).
3.Regras CSS:
As regras CSS consistem em um seletor seguido de um bloco de declarações entre chaves. Cada declaração contém uma propriedade e um valor separados por dois pontos ( : ). As declarações são separadas por ponto e vírgula.
Aqui está um exemplo de uma regra CSS que define a cor do texto para os cabeçalhos de nível 1(<h1>) com a classe "destaque".
h1.destaque {
color: red;
4.Incorporar CSS no HTML:
Existem várias maneiras de incorporar CSS em uma página HTML. A forma mais comum é usando a tag <style> no cabeçalho da página ou usando um arquivo de CSS externo (que é a melhor maneira de se fazer, mas vale lembrar que isso é só uma introdução, uma explicação básica sobre o CSS).
Para usar a tag <style> você pode colocar as regras CSS entre as tags <style> e </style> dentro da seção <head> do HTML.
<!DOCTYPE html>
<html>
<head>
<style>
h1.destaque {
color: red;
}
</style>
</head>
<body>
<h1 class="destaque">Título do seu projeto</h1>
<h1>Outro título</h1>
</body>
</html>
5.Experimente e pratique:
A melhor maneira de aprender qualquer coisa na vida é a prática, com CSS e HTML não é diferente, vou deixar abaixo alguns sites MUITO BONS para aprender e treinar CSS. Bons estudos e vamos pra cima.
Top comments (0)