Última atualização em 09/07/2023
CSS (Cascading Style Sheets) é o que torna as páginas da web boas e apresentáveis. É uma parte essencial do desenvolvimento web moderno e uma habilidade obrigatória para qualquer web designer e desenvolvedor.
Neste artigo, apresentarei uma introdução rápida para ajudá-lo a começar a usar CSS.
Estou assumindo que você tem um conhecimento básico de HTML, mas além disso não há pré-requisitos para este tutorial.
Começando
Vamos começar aprendendo como podemos incluir CSS em nossos projetos. Normalmente, existem três maneiras de fazer isso.
1. CSS embutido
Primeiro, podemos incluir CSS diretamente em nossos elementos HTML. Para isso, fazemos uso do styleatributo e, em seguida, fornecemos propriedades para ele.
<h1 style="color: blue"> Hello world! </h1>
Aqui estamos dando a propriedade de colore definindo o valor como blue, o que resulta no seguinte:
Também podemos definir várias propriedades dentro da styletag, se quisermos. No entanto, não quero continuar nesse caminho, pois as coisas começam a ficar confusas se nosso HTML estiver cheio de CSS dentro dele.
É por isso que o segundo método para incluir CSS foi introduzido.
2. CSS interno
A outra maneira de incluir CSS é usando o styleelemento na headseção do documento HTML. Isso é chamado de estilo interno.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
No elemento de estilo, podemos dar o estilo aos nossos elementos HTML selecionando o(s) elemento(s) e fornecendo atributos de estilo. Assim como aplicamos a colorpropriedade ao h1elemento acima.
3. CSS externo
A terceira e mais recomendada maneira de incluir CSS é usando uma folha de estilo externa. Criamos uma folha de estilo com uma .cssextensão e incluímos seu link no documento HTML, assim:
<head>
<link rel="stylesheet" href="style.css">
</head>
No código acima, incluímos o link do style.cssarquivo usando o linkelemento. Em seguida, escrevemos todo o nosso CSS em uma folha de estilo separada chamada style.csspara que seja facilmente gerenciável.
h1 {
color: blue;
}
Esta folha de estilo também pode ser importada para outros HTMLarquivos, então isso é ótimo para reutilização.
Seletores CSS
Como discutimos anteriormente, CSS é uma linguagem de design que é usada para estilizar elementos HTML. E para estilizar os elementos, primeiro você precisa selecioná-los. Você já viu um vislumbre de como isso funciona, mas vamos nos aprofundar um pouco mais nos seletores CSS e ver três maneiras diferentes de selecionar elementos HTML.
1. Elemento
A primeira maneira de selecionar um elemento HTML é simplesmente usando o nome, que foi o que fizemos acima. Vamos ver como isso funciona:
h1 {
font-size: 20px;
}
p {
color: green;
}
div {
margin: 10px;
}
O exemplo acima é quase autoexplicativo. Estamos selecionando diferentes elementos como h1, pe divdando a eles diferentes atributos de estilo. O font-sizecontrola o tamanho do texto, colordefine a cor do texto e marginadiciona espaçamento ao redor do elemento.
2. Classe
Outra maneira de selecionar elementos HTML é usando o atributo class. Em HTML, podemos atribuir diferentes classes aos nossos elementos. Cada elemento pode ter várias classes e cada classe também pode ser aplicada a vários elementos.
Vamos vê-lo em ação:
<div class='container'>
<h1> This is heading </h1>
</div>
.container {
margin: 10px;
}
No código acima, atribuímos a classe de containerao elemento div. Na folha de estilo, selecionamos nossa classe usando .classNameformat e dando a ela uma 10pxmargem.
3. Identificação
Assim como as classes, também podemos usar IDs para selecionar elementos HTML e aplicar estilos a eles. A única diferença entre classe e ID é que um ID pode ser atribuído a apenas um elemento HTML.
<div>
<p id='para1'> This is a paragraph </p>
</div>
#para1 {
color: green;
font-size: 16px;
}
O exemplo acima mostra como atribuímos um ID ao elemento de parágrafo e, posteriormente, usamos o seletor de ID na folha de estilo para selecionar o parágrafo e aplicar o estilo a ele.
Leia também: O Que é GitHub e Como Usá-lo
Fontes e cores
CSS nos fornece literalmente centenas de opções para brincar com fontes e cores e fazer nossos elementos HTML parecerem bonitos. Podemos escolher entre dois tipos de nomes de família de fontes:
1. Família genérica: um grupo de famílias de fontes com aparência semelhante (como ‘Serif’ ou ‘Monospace’)
2. Família de fontes: uma família de fontes específica (como ‘Times New Roman’ ou ‘Arial’)
Para cores, podemos usar nomes de cores predefinidos ou valores RGB, HEX, HSL, RGBA, HSLA.
<div class='container'>
<h1 class='heading1'>
CSS is Coooooool!!!!
</h1>
</div>
.container {
width: 500px;
height: 100px;
background-color: lightcyan;
text-align: center;
}
.heading1 {
font-family: 'Courier New';
color: tomato;
}
Como você pode ver no exemplo acima, temos um elemento div com a classe de container. Dentro desta div, existe uma h1tag com algum texto dentro dela.
Na folha de estilo, selecionamos a classe de contêiner e definimos seus width, height, background-colore text-align.
Por fim, selecionamos a .heading1classe — que é aplicada à h1tag — e damos a ela os atributos de font-familye color.
Conclusão
Você pode se sentir um pouco sobrecarregado com todas essas informações, mas não se preocupe.