CSS

CSS: Saiba o que é, para que serve, como usar e mais dicas


Agora que você entendeu neste outro artigo o que é HTML, sabe como é a base de todos os sites que você acessa.

O que você talvez ainda não saiba, é que esta não é a única linguagem que podemos utilizar para construir uma página.

Apesar do HTML ser capaz de construir páginas extremamente bem estruturadas, ele não pode estilizá-las, ou seja, acrescentar um estilo em seus blocos de conteúdo.

Para suprir esta necessidade, foi criada uma linguagem de estilo, voltada exclusivamente para embelezar o HTML: o CSS, ou Cascading Style Sheets.

No artigo de hoje, falaremos sobre o que é CSS, como ele funciona e como aplicá-lo aos códigos HTML desenvolvidos por você.

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 estéticos 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.

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.

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:

@media only screen and (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

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:

h1{

  font-style: italic;

}

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.

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:

<html>

<head>

<title>Título da página</title>

<style type=”text/css”>

h2 {

color: blue;

}

</style>

</head>

<body>

<h2>Este é o elemento estilizado.</h2>

</body>

</html>

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:

<h3 style=”font-size: 14px”>Este é o título estilizado.</h3>

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:

<link rel=”stylesheet” href=”estilo.css”>

Para importar uma folha de estilo, é preciso utilizar a regra @import dentro do atributo style, também dentro da tag <head>. Segue um exemplo:

<style type=”text/css”>

@import url(“estilo.css“);

</style>

O valor “estilo.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:

.titulo{

  color: #ffffff

}

Para inseri-la em meu HTML, basta indicá-la da seguinte maneira:

<h1 class=”titulo”>Título estilizado</h1>

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.

Além disso, com o método de pagamento ISA (Income Share Agreement) você só começa a pagar pelos seus estudos após concluí-los e se tiver uma renda mínima de  R$ 3.000,00. Caso você não tenha essa renda mínima após a conclusão do curso, não precisa pagar nada pra Kenzie.

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!

A Kenzie Academy é uma escola americana de programação, em que você estuda por 12 meses, em tempo integral, as principais linguagens e tecnologias do mercado para entrar no mercado de tecnologia atuando como um Full Stack.

Leia também:

0

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *