O CSS é uma linguagem de estilo usada no design de páginas da web. Desenvolvida na década de 90, a linguagem foi criada para solucionar um problema criado pela expansão da internet: as páginas ficaram mais complexas, e os recursos do HTML já não eram suficientes para atender às necessidades dos desenvolvedores.
Como é possível usar o mesmo CSS para diversas páginas da web, não é necessário personalizar cada uma separadamente.
O CSS pode ser usado de três formas diferentes: inline, interno e externo. Confira a seguir a diferença dos três tipos de CSS e veja exemplos de como usar suas propriedades.
Índice
O que é CSS e para que serve?
O CSS é uma linguagem de folhas de estilo que define a disposição e o layout dos elementos de uma página. A linguagem é responsável pela formatação do que será exibido pelo navegador. Ou seja, o design, as cores, links e as fontes, permitindo modificar o visual de vários elementos ao mesmo tempo.
O CSS serve também para facilitar o desenvolvimento de uma página web pelos desenvolvedores, já que os códigos de formatação de conteúdo podem ser separados da estrutura do HTML. O que os torna mais simples de escrever e atualizar.
A linguagem de estilo permite adicionar animações, além de determinar que os elementos sejam renderizados de maneira diferente de acordo com a tela ou resolução de um dispositivo.
O que significa CSS?
CSS significa Cascading Style Sheets, ou Folha de Estilos em Cascata, em tradução livre para o português.
O CSS é uma linguagem de programação?
Não. O CSS é uma linguagem de estilo que pode ser utilizada em conjunto com linguagens de programação e marcação. As propriedades do CSS apenas definem a formatação do conteúdo, como estilo de layout, cores e fontes.
Quem criou o CSS?
O CSS foi criado por Håkon Wium Lie e Bert Bos. O projeto foi apresentado por Håkon em 1994, enquanto trabalhava com Tim Berners Lee na Organização Europeia para a Investigação Nuclear (CERN).
Já Bert Bos teve participação no desenvolvimento das versões CSS1 e CSS2, em 1996 e 1998, respectivamente. Håkon Wium Lie e Bert Bos desenvolveram a linguagem juntos no World Wide Web Consortium (W3C) a partir de 1995.
Quais são os tipos de CSS?
O CSS pode ser escrito dentro de uma tag de um elemento HTML (CSS inline), incorporado em uma seção do cabeçalho do documento (CSS interno), ou em um arquivo separado, que então é importado ou linkado na página (CSS externo).
Veja detalhes abaixo:
- CSS inline: utilizado para aplicar formatação em um elemento específico do HTML. Pode ser utilizado na própria tag de abertura do código pelo atributo style. Seu uso é pouco recomendado, pois pode trazer complexidade ao projeto;
- CSS interno: o CSS interno pode ser aplicado no código HTML pela tag
<style>no<head>da sua estrutura HTML. Todo o estilo proposto para a página precisa estar dentro da tag própria do CSS e cada página precisa ser configurada de forma independente; - CSS externo: é criado um arquivo CSS de forma separada do HTML, fazendo um link para que as duas linguagens se comuniquem. É recomendado para aplicar estilos a diversas páginas de uma só vez, sem precisar configurá-las separadamente.
Qual é o exemplo de um código CSS?
Veja abaixo o exemplo de uso da linguagem CSS na formatação da cor de fundo, do título e do parágrafo de uma página web:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
color: #555;
font-size: 16px;
margin: 20px;
}
O código acima representa um exemplo de CSS externo ou interno, alterando a parte visual do projeto. Para usar o CSS inline, seria necessário aplicar o atribulo style.
Quais são as propriedades do CSS?
O CSS oferece diversas propriedades na definição do estilo de uma página. As principais são:
color:define a cor do texto;background-color:define a cor do plano de fundo;background-image:altera a imagem de fundo;font-family:seleciona o tipo da fonte;font-size:define o tamanho de uma fonte;font-weight:altera a espessura da fonte;text-align:ajusta o alinhamento do texto;width:define a largura de um elemento;height:define a altura de um elemento;position:seleciona o tipo de posicionamento;float:posiciona um elemento específico na tela;gap:ajusta o espaçamento entre os itens;animation:cria animações customizadas.
Quais são as vantagens do CSS?
O CSS oferece as seguintes vantagens:
- Independência do HTML: o CSS permite editar o aspecto visual de uma página de forma independente do HTML. Basta linkar os dois códigos posteriormente para que seja aplicado ao HTML;
- Uso em várias páginas: ao criar um CSS externo, é possível aplicar o estilo desejado a todas as páginas de um projeto de uma vez, economizando tempo;
- Design responsivo: o CSS é capaz de ajustar o conteúdo de acordo com o tipo e tamanho de tela, tornando a página web responsiva;
- Uso em animações: algumas propriedades do CSS oferecem ao desenvolvedor a possibilidade de criar animações e transições de conteúdo;
- Facilidade de manutenção: por ter o código separado da linguagem de marcação HTML, é mais fácil fazer a manutenção do design de uma página web, editando apenas o CSS.
- Velocidade no carregamento: o CSS também melhora a experiência do usuário por ser extremamente rápido de ser carregado por navegadores, já que seu código pode ficar armazenado em cache.
Quais são as desvantagens do CSS?
Desenvolver um projeto com CSS tem as seguintes desvantagens:
- Limitações em layout: o CSS pode ter limitações em layout se um projeto for complexo ou exigir designs específicos;
- Segurança limitada: o CSS é uma linguagem de estilo que não oferece recursos de segurança, pois não executa lógica ou manipula dados;
- Problemas de desempenho: um código CSS mal otimizado e mal estruturado pode trazer problemas de desempenho em páginas da internet, tornando seu carregamento mais lento.
Qual é a diferença entre CSS e HTML?
O CSS é uma linguagem de estilo que permite alterar o design de elementos de uma página HTML, como tamanho de fontes e layout do conteúdo.
Já o HTML é uma linguagem de marcação usada na formatação da estrutura de uma página web. Com o HTML é possível construir uma página, enquanto o CSS só oferece a possibilidade de personalizá-la.
Qual é a diferença entre CSS e XML?
O CSS é uma linguagem de estilo que pode ser utilizada em conjunto com o XML. Enquanto o CSS possibilita a edição visual dos componentes de uma página, o XML é usado para armazenar e transportar dados que podem ser utilizados pela mesma.
O XML é uma linguagem de marcação que permite somente organizar informações de forma padronizada, garantindo que diferentes sistemas sejam capazes de interpretá-las.
O que é CSS? Conheça os tipos dessa linguagem de estilo