O que é CSS (Cascading Styles) – um guia completo

Tudo o que você precisa saber sobre CSS (Cascading Styles) – o que é, para que serve, como formatar seu site usando CSS.

O que é CSS

CSS significa Cascading Style Sheet. Na tradução, significa Cascading Style Sheets. CSS é um mecanismo simples para formatar visualmente documentos da Internet.

Ao aplicar CSS a um documento HTML, você pode modificar elementos como fonte, cor e espaçamento. Isso permite que você mantenha uma aparência consistente em várias páginas de um site. CSS separa o conteúdo do design, garantindo que os sites sejam acessíveis e estilizados de forma eficaz, melhorando a experiência do usuário.

Antes de estudar CSS, recomendo primeiro dar uma olhada neste tutorial completo de HTML .

História do CSS

O nascimento do CSS, formalmente conhecido como Cascading Style Sheets , remonta a 1996, quando o W3C (World Wide Web Consortium) lançou o CSS1 . A introdução do CSS revolucionou o web design, fornecendo um método novo e mais eficiente de estilizar páginas da web. Desde então, o CSS evoluiu em diversas versões. CSS2.1 , que veio depois do CSS1, introduziu recursos como posicionamento fixo e índice z. A evolução mais recente, CSS3 , dividiu a especificação em módulos e introduziu novos recursos como animações, flexbox para layout e consultas de mídia para design responsivo.

Depois de entender o que é CSS e seu contexto histórico, você estará mais bem preparado para usar todo o seu potencial no desenvolvimento web.

CSS é usado em todos os lugares

Essa linguagem é usada para estilizar visualmente a maioria dos sites na Internet. Por exemplo, o CSS é usado para definir o layout, a cor e o estilo geral da página de uma página. Você pode usar CSS para definir fontes, imagens, planos de fundo de página, layouts de página e muito mais.

No WordPress , CSS usa temas individuais . Ele determina seu layout, design geral e estilo.

Noções básicas de CSS

Compreender os fundamentos do CSS inclui aprender sua sintaxe e estrutura e como usar seletores e propriedades para estilizar elementos da web.

Sintaxe e estrutura

CSS consiste em uma série de regras que definem como os elementos HTML são exibidos. Essas regras consistem em seletores e declarações. A declaração em si consiste em propriedades e seus valores correspondentes, que são estruturados da seguinte forma:

selektor {
   vlastnosť: hodnota;
}

Seletores são os nomes atribuídos aos elementos da página da web que você deseja modificar. As declarações estão entre colchetes{} e declare como deseja estilizar os elementos selecionados.

Seletores e propriedades

Existem diferentes tipos de seletores :

• Seletores de elementos que selecionam elementos HTML com base no nome da tag.
• Seletores de classe que selecionam elementos com base em um atributoclass . Seu prefixo é. (ponto).
• Seletores de ID que selecionam um elemento exclusivo com base em seu atributoid com um prefixo# (símbolo de hash).

Cada seletor pode ser seguido por uma ou mais declarações , que são pares propriedade-valor separados por dois pontos e terminados por ponto e vírgula.

Propriedades são aspectos dos elementos HTML que você deseja modificar, comocolor ,font-size ,margin ,padding etc. Uma regra representa a instrução inteira, incluindo um seletor e um bloco de declarações.

.trieda {
   color: blue;
   font-size: 14px;
}

Cada propriedade é seguida por um valor que especifica como a propriedade deve ser aplicada ao elemento. Cada par propriedade-valor é uma declaração .

Depois de compreender os conceitos básicos de sintaxe, seletores e propriedades CSS, você pode começar a estilizar elementos de páginas da web para criar conteúdo da web visualmente impressionante.

Integração CSS

Integrar CSS ao HTML ajuda a controlar a apresentação do seu site. Se você prefere manter os estilos próximos às tags, equilibrar acessibilidade e facilidade de manutenção ou manter as coisas totalmente separadas, o CSS oferece uma variedade de métodos para usar estilos.

CSS embutido

CSS inline é quando você aplica um estilo diretamente em suas tags HTML usando um atributostyle . Este método geralmente é usado para aplicar estilos exclusivos a um único elemento HTML. Aqui está um exemplo:

