DEV Community

Douglas Costa
Douglas Costa

Posted on

2 1

CSS

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.

W3Schools
MDN Web Docs

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay