Após ter descoberto o que é HTML e como ele funciona, deve ter ficado curioso para saber como deixamos as páginas bem estilizadas com o CSS. Por isso agora vamos abordar qual é o seu surgimento, como funciona e como integrar o CSS ao HTML, com um guia descomplicado de fácil entendimento!
Conteúdo
O que é CSS?
O CSS ou Cascading Style Sheet (Folhas de Estilo em Cascata) é usado para criar páginas web agradáveis visualmente, estilizando os elementos escritos em uma linguagem de marcação, como o HTML.
Origem
Foi desenvolvido pela W3C em 1996 para suprir as necessidades de estilização de uma página, já que a atual linguagem de marcação HTML não foi feita para suportar tags de formatação de conteúdo.
Sua primeira função foi separar o código de estilo e conteúdo da página, facilitando para os desenvolvedores, pois assim tornavam os documentos mais fáceis de serem escritos e atualizados.
CSS3
O CSS3 foi lançado em 2010, e é a versão mais atual. Também veio com novas melhorias com relação às versões anteriores, dando mais flexibilidade e controle ao desenvolvedor ou webdesigner.
Como o CSS funciona
Ele tem uma sintaxe simples, nomeada em inglês para especificar as propriedades de cada elemento de uma página. A estrutura funciona com as partes de seleção e partes de declaração, só selecionar o elemento que querer e declarar os estilos que ira adicionar. Como no exemplo abaixo:
/* seleção "p" paragrafo. Dentro das {} as declarações
na estrutura propriedade e valor seguido de um ; */
p {
color: red;
}
Como integrar o CSS no HTML?
Também temos um artigo completo sobre como linkar o CSS no HTML.
Elementos Básicos do CSS
Os seletores podem ser tags do HTML, #id e .classe
Tags
São todas as tags do HTML, isso ira selecionar todos os elementos de uma página referente a mesma tag. Ex: body <body>, h1 <h1>, span <span>, p <p>. No exemplo abaixo o título ira ficar com a cor vermelha:
Classes
Ira selecionar apenas elementos referentes a essa mesma classe. Para criar é bem simples basta seguir na sua folha de estilo .nome-da-sua-classe, e adicionar na tag HTML class=”nome-da-sua-classe” lembrando que uma tag html pode ter mais de uma classe. Você pode entender como nomear as classes de forma eficiente com a metodologia BEM, ou também, pode seguir um exemplo abaixo para entender melhor:
ID
O uso dos IDs são parecidos com as classes com a diferença que só pode haver um ID na tag e seu seletor é #id, para declarar na tag basta usar o parâmetro id=““. siga o exemplo abaixo:
<!-- Seletor: tags do HTML -->
<h1>Helo World!</h1>
<style>
h1 {
color: red;
}
</style>
<!-- Seletor: classes -->
<h1 class="classe1">Helo World!</h1>
<style>
.classe1 {
color: red;
}
</style>
<!-- tag HTML com mais de uma classe -->
<h1 class="classe1 classe2">Helo World!</h1>
<style>
.classe1 {
color: red;
}
.classe2 {
font-size: : 20px;
}
</style>
<!-- Seletor: IDs -->
<h1 id="id1">Helo World!</h1>
<style>
#id1 {
color: red;
}
</style>
CSS Interno, Externo e Inline
CSS Interno: Deve ser adicionado na seção <head> com as tags <style type=”text/css”>seu conteúdo</style>. Esse método trás vantagens, pois todo o seu código estará na mesma página, assim não precisara fazer requisição de arquivos externos, mas também pode dificultar a sua edição devido ao tamanho do código e também causar lentidão na página.
CSS Externo: Você deve criar um arquivo externo do tipo .css e escrever todo o seu estilo dentro deste documento, e então chamar dentro das tags <head> com a tag <link rel=”stylesheet” type=”text/css” href=”seu-arquivo.css” />. Este traz vantagens na hora da edição de códigos extensos e tempo de carregamento.
CSS Inline: Neste o estilo é aplicado diretamente na tag html com o atributo style=”seu estilo”. Pode servir para uma edição rápida, mas no geral não é recomendada, pois, pode deixar seu código bagunçado e lento.
Siga os exemplos abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo CSS</title>
<!-- Método CSS interno -->
<style type="text/css">/* seu conteúdo */</style>
<!-- Método CSS externo, em um arquivo .css -->
<link rel="stylesheet" type="text/css" href="seu-arquivo.css" />
</head>
<body>
<!-- Método CSS Inline -->
<h1 style="/* seu conteúdo */">Exemplo CSS</h1>
</body>
</html>
Encontrou dificuldades na hora de aprender? Para compreender este tutorial é recomendado que saiba o básico sobre HTML, se você não souber acesse o tutorial O que é HTML?
Também iremos indicar mais três posts para seguir depois que se sentir confortável pelo seu avanço:
- Criando uma página básica;
- Como usar media queries para ter um site responsivo em dispositivos moveis;
- Como usar variáveis no CSS.
Caso ainda tenha dúvida entre em contato conosco.
Desenvolvemos um editor HTML online para você! Focado em iniciantes e pessoas que queiram fazer testes rápidos, tudo isso de graça! Então se já começou aprender HTML, CSS e quer começar a treinar e desenvolver as suas habilidades é ideal para você, acesso no link abaixo:
Como se tornar um Desenvolvedor Web?
Sei que deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