<p style="color: blue;">Tento text je modrý.</p>

O uso de CSS embutido afeta a capacidade de manutenção de seus documentos HTML porque os estilos não são centralizados, dificultando o gerenciamento quando há várias instâncias do mesmo estilo.

CSS interno

O estilo CSS interno é definido em<head> do documento HTML dentro das tags<style> . Esta é uma opção viável quando você está trabalhando com um único documento HTML e deseja aplicar estilos exclusivos a essa página.

<head>
<style>
  body {
    background-color: lightgrey;
  }
</style>
</head>

Você não precisa de nenhum arquivo adicional e os estilos são aplicados de forma consistente em toda a página, mas, assim como acontece com CSS embutido, o estilo interno não oferece suporte à reutilização em várias páginas.

CSS externo

Use CSS externo para vincular a um arquivo separado.css de um documento HTML que pode controlar estilos de várias páginas de um site. Este método é obtido usando uma tag<link> na seção<head> :

<head>
<link rel="stylesheet" href="styles.css">
</head>

Seus estilos estão contidos em um único arquivo com a extensão.css , o que facilita o ajuste e a manutenção. Você escreve seu CSS em um editor de texto e carrega a folha de estilo junto com os arquivos HTML. Este é o método mais eficiente de edição de vários documentos HTML com um design consistente.

Editando estilo de texto

Em CSS, você tem a capacidade de controlar os aspectos visuais do texto, desde a família da fonte até o espaçamento entre letras. Você utiliza propriedades para definir como seu texto deve aparecer em seu site, garantindo legibilidade e apelo estético.

Fontes e tipografia

Considere a estética e a legibilidade ao escolher as fontes para o seu site. A família de fontes especifica o tipo de fonte, que pode ser um nome específico, como “Arial”, ou um grupo geral, como “serif”. A propriedade font-size ajusta o tamanho do seu texto e geralmente é definida em pixels, em ou rem.

Um exemplo de uso de uma família de fontes:

p {
  font-family: Arial, sans-serif;
}

Exemplo de uso do tamanho da fonte:

h1 {
  font-size: 32px;
}

Propriedades e efeitos de texto

Diferentes propriedades afetam outros aspectos do texto:

• Cor : determina a cor do texto. Você pode usar cores nomeadas, valores hexadecimais, RGB ou HSL.
• Espaçamento entre letras : aumenta ou diminui o espaço entre os caracteres, geralmente medido em pixels ou em.

Lembre-se de manter as propriedades do texto consistentes para criar uma aparência coesa para o seu site.

Modelo de caixa CSS

O CSS Box Model é um conceito fundamental que determina como os elementos são renderizados em uma página web. Ele define a estrutura e o layout de cada elemento HTML como uma caixa retangular que contém bordas, margens, preenchimento e o conteúdo real.

Margens e contornos

No modelo caixa, as bordas incluem conteúdo e preenchimento, atuando como intermediárias entre o preenchimento e as margens. Sempre que você define a largura de uma borda com CSS, você define a espessura dessa borda. Propriedadeborder pode ser dividido em subpropriedades para cada lado (border-top ,border-right ,border-bottom ,border-left ), permitindo que você personalize cada um individualmente. Você também pode definir um estilo (solid ,dotted ,dashed etc.) e a cor da borda.outline é semelhante a uma borda, mas não ocupa espaço no modelo de caixa – é desenhado fora da moldura do elemento e não afeta a posição do elemento.

Margens e recuo

As bordas são a camada externa do modelo de caixa e criam espaço entre as bordas de uma caixa e outra. Eles desabam quando se encontram; um tamanho de borda maior é usado quando campos adjacentes têm bordas. As bordas são transparentes e possuem as seguintes propriedades:margin-top ,margin-right ,margin-bottom ,margin-left código> .

O preenchimento está localizado diretamente dentro das bordas, circundando o conteúdo real, e sua função principal é criar espaço dentro do quadro, entre o conteúdo e a borda. Ao contrário das bordas, é possível definir uma cor de preenchimento que corresponda ao seu desenho, pois faz parte da caixa do elemento. Também possui propriedades individuais para cada lado (padding-top ,padding-right ,padding-bottom apadding-left ).

