CSS: Saiba o que é, para que serve, como usar e mais dicas
Vamos imaginar um site como o nosso corpo humano. Temos a nossa estrutura óssea, nossa parte visual e o nosso cérebro. O HTML, como já abordamos neste outro artigo, é como se fosse o esqueleto do nosso corpo. É a base para estruturar e dar significado as informações de uma página na web. O JavaScript seria o nosso cérebro. Através dele, conseguimos dar vida e funcionalidades a nossa aplicação. Já o CSS seria a nossa parte visual. Em nossos projetos, o Cascading Style Sheets é a linguagem responsável pela estilização dos nossos elementos. Afinal, o que seria de um site sem uma boa aparência?
No artigo de hoje, falaremos sobre o que é CSS, como ele funciona e como aplicá-lo em seus códigos HTML. Vamos lá?
O que é o CSS?
Criada por Hakon Wium Lie e Bert Boss, o CSS, é uma linguagem de estilo.
Essas duas linguagens possuem funções complementares: enquanto o HTML é ótimo para estruturar e organizar elementos e informações na página, o CSS é responsável pela parte estética dessa estrutura.
CSS: para que serve?
O CSS serve, principalmente, para transformar páginas html simples em conteúdos atraentes, ou seja, trabalha diretamente com a estética do site.
Imagine que, lá no início da internet e de sua popularização, os sites eram todos esteticamente simples demais para os padrões virtuais que temos hoje.
Não que eles fossem propositalmente construídos para serem assim, mas não havia, até então, ferramentas suficientes para que eles pudessem ser mais atrativos, dando uma melhor experiência aos seus visitantes.
Quais as vantagens de usar CSS?
A primeira vantagem de usar CSS é, obviamente, construir páginas mais bonitas e sofisticadas.
Se o site que você está desenvolvendo precisa competir com algum concorrente, é importante que ele seja mais atraente que seus sites adversários, uma vez que as pessoas sentem-se mais atraídas por aquilo que elas consideram bonito e visualmente agradável.
Possuir um site que explora bem suas possibilidades estéticas é um grande diferencial, inclusive, para a experiência do usuário dentro daquele site.
Abaixo, detalharei melhor as três principais vantagens desta linguagem de estilo tão querida:
1 – Mudanças visuais e de estilo fáceis e rápidas
Além do grande leque de oportunidades que o CSS nos dá, ele também possui uma sintaxe extremamente simples e de fácil compreensão.
Isso torna sua manutenção muito mais amigável: desenvolver um arquivo .css, consertar um código já existente ou fazer quaisquer mudanças em uma página é, de modo geral, um processo muito simples.
2 – Responsividade
O css, além de ser uma linguagem de estilo, também é uma linguagem utilizada para trabalhar com o responsivo do seu site. Deixando mais flexível e adaptável para diferentes dispositivos.
Com esse recurso, você consegue definir ou editar determinado estilo de um elemento a cada breakpoint definido pelo usuário ou dispositivo.
Essa técnica para definir os Breakpoint é conhecida como media query, nela podemos aplicar uma propriedades de css para um determinado bloco caso uma determinada condição for verdadeira. Veja!
Se a janela do navegador tiver 600 px ou menos, a cor de fundo será azul claro:
3 – Folhas de estilo
As chamadas folhas de estilo são as folhas de código que declaram o estilo de um arquivo HTML. Em outras palavras, uma folha de estilo é um arquivo.css.
Uma das principais formas de aplicá-la a um HTML pré-existente é através da vinculação de um arquivo externo, o que facilita muito a manutenção destes códigos.
Na necessidade de mexer em algo dentro do CSS, é só ir diretamente em seu arquivo.css, sem precisar abrir o HTML, por exemplo, impedindo que uma linguagem interfira na outra.
Com apenas uma folha de estilo é possível trabalhar todas as páginas HTML de um site.
O que posso fazer com CSS?
Com a sua última atualização, o CSS 3, as possibilidades de estilização de layout desta linguagem aumentaram consideravelmente.
Listei abaixo alguns dos mais interessantes efeitos que podem ser construídos com CSS.
Animações
Advento do CSS 3, as animações dão mais vida à página onde estão.
Com o CSS, criar animações tornou-se muito simples. A propriedade animation é a grande responsável por esses efeitos, com conjunto com outras propriedades menores de qualificação.
Efeitos visuais
Além das animações, há diversos tipos de efeitos visuais disponíveis para CSS.
Entre eles, efeito gradiente, sombreamento 3D, fade in, mudança de cor (hover), rotação, crescer e encolher, inserção de bordas, entre outros.
Sites visualmente dinâmicos
Se tratando de estilização, um site dinâmico é aquele que conta com efeitos visuais que possibilitam uma interação um pouco maior do usuário com a página.
Com à criação do CSS, construir um site visualmente mais elaborado com grandes possibilidades de interação entre usuário e website se tornou muito mais simples do que era antes.
Como funciona o CSS?
Assim como o HTML, o CSS pode funcionar em blocos ou para toda a página.
Com uma sintaxe bastante acessível, esta linguagem de marcação funciona, em uma explicação breve, selecionando os blocos que serão modificados visualmente.
Como são os comandos?
Os comandos em CSS são bastante simples.
A própria sintaxe desta linguagem segue este modelo: para estilizar um bloco HTML, basta selecioná-la através do elemento seletor e, entre { } (chaves), declarar uma propriedade.
Veja abaixo um exemplo de uma linha de código CSS. Nele, o tipo de seletor é pela tag HTML h1:
O bloco HTML a ser estilizado pelo trecho de código acima é o h1, a propriedade é o estilo da fonte (font-style) e o valor é itálico (italic).
O que esse código CSS nos diz é que a fonte do título H1 deve ser itálico.
Quais os comandos básicos?
Os comandos básicos para uma estilização em CSS são:
- Fontes;
- Cor;
- Background (plano de fundo);
- Bordas;
- Altura;
- Largura;
- Preenchimento;
- Efeitos visuais;
- Etc.
Propriedades do CSS
Esses comandos básicos do CSS são denominados propriedades. Através delas, conseguimos passar valores que, transformados em código, irão estilizar os nossos elementos. Para utilizarmos em nosso código, é bem simples. Basta escrevermos o nome da propriedade e depois o valor que ela irá receber. Abaixo citaremos algumas das mais utilizadas nessa linguagem.
CSS background-image
Assim como temos a propriedade background-color, que define a cor de fundo, existe a background-image, que, como o próprio nome sugere, define uma imagem como fundo de determinado elemento. Essa propriedade irá receber como valor uma URL, que, basicamente, é o caminho a qual se encontra essa imagem.
CSS border
Essa propriedade define valores para a borda de um elemento. Ela engloba as propriedades de border-width, border-style e border-color. Ou seja, recebe como valor um tamanho de largura, o estilo e uma cor para essa borda. Em seus estilos, ela poderá ser sólida, pontilhada, possuir bordas duplas, entre outras opções de estilização.
CSS position
A função dessa propriedade é definir como um elemento será posicionado em nossa tela. Ela recebe os valores de absoluto ou relativo, além das posições de topo, direita, esquerda ou embaixo. Quando dizemos que um elemento possui um posicionamento absoluto, dizemos que ele se sobressai sobre outros elementos, enquanto o relativo se posiciona de acordo com o elemento pai.
CSS transition
Essa propriedade está interligada com os efeitos e animações dos elementos em nossa aplicação. Com a transição, conseguimos controlar um intervalo de tempo e a forma como nossas estilizações ocorrerão em determinado elemento. Essa propriedade recebe os valores de duração, delay, estilo, entre outros.
CSS Color
Essa é fácil, né? Como o próprio nome sugere, através dessa propriedade conseguimos definir qual será a cor do texto de um elemento em nosso site. São aceitos diversos valores de cor, sendo os mais utilizados: RGB, Hexadecimal e o nome da cor em inglês.
CSS display
Essa propriedade já é um pouco mais complexa. Basicamente, ela recebe como valor um modelo de exibição do elemento em tela. Esse modelo define o comportamento de posicionamento daquele elemento, podendo ser em bloco, em linha, um elemento flexível, entre outros.
Hover CSS
Essa propriedade é responsável por determinar a estilização de um elemento ao passarmos o mouse por ele, criando o que chamamos de efeito de hover. Para utilizarmos, precisamos selecionar o elemento que receberá esse efeito e depois escrevermos um código CSS normal. Simples, viu?
Box shadow CSS
Como a maioria das propriedades no CSS, o nome já entrega a sua funcionalidade. Box, traduzindo para o português, é caixa, e shadow é sombra. Ou seja, essa propriedade define os valores de sombra de uma “caixa”, que seria o nosso elemento. Sua funcionalidade permite criar efeitos incríveis!
CSS gradient
Os gradientes estão diretamente ligados à estilização de cores. Através dessa propriedade, conseguimos criar efeitos de transições entre duas ou mais cores. Existem os gradientes lineares, os radiais e os cônicos.
CSS margin
A funcionalidade dessa propriedade é definir as margens de um elemento. Com isso, conseguimos criar espaçamentos e dar uma estilização visualmente mais bonita para o nosso site.
CSS padding
Assim como a margem, essa propriedade tem como finalidade definir espaçamentos. A diferença é que o padding define esses espaçamentos internamente no próprio elemento, enquanto a margem define externamente.
Integrando CSS ao HTML
Existem três maneiras de vincular arquivos de CSS a uma página HTML: interno, externo e inline.
Interno
O CSS interno, ou incorporado, é aquele que é inserido dentro do código HTML, mais especificamente dentro da tag <head>, através de uma tag style.
Esta é uma boa opção de conexão com HTML quando todo o estilo será aplicado a apenas uma página.
Veja, abaixo, um exemplo:
Inline
O CSS inline também é acrescido diretamente no HTML, mas dentro de cada tag que deve ser estilizada.
Também através do atributo style, esta declaração CSS se insere dentro de uma tag.
Abaixo, um exemplo de CSS inline:
Esta é a opção menos prática de inserção de CSS porque não facilita a manutenção do documento.
Externo
O CSS externo é o mais utilizado por desenvolvedores front-end que manuseiam CSS e é a melhor opção em termos de performance e agilidade.
Nesta modalidade de vinculação, o arquivo .css é totalmente separado do arquivo .html.
A folha de estilo fica totalmente separada permitindo que quaisquer alterações sejam feitas com mais rapidez. Elas podem ser linkadas ou exportadas para o arquivo HTML utilizado.
Para linkar uma folha de estilo à um arquivo HTML, basta inserir o elemento link na tag <head> do documento:
O valor “style.css” destacado acima se refere ao documento .css que deve ser utilizado para as alterações visuais da página HTML onde este trecho de código está inserido.
Criando uma folha de estilo
Criar uma folha de estilo é muito descomplicado.
Basta você criar um arquivo, e adicionar o sufixo .css, isso definirá o tipo desse arquivo, ou seja, vai ser do tipo CSS. E nesse arquivo voĉe já pode adicionar os comandos de estilização.
Para criar seu código CSS, editores de código populares como VS Code, Atom e Sublime são suficientes.
Para trabalhar online, ferramentas como o CodePen são boas pedidas.
Elementos básicos
Tags HTML, classes e IDs são três elementos básicos na seleção de elementos no CSS.
Abaixo, explicarei detalhadamente sobre cada um deles.
Tags HTML
As tags de HTML são o elo entre os dois arquivos e são utilizadas como seletores em CSS.
Por exemplo, para estilizar um parágrafo, utilizamos a tag p como seletor, seguido de declaração, propriedade e valor.
Classes CSS
As classes tão populares no CSS também são seletores.
Ou seja: funcionam para selecionar componentes do HTML que serão modificados pelo CSS através de uma “apelido”.
Ao criar uma classe de estilo, integramos ela a um elemento ou tag no HTML através do atributo class=””.
Por exemplo, criarei abaixo a classe título:
Para inseri-la em meu HTML, basta indicá-la da seguinte maneira:
ID’s CSS
As ID’s também são seletores e possuem um funcionamento parecido com o das classes.
As diferenças estão em sua indicação — o ID’s é indicado pelo sinal # — e na quantidade de vezes que uma ID pode ser utilizada em uma tag HTML: cada tag só pode possuir uma ID.
Assim como inserimos uma classe através do parâmetro class=””, inserimos uma ID através do parâmetro id=””.
CSS3: o que tem de novo?
A última atualização desta linguagem de marcação é o CSS 3, de 2010, e trouxe novidades como animações, por exemplo.
Outras grandes avanços desta versão são:
- Cor, imagens, arredondamento e sombras em bordas;
- Tamanho de background;
- Cores HSL, HSLA, RGB e opacidade;
- Sombra de texto;
- Propriedades dinâmicas de interface;
- Seletores por atributos HTML (href, por exemplo);
- Etc.
Como aprender a usar CSS?
CSS é uma das mais básicas linguagens para quem deseja se especializar como um(a) programador(a) front-end, em conjunto com outras linguagens. Como é uma linguagem de estilo e trabalha em conjunto com o HTML, não pode ser utilizada em back-end, por exemplo.
No curso de programação full stack da Kenzie Academy Brasil você se capacita como uma pessoa programadora completa, apta a trabalhar tanto no front, quanto no back end.
Conclusão
HTML e CSS são apenas o início da jornada de aprendizagem para quem quer aprender programação.
Se você deseja mudar de carreira, não perca tempo e comece agora mesmo, ainda há muito para aprender!
E se você gostou desse conteúdo e gostaria de entrar na área de programação, faça a sua inscrição na próxima turma da Kenzie Academy Brasil.
Leia também: