O que é CSS?

Publicados: 2019-03-08

Última atualização em 22 de abril de 2020

Cascading Style Sheets for the web Na World Wide Web (www), CSS é a sigla para Cascading Style Sheets. CSS é uma linguagem de folha de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação, comumente HTML. O CSS determina como o layout e o conteúdo de uma página da Web devem ser exibidos em uma tela, papel ou em outra mídia. O CSS economiza muito trabalho porque controla o layout de várias páginas da Web de uma só vez.

Um documento é geralmente um arquivo de texto estruturado usando uma linguagem de marcação como HTML. Apresentar um documento significa convertê-lo em um formato utilizável apresentado visualmente na tela do computador por meio de um navegador da Web como Chrome, Firefox, Opera, Microsoft Edge e outros. Os navegadores da Web aplicam regras CSS a um documento para afetar como eles são exibidos.

Este blog é uma introdução geral às Folhas de Estilo em Cascata (CSS), definindo o que são e para que são usadas na Web. Esta é uma introdução que responde a perguntas básicas sobre o assunto sem entrar profundamente no maravilhoso e interessante mundo do CSS.

Este! A empresa fornece serviços de web design cativantes e eficazes para agências em todo o mundo. Saiba mais sobre nossos Serviços de Web Design White Label e como podemos ajudar você e seus clientes a criar ou melhorar sua presença na web. Comece hoje!

CSS iniciado em 1994. Foi criado e é mantido pelo W3C. O CSS Working Group do W3C cria documentos chamados especificações. Após as especificações serem discutidas e oficialmente ratificadas pelos membros do W3C, elas se tornam uma recomendação.

Cascading Style Sheets nível 1 (CSS1) saiu do W3C como uma recomendação em dezembro de 1996. CSS2 tornou-se uma recomendação do W3C em maio de 1998. CSS nível 3, que foi iniciado em 1998, ainda está em desenvolvimento. CSS3 é uma combinação de especificações CSS2 e novas especificações chamadas módulos. Uma especificação CSS é formada a partir de um conjunto de propriedades, que possuem valores definidos para atualizar a forma como o conteúdo HTML é exibido.

CSS veio para simplificar o processo de apresentação de nossos documentos de linguagem de marcação. Você pode controlar uma variedade de propriedades como:

  • cor do texto,
  • estilo de fontes,
  • espaçamento entre parágrafos,
  • como as colunas são dimensionadas e dispostas,
  • imagens ou cores de fundo,
  • projetos de layout,
  • variações na exibição de acordo com os tamanhos de tela (Media Queries).

Como aplicamos CSS?

Cascading Style Sheets for the web Existem quatro maneiras de aplicar estilos aos nossos documentos HTML. Os métodos mais usados ​​são arquivos CSS externos que são incorporados em um elemento <style> dentro de nosso documento HTML. Se diferentes estilos de folha forem especificados, os estilos serão colocados em cascata em novos estilos com a seguinte prioridade (maior o número menos importante):

Prioridade 4: padrão do navegador

Os navegadores incluem alguns estilos pré-escritos para nós. Às vezes não queremos esses estilos pré-carregados, então podemos substituí-los. Existem alguns navegadores que não suportam especificações CSS modernas ou têm sua própria forma de usar as propriedades CSS. Por isso, devemos tomar cuidado ao escrever nosso CSS em um documento HTML.

That! Company White Label Services

Prioridade 3: arquivo de folha de estilo externo

O elemento <link> pode ser usado para incluir um arquivo de folha de estilo externo em seu documento HTML. Uma folha de estilo externa é um arquivo de texto separado com a extensão “.css”. Definimos todas as regras de estilo dentro deste arquivo de texto e então incluímos este arquivo em qualquer documento HTML dentro das tags <head>…</head> usando o elemento <link>.

 <link rel="stylesheet" type="text/css" href="style.css" />

Prioridade 2: Incorporado no documento HTML

Podemos colocar nossas regras CSS em um documento HTML usando o elemento <style> para conter as regras. As tags <style>…</style> são colocadas dentro das tags <head>…</head>.

 <estilo>
 seletor {
 valor da propriedade;
 }
 </style>

Prioridade 1: Inline em nossos elementos HTML

Podemos usar o atributo style de qualquer elemento HTML para definir regras de estilo. Essas regras serão aplicadas apenas a esse elemento.

 <p>Olá, mundo!</p>

Substituição de regras CSS

Descrevemos quatro maneiras de aplicar regras de folha de estilo ao nosso documento HTML. Aqui está a regra para substituir qualquer regra de folha de estilo:

Qualquer folha de estilo embutida tem a prioridade mais alta. Portanto, ele substituirá qualquer regra definida nas tags <style>…</style> ou regras definidas em qualquer arquivo de folha de estilo externo.

Qualquer regra definida nas tags <style>…</style> substituirá as regras definidas em qualquer arquivo de folha de estilo externo.

Qualquer regra definida no arquivo de folha de estilo externo tem a prioridade mais baixa, e as regras definidas neste arquivo serão aplicadas somente quando as duas regras acima não forem aplicáveis.

Seletores CSS

Uma regra CSS é interpretada pelo navegador e então aplicada aos elementos correspondentes em nosso documento HTML. Uma regra de estilo é composta de três partes:

  • Selector − é usado para “encontrar” (ou selecionar) elementos HTML com base no nome do elemento, id, classe, atributo e muito mais.
  • Propriedade − é um tipo de estilo do CSS. Pode ser cor, borda, plano de fundo, fonte, exibição, alinhamento de texto, margens, espaçamento entre linhas, etc.
  • Valor − é atribuído às propriedades. Por exemplo, a propriedade background-color pode ter um valor de vermelho ou verde.

Sintaxe da regra CSS

A sintaxe de uma regra CSS consiste em um seletor e uma declaração de propriedade e valor:

 seletor { propriedade: valor; }

O seletor aponta para o elemento HTML a ser estilizado.

O bloco de declaração (entre chaves) contém uma ou mais declarações separadas por ponto e vírgula.

Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.

Podemos escrever uma regra CSS e depois reutilizar a mesma regra em vários elementos e documentos HTML. Usando CSS, não precisamos escrever atributos de tag HTML inline toda vez, o que se aplica apenas ao elemento com estilo. Nós apenas escrevemos uma regra CSS e a aplicamos a todas as ocorrências desse elemento de tag. Portanto, menos código significa páginas mais rápidas.

Alterações e manutenção do nosso documento HTML são simples quando usamos regras de estilo externas ou incorporadas. Simplesmente alteramos a regra de estilo e todos os elementos em nossos documentos HTML serão atualizados automaticamente. Com CSS temos acesso a vários tamanhos de tela de dispositivos através de Media Queries. As consultas de mídia nos permitem otimizar nosso documento HTML para mais de um tipo de dispositivo. Usando o mesmo documento HTML, podemos apresentar diferentes versões de nossas páginas web.

consulte Mais informação

Novamente, este post mal abre o interesse do leitor em aprender sobre CSS e a variedade de coisas disponíveis para controlar nossos documentos HTML. É uma parte super poderosa e muito importante da web. Alguns recursos principais onde você pode mergulhar mais fundo são:

Escola W3C

MDN

Tutorial de CSS