Lembre-se de que as propriedades CSSwidth aheight consulte o tamanho do conteúdo. Se você incluir margens e preenchimento, eles aumentarão o tamanho geral do campo, a menos que você use a propriedadebox-sizing definido para um valorborder-box , que redimensiona o conteúdo para incluir preenchimento e margens dentro da largura e altura declaradas.

Formatação visual

Em CSS, a formatação visual é um aspecto fundamental que determina como os elementos aparecem em uma página web. Sua compreensão de seus princípios afeta tudo, desde o layout até o contexto da composição.

Fundo e cores

CSS permite definir a cor e a imagem de fundo dos elementos. Recursos comobackground-color você usa para especificar uma cor sólida, enquantobackground-image permite que você coloque uma imagem atrás do conteúdo. Propriedadebackground combina essas configurações com outras configurações, comobackground-position abackground-repeat , proporcionando controle refinado sobre os elementos visuais de fundo do elemento.

Posicionamento e índice Z

Ele usa uma propriedade CSS para controlar o layout dos elementos position com valores como static, relative, absolute, fixed a sticky. Propriedadez-index trabalha em conjunto com o posicionamento para determinar a ordem da pilha dos elementos; mais altoz-index significa que o elemento estará mais próximo do topo do contexto de composição. Lembre-se dissoz-index afeta apenas elementos que têm um valorposition outro que não sejastatic .

Flexbox e grade CSS

Flexbox e CSS Grid são modelos de layout poderosos que oferecem diferentes abordagens para a criação de designs responsivos. O Flexbox funciona em um eixo, linha ou coluna unidimensional, tornando-o ideal para layouts lineares. Use propriedades como para manipular o layoutdisplay: flex e outras propriedades filhas, comoflex-grow aflex-shrink .

CSS Grid, por outro lado, funciona em um sistema de grade bidimensional que é controlado por propriedades comodisplay: grid . Você definegrid-template-columns agrid-template-rows para criar uma estrutura para o seu conteúdo. CSS Grid permite facilmente layouts complexos, permitindo colocar elementos em locais precisos dentro da estrutura da grade.

Técnicas avançadas de design

Nesta seção, você aprenderá como melhorar o apelo visual e a interatividade de suas páginas da web usando CSS. Dominar essas técnicas permitirá criar designs dinâmicos e responsivos que chamam a atenção do usuário.

Transformações e transições

As transformações permitem girar , dimensionar , inclinar e traduzir elementos para alterar a forma como eles são renderizados em uma página da web. Quando você aplica uma transformação, a mudança é instantânea, mas você pode controlar o tempo combinando-a com transições .

• Vez : transform: rotate(45deg);
• Escala : transform: scale(1.5);
• Traduzir : transform: translate(30px, 50px);
• Chanfro : transform: skew(20deg, 15deg);

As transições permitem mudanças suaves entre estados. Ao especificar uma transição, você deve definir qual propriedade será passada, a duração, a função de temporização e qualquer atraso.

transition: background-color 0.5s ease-in-out 0s;

Ao ajustar esses parâmetros, você criará um movimento suave e natural que adicionará sofisticação à sua página.

Animações

As animações CSS levam a interatividade para o próximo nível, definindo uma sequência de estilos pelos quais um elemento irá percorrer. Para criar uma animação, você deve primeiro especificar Keyframes , que descrevem os pontos inicial e final da animação, bem como quaisquer etapas intermediárias:

@keyframes slidein {
   from { transform: translateX(0%); }
   to { transform: translateX(100%); }
}

Para ativar a animação, aplique-a ao elemento e defina sua duração e função de tempo e número de iterações:

prvok {
    animation: slidein 3s easy-in-out infinite;
}

As animações podem ser repetidas indefinidamente ou reproduzidas um determinado número de vezes, proporcionando controle preciso sobre como os elementos interagem com os usuários em seu site. Essas técnicas avançadas de design farão com que seu site se destaque com uma aparência profissional e sofisticada e uma experiência de usuário envolvente.

