Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS Planos de fundo CSS Bordas CSS Margens CSS Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS Texto CSS Fontes CSS Ícones CSS Links CSS Listas CSS Tabelas CSS Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS Sombras CSS Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Introdução CSS


CSS é a linguagem que usamos para estilizar uma página da Web.


O que é CSS?

  • CSS significa Cascading Style Sheets
  • CSS descreve como os elementos HTML devem ser exibidos na tela, papel ou em outra mídia
  • CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da web de uma só vez
  • As folhas de estilo externas são armazenadas em arquivos CSS

CSS Demo - Uma Página HTML - Vários Estilos!

Aqui vamos mostrar uma página HTML exibida com quatro folhas de estilo diferentes. Clique nos links "Folha de estilo 1", "Folha de estilo 2", "Folha de estilo 3", "Folha de estilo 4" abaixo para ver os diferentes estilos:



Por que usar CSS?

CSS é usado para definir estilos para suas páginas da web, incluindo design, layout e variações de exibição para diferentes dispositivos e tamanhos de tela.

Exemplo de CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS resolveu um grande problema

HTML NUNCA foi destinado a conter tags para formatar uma página da web!

HTML foi criado para descrever o conteúdo de uma página da web, como:

<h1>Este é um título</h1>

<p>Este é um parágrafo.</p>

Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um pesadelo para os desenvolvedores da web. O desenvolvimento de grandes sites, onde fontes e informações de cores eram adicionadas a cada página, tornou-se um processo longo e caro.

Para resolver esse problema, o World Wide Web Consortium (W3C) criou o CSS.

CSS removeu a formatação de estilo da página HTML!

Se você não sabe o que é HTML, sugerimos que leia nosso Tutorial de HTML .


CSS economiza muito trabalho!

As definições de estilo são normalmente salvas em arquivos .css externos.

Com um arquivo de folha de estilo externo, você pode alterar a aparência de um site inteiro alterando apenas um arquivo!