Introdução
Você já se perguntou como os sites na internet ficam tão bonitos e bem organizados? Bem, a resposta está no CSS! CSS é a sigla para Cascading Style Sheets, que em português significa Folhas de Estilo em Cascata. É uma linguagem de estilo utilizada para definir a aparência e o estilo dos elementos em uma página da web. Neste artigo, vamos introduzir o CSS e mostrar como ele funciona de forma simples e acessível.
O que é CSS?
CSS é uma linguagem de estilo usada para definir o layout e a aparência dos elementos de uma página da web. Ela trabalha em conjunto com o HTML, que é a linguagem de marcação responsável pela estrutura do conteúdo de uma página. Enquanto o HTML se concentra nos elementos e na organização do conteúdo, o CSS entra em ação para definir as cores, fontes, tamanhos, espaçamentos e outros estilos que tornam a página visualmente atraente.
Como funciona o CSS?
O CSS funciona através de regras que são aplicadas aos elementos HTML em uma página. Essas regras são escritas em um arquivo separado chamado arquivo CSS, ou podem ser inseridas diretamente nas tags HTML usando o atributo “style”. Cada regra consiste em um seletor e um bloco de declarações. O seletor define qual elemento HTML será estilizado, e as declarações especificam as propriedades e valores que serão aplicados a esse elemento.
Exemplo 1 – Estilizando página HTML diretamente
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de CSS</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Bem-vindo ao meu site</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
Exemplo 2 – Estilizando com arquivo .CSS
Também é possível estilizar a página HTML com um arquivo externo que contem os códigos em CSS. Dessa forma, você consegue deixar as estilizações que deseja em um arquivo separado, podendo conectar o arquivo (fazer um link) com o HTML. Veja a seguir.
Primeiro nossa página HTML com a tag <link/> que fará a conexão com nosso arquivo estilos.css
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<h1>Bem-vindo ao meu site</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
E aqui está o arquivo CSS (estilos.css) que estiliza os elementos HTML acima:
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
Neste exemplo, o seletor h1 seleciona o elemento <h1> e define a cor do texto como azul e o tamanho da fonte como 24 pixels. O seletor p seleciona os elementos <p> e define a cor do texto como verde e o tamanho da fonte como 16 pixels.
Seletores:
Os seletores são usados para especificar qual ou quais elementos HTML devem ser estilizados. Existem diferentes tipos de seletores, como seletores de elementos, seletores de classe e seletores de ID. Os seletores de elementos são usados para selecionar um determinado tipo de elemento, como <h1>, <p>, <div>, entre outros. Os seletores de classe permitem estilizar elementos que possuem uma determinada classe atribuída a eles, enquanto os seletores de ID selecionam um elemento específico que possui um ID único.
Propriedades e valores:
As propriedades são os atributos do estilo que você deseja aplicar, como cor, tamanho da fonte, margem, entre outros. Os valores são as configurações específicas que você deseja aplicar a essas propriedades, como “azul” para a cor, “16px” para o tamanho da fonte, ou “10px” para a margem.
Conclusão
O CSS é uma linguagem poderosa que permite controlar a aparência dos elementos em uma página da web. Com ele, você pode personalizar cores, fontes, tamanhos e outros estilos para criar um site único e atraente. Embora este artigo tenha oferecido apenas uma introdução básica ao CSS, esperamos que você tenha obtido uma compreensão inicial sobre como essa linguagem funciona. Se você estiver interessado em aprender mais, existem muitos recursos online disponíveis, incluindo tutoriais e documentação oficial, que podem ajudá-lo a aprofundar seus conhecimentos sobre CSS.
Espero que este artigo introdutório tenha sido útil para você! Se você tiver mais dúvidas sobre CSS ou qualquer outro assunto relacionado à web, fique à vontade para perguntar.
Autor(a) do artigo
Thales Henrique
Thales, Analista de Sistemas formado na Fatec Itapetininga. Possui desde capacitações na área de TI como desenvolvimento web, desenvolvimento de apps e softwares da Adobe. Ampla experiência e paixão por serviços em Help Desk e como professor de informática. Grande aficionado por games, séries e animes.