Web design responsivo

O web design responsivo (RWD) garante que seu site tenha uma boa aparência e funcione bem em diferentes dispositivos. Ele se concentra em fornecer uma experiência tranquila em diferentes tamanhos de tela usando grades variáveis, imagens flexíveis e consultas de mídia.

Consultas de mídia

As consultas de mídia são a base do web design responsivo. Eles permitem que você aplique estilos CSS com base no tamanho, orientação e resolução da tela do dispositivo. Por exemplo, você pode escrever uma consulta de mídia para alterar o layout da página quando a área de exibição tiver menos de 768 pixels de largura:

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

Este código garante que a classe.container ocupará toda a largura da tela em dispositivos com área de exibição maior que 768 pixels.

Unidades responsivas

No design responsivo, é importante usar unidades que permitam que seu layout se adapte ao ambiente do usuário.

Pixels ( px ) são unidades absolutas e não se adaptam ao tamanho da tela, o que pode levar a uma experiência ruim do usuário em dispositivos móveis.

Em vez disso, use unidades relativas, como porcentagens ( % ), largura da janela de visualização ( vw ) e altura da janela de visualização ( vh ). Por exemplo, redimensionar elementos por porcentagem pode fazer com que o conteúdo mude proporcionalmente à área de exibição:

.content {
   width: 80%;
}

Isso torna maravilhoso.content 80% mais largo que seu pai, permitindo um layout fluido que se adapta a diferentes dispositivos.

Frameworks e pré-processadores

Em sua jornada para criar designs web elegantes e responsivos, você descobrirá que estruturas e pré-processadores CSS são ferramentas poderosas que aumentam a eficiência e a capacidade de manutenção do seu código. Use essas ferramentas para agilizar seu fluxo de trabalho e aplicar estilos sofisticados com menos esforço.

Estruturas CSS populares

Bootstrap : Como uma das estruturas CSS mais utilizadas, o Bootstrap fornece um conjunto abrangente de folhas de estilo predefinidas. Você obtém um sistema de grade responsivo, componentes pré-projetados e plug-ins JavaScript que irão acelerar significativamente o processo de desenvolvimento.

Fundação : Esta é uma estrutura sofisticada de nível empresarial projetada para modularidade e flexibilidade. Foundation oferece uma abordagem modular com diferentes modelos para ajudá-lo a criar facilmente layouts complexos e designs responsivos.

Tailwind CSS : Ao contrário das estruturas tradicionais, o Tailwind CSS funciona com base no princípio da utilidade, oferecendo classes atômicas para criar seus próprios designs sem sair do HTML.

Uso de pré-processadores

SASS : Este pré-processador estende CSS com recursos como variáveis, regras aninhadas e mixins. Com o SASS, você pode escrever folhas de estilo mais organizadas e fáceis de manter que são então compiladas em CSS padrão.

LESS : Assim como o SASS, o LESS aprimora o CSS com variáveis, mixins e funções, permitindo criar estilos mais dinâmicos e eficazes. Ele também compila em CSS para compatibilidade entre navegadores.

Stylus : Oferecendo grande flexibilidade e sintaxe expressiva, Stylus é um pré-processador que pode ser executado de forma síncrona e assíncrona para atender a uma ampla gama de requisitos de projeto.

Com estruturas CSS, você pode aproveitar componentes e sistemas de grade prontos para uso, enquanto os pré-processadores permitem escrever CSS em uma construção de programação que é eventualmente compilada em código compreensível pelo navegador.

Melhores práticas de CSS

Usar as melhores práticas ao trabalhar com CSS garante que suas folhas de estilo não sejam apenas eficientes, mas também fáceis de manter e escalonáveis. Tenha esses conceitos em mente para aumentar o desempenho e a coerência dos seus projetos.

Escrevendo CSS com eficiência

Seletores e especificidade:

• Use seletores de classe para obter baixa especificidade e substituições mais fáceis.
• Evite seletores excessivamente específicos para reduzir a complexidade e melhorar o desempenho.

Otimização de performance:

