O que é CSS e para que serve?
O que é o CSS, como ele difere do HTML e quais são seus elementos. Neste artigo, você vai saber tudo isso.
O CSS (Cascading Style Sheets) é um padrão que define como os dados são apresentados no navegador. Enquanto o HTML fornece informação sobre a estrutura de um documento, o CSS indica o aspecto que ele deve ter: a fonte, o fundo, o texto, as cores dos links, as margens e a disposição dos objetos na página.
O principal objetivo do desenvolvimento do CSS é separar o conteúdo — seja este escrito em HTML ou outra linguagem de marcação — do design de um documento. Essa separação pode aumentar a acessibilidade dos documentos, proporcionar mais flexibilidade e controle de sua apresentação, bem como reduzir a complexidade e a repetição de conteúdos estruturados. Além disso, o CSS permite apresentar o mesmo documento em diferentes estilos ou métodos de saída, como em uma tela, impressão, leitura por voz ou quando a saída utiliza dispositivos que usam Braille.
Fonte: Unsplash
Vantagens do CSS
- O CSS poupa tempo: Depois de criar um estilo CSS para um elemento HTML, você poderá usá-lo em muitas páginas da web.
- As páginas são carregadas mais rapidamente: Você não precisa repetir atributos de estilo HTML o tempo todo. Basta criar uma regra de estilo CSS para uma tag e ela será usada em todo o documento HTML. Dessa forma, menos código significa carregar uma página mais rápido.
- Alterar o layout de páginas web é mais fácil: Para fazer alterações globais, basta alterar o estilo e os elementos em todas as páginas web serão atualizados automaticamente.
- Mais espaço para a criatividade e engajamento do usuário: O CSS tem muito mais atributos de estilo que o HTML, então, você pode usá-lo para criar um design mais chamativo que no HTML e atrair mais público.
- É compatível com diferentes dispositivos: As folhas de estilo permitem otimizar a aparência do conteúdo da página para qualquer tipo de dispositivo. Usando o mesmo documento HTML, você pode oferecer diferentes versões de layout do site para vários dispositivos como PDA (Personal Digital Assistant ou Assistente Pessoal Digital), smartphones, tablets, etc.
- As páginas podem ser exibidas offline: As aplicações web podem armazenar o CSS por meio de um cache offline, permitindo que você veja os sites, sem conexão. O cache também fornece tempos de carregamento mais rápidos e um melhor desempenho do site.
- O CSS é usado por padrões web reconhecidos: Atualmente, os atributos de estilo HTML são considerados obsoletos, então, é recomendável o uso do CSS. É necessário começar a usar o CSS em todas as páginas web, para que sejam compatíveis com as futuras versões dos navegadores.
Fonte: Unsplash
Tipos de estilos CSS
- Estilos inline
Os estilos internos oferecem controle máximo sobre todos os elementos de uma página web. Isso se aplica a qualquer tag HTML com o atributo style da seguinte forma:
<p style=”font: 12pt Courier”>Este é um texto com um tamanho de 12 pontos e um estilo de fonte Courier</P>
Os estilos internos são úteis quando você precisa ajustar a visualização de algum elemento de uma página ou de um site pequeno.
- Estilos internos
Os estilos embutidos aparecem com a tag <style>, que geralmente é colocada no cabeçalho do documento HTML.
(<head>…</head>):
<html>
<head>
…
<style>
regras CSS
</style>
…
</head>
<body>
…
- Estilos externos
As folhas de estilo externo (external) são a melhor solução quando você está desenhando um site inteiro em um estilo. A descrição das regras fica em um arquivo separado. Use a tag <link> para vincular esta folha de estilo a cada página onde ela precisa ser aplicada. Por exemplo:
<link rel=stylesheet href=”sample.css” type=”text/css”>
Qualquer página que contenha um vínculo deste tipo será estilizada para que coincida com os estilos do arquivo sample.css. Tenha em mente que a folha de estilo pode permanecer fisicamente em outro servidor e você deve oferecer um caminho para ela no href.
Como usar o CSS?
O CSS tem uma sintaxe relativamente simples. Primeiro, você especifica um seletor, que seleciona um elemento específico da página (uma tag HTML, classe ou identidade). Depois de colocar colchetes, especifique a declaração: as propriedades com seus valores, separadas por dois pontos. As declarações em si ficam separadas por ponto e vírgula.
Fonte: Unsplash
Exemplo de uma regra de CSS:
seletor {propriedade: valor;}
Seletor CSS
Um seletor no CSS é uma estrutura que permite selecionar elementos individuais ou similares em uma página para atribuir a eles um estilo. Cada bloco de declaração CSS começa com um seletor contendo o seguinte:
my-class {
background-color: #999;
}
No exemplo, my-class é definido como um seletor. Todos os elementos com essa classe terão a mesma cor de fundo, cinza #999.
Os estilos são organizados em um único esquema usando uma cascata. Veja este exemplo simples, que também vai te ajudar a entender o que é o código CSS e como ele se apresenta:
p {
color: green;
font-size: 20px;
}
p {
color: red;
}
Seguindo o modelo, ao elemento p é atribuída a cor vermelha. Como a cor verde é declarada antes do vermelho, isso não será levado em conta. Para evitar conflitos, sempre serão usados os valores dos parâmetros declarados por último. O tamanho da fonte de 20 pixels não muda. Se isso é simplificado, fica assim:
p {
color: red;
font-size: 20px;
}
Além disso, pode-se fazer que um único elemento dependa de vários seletores de diferentes tipos. Por exemplo:
p {
color: red;
}
p.important {
font-size: 20px;
}
#intro {
font-style: italic;
}
Para usar todos os parâmetros no HTML, você deve declarar:
<p class=“important” id=“intro”>
O CSS simplifica a formatação dos documentos
</p>
Aqui, as seguintes propriedades foram atribuídas ao elemento: cor vermelha, tamanho de 20 pixels e itálico. Nesse caso, os diferentes seletores têm prioridades diferentes. Sua ordem de relevância é:
- Seletor de tipo de elemento (p).
- Seletor de classe (.important).
- Seletor ID (#intro).
1 é de baixa prioridade, enquanto 3 é alta.
Prioridades no CSS
A hierarquia de prioridades funciona da seguinte forma:
- É dada a máxima prioridade às propriedades com !important no final da declaração.
- Depois vêm os estilos inline, que são definidos com o atributo style da tag.
- Ainda menor é a prioridade dos estilos especificados com a tag style no próprio documento.
- Em seguida, há os estilos anexados ao documento como um arquivo de CSS externo usando a tag <link>.
O CSS é uma ferramenta útil, prática e eficaz para o design de páginas web, formatação de textos, links, imagens e outros elementos. Além disso, está em constante evolução: agora, a terceira geração deste padrão está sendo desenvolvida ativamente. Nele, a especificação se divide em módulos e o desenvolvimento de cada módulo é independente. Os desenvolvedores modernos estão ampliando gradualmente o suporte com o CSS3. Há alguns anos, a quarta geração do padrão começou a tomar forma, mas algumas especificações ainda estão no rascunho.
Todo o conhecimento de CSS, HTML e suas funções, você pode encontrar no curso interativo Desenvolvimento Front-End: do Zero ao Pro. Você vai aprender a desenvolver em HTML, a projetar com CSS, a interagir com o JavaScript e adicionar dinamismo com jQuery e React.
Em 5 meses, você vai se tornar um desenvolvedor Front-End e especialista em layouts de sites, que atraiam a atenção dos usuários, com a ajuda do professor Gian Souza. Ao final do curso, você receberá o certificado e estará preparado para começar sua carreira no aquecido mercado de TI. Para mais detalhes, clique no link a seguir: seja um desenvolvedor Front-End.
Caso você queira acessar conteúdo gratuito sobre a área de front-end, clica aqui e confira todos os nossos eventos que são abertos ao público. Aproveite!
Desenvolvimento Front-end do Zero ao Pro
Desenvolva sites e aplicativos fáceis e rápidos de usar. Aprenda a estruturar com HTML, estilizar com CSS e a implementar funcionalidades com JavaScript, JQuery, Bootstrap. Torne-se um desenvolvedor Front-end e comece sua carreira no aquecido mercado de TI.
Receba artigos do blog, acompanhe as últimas notícias da EBAC e fique por dentro das novidades!