• Minimize o uso de propriedades caras, comobox-shadow afilter , o que pode causar redesenho e reformatação.
• Implemente o carregamento lento para imagens fora da tela usandoloading="lazy" , para economizar largura de banda e aumentar a velocidade da página.

Arquitetura e metodologias CSS

Estratégias organizacionais:

• Adote uma metodologia como BEM (Block Element Modifier) ​​​​para obter convenções de nomenclatura consistentes.
• Estruture seu CSS usando uma hierarquia clara, enquanto para projetos maiores considere SMACSS (Scalable and Modular Architecture for CSS) .

Escalabilidade e capacidade de manutenção:

• Usando pré-processadores CSS como Sass, você pode aproveitar variáveis, mixins e funções para folhas de estilo mais dinâmicas.
• Considere arquiteturas CSS modulares, como OOCSS (CSS Orientado a Objetos), para incentivar a reutilização e reduzir a redundância.

Seguindo essas etapas, você criará um estilo CSS que não apenas funciona bem, mas também se adapta ao seu projeto e, ao mesmo tempo, é fácil de manter.

Trabalhando com CSS

Compreender como trabalhar com CSS envolve mais do que apenas escrever regras de estilo; também requer testes rigorosos e garantia de consistência de estilos entre navegadores.

Depuração e teste

Quando você encontrar um problema com CSS, o primeiro passo é usar as ferramentas de desenvolvedor em seu navegador. Essas ferramentas permitem revisar e editar HTML e CSS em tempo real. Para um processo de depuração simplificado:

1. Verifique o elemento que não está sendo exibido corretamente.
2. Verifique as propriedades CSS aplicadas a ele.
3. Ajuste as propriedades e monitore as alterações no navegador para identificar códigos problemáticos.

Para testes , é essencial verificar o CSS em diferentes páginas da web e elementos do seu site para garantir consistência. Ferramentas de teste automatizadas podem simular uma ampla variedade de cenários, aplicando seu CSS a diferentes estruturas HTML para detectar inconsistências ou comportamentos inesperados.

Compatibilidade e substitutos do navegador

O suporte do navegador para recursos CSS varia e é sua responsabilidade garantir que seu site seja renderizado corretamente em todos os principais navegadores. Solução de compatibilidade de navegador :

• Use recursos como caniuse.com para verificar a compatibilidade das propriedades CSS
• Implemente substitutos para navegadores mais antigos. Por exemplo, se você usar um recurso de layout moderno como grade CSS, para navegadores que não suportam grade, forneça um substituto para uma técnica de layout mais tradicional, como float ou display: table.

Para recursos que se degradam normalmente, considere usar consultas de recursos@supports , para aplicar o estilo somente quando o navegador oferecer suporte a uma propriedade ou valor específico. Isso garante que seu site permaneça funcional e visualmente atraente, mesmo que o navegador do usuário não processe todos os ajustes de estilo.

CSS e acessibilidade

Ao abordar o web design, incorporar princípios de acessibilidade em seu CSS é fundamental. Lembre-se de que, embora o CSS controle principalmente a apresentação visual, ele também pode afetar a acessibilidade do conteúdo para usuários com deficiência.

Marcação semântica: sempre combine CSS com HTML semântico. Use elementos HTML que transmitam significado sobre o tipo de conteúdo que encapsulam, como<header> para cabeçalho de seção ou<nav> para links de navegação. Isso garante que o conteúdo permaneça compreensível após a remoção dos estilos.

• Design visual:
  • Cores: Garanta contraste suficiente entre as cores do texto e do fundo. Não use a cor como único método de transmitir informações.
  • Texto: Use unidades relativas (como em ou rem) para ajustar o tamanho do texto para que os usuários possam redimensioná-lo de acordo com suas necessidades.

AR e ARIA: atributos Accessible Rich Internet Applications (ARIA) podem complementar o HTML para melhorar a acessibilidade ao criar componentes web complexos. Por exemplorole="button" disponibiliza um elemento que não é um elemento de botão nativo como um botão de tecnologia assistiva.

• Técnicas CSS:
  • Oculte corretamente os elementos usandovisibility:hidden oudisplay:none , para que também fiquem ocultos dos leitores de tela.
  • Usar estilosfocus para que elementos interativos forneçam instruções claras de navegação pelo teclado.

CSS	Impacto na disponibilidade
color	Deve ter um alto contraste com o fundo para legibilidade
tamanho da fonte	Use unidades relativas para aumentar/diminuir o zoom
exibição/visibilidade	Use-os para ocultar elementos para melhorar a legibilidade

Ao usar essas práticas em seu CSS, você melhorará a acessibilidade do seu conteúdo web, tornando-o mais inclusivo e fácil de usar para todos.

Especificações e documentação CSS

Sua capacidade de usar estilos CSS de maneira eficaz depende de um entendimento completo de suas especificações e documentação. As diretrizes e referências delineadas pelo W3C são essenciais para dominar o web design.

Especificações W3C

O World Wide Web Consortium (W3C) é responsável pelo desenvolvimento de especificações CSS. Você descobrirá que essas especificações abrangem uma ampla gama de informações, desde a estrutura básica até recursos avançados.

As especificações CSS são projetadas para informá-lo sobre como implementar adequadamente vários aspectos do CSS em documentos da web.

Por exemplo, as consultas de mídia ampliam os recursos das regras @media adicionando parâmetros para acomodar variações de tamanho de exibição, profundidade de cor e proporção de aspecto. O Grupo de Trabalho CSS desempenha um papel fundamental no desenvolvimento destas normas, garantindo que sejam abrangentes e atualizadas.

Links e recursos CSS

Várias plataformas online fornecem referências e recursos práticos de CSS . O MDN Web Docs se destaca como um recurso valioso e oferece documentação abrangente sobre CSS. Aqui você encontrará informações detalhadas sobre:

• Sintaxe CSS : Compreender o formato adequado para escrever CSS, incluindo seletores, pseudoclasses, pseudoelementos, propriedades e valores.
• Exemplos de regras de estilo : Aplicação prática de regras CSS para definir estilos em documentos da web.

Utilize esses recursos para aprofundar seu conhecimento e melhorar a implementação de CSS em diversas mídias e plataformas. Lembre-se que a cascata é um conceito fundamental do CSS, onde a ordem das regras CSS e sua especificidade determinam como os estilos são aplicados aos elementos HTML.

Aprendendo CSS

Depois de começar a aprender CSS, você encontrará muitos recursos e métodos para melhorar suas habilidades de desenvolvimento web. É importante começar com tutoriais completos e depois aplicar seus conhecimentos trabalhando em exercícios e projetos práticos.

Tutoriais e guias CSS

Comece sua jornada com tutoriais CSS que fornecem instruções passo a passo e exemplos claros. Plataformas como W3Schools oferecem tutoriais interativos onde você pode experimentar imediatamente editando o CSS e visualizando os resultados em seu editor online. Cada capítulo geralmente inclui exemplos para ajudar a reforçar conceitos.

Da mesma forma, o MDN Web Docs é um recurso confiável para o ensino de tecnologias da web, incluindo CSS. Seus tutoriais CSS cobrem o básico, desde estilo HTML, modelo de caixa, seletores até tópicos mais avançados, como animações e técnicas de layout.

Exercícios e projetos CSS

Depois de aprender o básico por meio de tutoriais, é importante adquirir experiência prática. Encontre exercícios de CSS e crie pequenos projetos para aplicar o que aprendeu.

Você pode começar com tarefas simples, como estilizar um parágrafo ou projetar uma barra de navegação, e depois ampliar para criar layouts de várias colunas ou até mesmo um site inteiro.

Para testar seu conhecimento de CSS:

1. Crie uma página HTML simples.
2. Personalize seu estilo usando um arquivo CSS vinculado a HTML.
3. Experimente diferentes propriedades CSS para ver seus efeitos.

Aqui está um exercício básico para editar texto de parágrafo:

<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

/* styles/style.css */
p {
  color: red;
}

Ao concluir esses projetos práticos, você reforçará seu aprendizado e construirá gradualmente um portfólio para mostrar sua crescente experiência em CSS.