bg cover

Introdução ao CSS

Prof. Me. Danilo Bueno

Cascading Style Sheets (CSS)

coleção de regras formatadas que controlam a aparência
ele formata a informação entregue pelo HTML.
simples, sem necessidade de programação, visual, aberto

“Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex, fontes, cores, espaçamentos) aos documentos Web (W3C).”

Cascading Style Sheets (CSS)

bg 90%

Sintaxe

Uma regra CSS é composta por um seletor e um conjunto de declarações.
O seletor indica o elemento ou grupo HTML, que serão estilizados (existem diversos tipos de seletores).
As declarações são compostas por propriedades e valores.

Adicionando CSS ao HTML

O HTML precisa saber da existência do CSS para aplicá-lo.
Existem 3 formas de adicionar CSS ao HTML:
1. Inline: direto na tag
2. Interno: no mesmo documento HTML
3. Externo: em um arquivo externo

CSS Inline 😡

é aplicado diretamente em um elemento HTML, usando o atributo style.

<p style="color: red;">Este é um texto em vermelho.</p>

Evite usar CSS dessa maneira, se possível. É uma prática ruim. Problemas de manutenção e mistura o código.

CSS Interno 😠

é adicionado dentro da tag <style> no cabeçalho do documento HTML (<head>).

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Este é um parágrafo em azul.</p>
</body>

CSS Externo 😁🚀

é adicionado através de um arquivo CSS separado, que é vinculado ao documento HTML usando a tag <link>.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <p>Este é um parágrafo em azul.</p>
</body>

O CSS externo é a melhor prática, pois permite reutilizar estilos em várias páginas e mantém o HTML limpo.

Seletores CSS

São padrões utilizados para selecionar os elementos HTML.
Existem vários tipos de seletores, os mais simples são:
- Seletor de tipo: seleciona todos os elementos de um determinado tipo (ex: p, h1, div).
- Seletor de ID: seleciona um elemento com um ID específico;
- Seletor de classe: seleciona elementos com uma classe específica (de um grupo)

Seletor de tipo

Seleciona TODOS os elementos de um determinado tipo;
Todas as tags HTML (ex: p, h1, div, etc.).

p {
  color: red;
}

Seletor de ID

Seleciona UM ÚNICO elemento com um ID específico;
Utiliza o caractere # para indicar o ID.

<p id="meu-id">Este é o parágrafo com ID único.</p>

#meu-id {
  color: blue;
}

Seletor de Classe

Seleciona UM GRUPO de elementos com uma classe;
Utiliza o caractere . para indicar a classe.
Permite múltiplas classes em um único elemento.

<p class="minha-classe">Este é um parágrafo com a classe "minha-classe".</p>
<p class="minha-classe outra-classe">Este é outro parágrafo com a mesma classe
e mais uma nova classe.</p>

.minha-classe {
  color: green;
}

Propriedades simples de texto

color: define a cor do texto (red, blue, green, 148 cores).
text-align: alinha o texto (left, right, center, justify).
text-decoration: adiciona decoração ao texto (none, underline, overline e line-through).
text-transform: controla a capitalização do texto (none, uppercase, lowercase e capitalize).

Propriedades simples de texto

Apenas um valor possível das propriedades é utilizada.

p {
  color: red; /* define a cor do texto. */
  text-align: center; /* alinha o texto ao centro. */
  text-transform: uppercase; /* transforma o texto em maiúsculas. */
  text-decoration: underline; /* adiciona um sublinhado ao texto. */
}

bg right:40% 90%

Cores

p {
  color: red; /* nome da cor */
  color: #00ff00; /* cor hexadecimal */
  color: rgb(0, 0, 255); /* cor RGB */
  color: rgba(0, 0, 0, 0.5); /* cor RGBA */
  color: hsl(240, 100%, 50%); /* cor HSL */
}

Mais propriedades de texto

text-indent: define a indentação da primeira linha.
letter-spacing: define o espaçamento entre as letras.
word-spacing: define o espaçamento entre as palavras.
line-height: define a altura da linha do texto.
text-shadow: adiciona sombra ao texto.

Mais propriedades de texto

p {
  text-indent: 20px; /* indentação de 20px na primeira linha */
  letter-spacing: 2px; /* espaçamento de 2px entre as letras */
  word-spacing: 5px; /* espaçamento de 5px entre as palavras */
  line-height: 1.5; /* altura da linha de 1.5 vezes */
  text-shadow: 2px 2px 5px gray; /* sombra cinza com deslocamento de 2px */
}

Pixel (px) é a unidade de comprimento mais comum para definir tamanhos absolutos na web, mas existem outras unidades de medida.

bg right

Fontes

O texto é um dos principais blocos de construção da web.

Fontes

A fonte é um arquivo que contém um conjunto de caracteres com um estilo específico.
Fontes seguras para a web (web-safe fonts).
Classificação: serif, sans-serif, monospace, cursive, fantasy.

bg cover

Classificação das fontes

Serif: fontes com acabamentos nas extremidades das letras;
Sans-serif: fontes sem acabamentos nas extremidades;
Monospace: caracteres com largura exatamente iguais;
Cursive: fontes que imitam a escrita manual;
Fantasy: fontes que possuem caracteres com decorações;

Você vai encontrar outras categorizações, tais como handwriting, display, script etc.

Propriedade de fonte

font-family: define a pilha de fontes a serem utilizadas;
font-size: define o tamanho da fonte (unidade);
font-weight: define a espessura da fonte (normal, bold, bolder, lighter, 100-900).
font-style: define o estilo da fonte (normal, italic, oblique).

Propriedade de fonte

p {
  font-family: Arial, Helvetica, sans-serif; /* pilha de fontes */
  font-size: 16px; /* tamanho da fonte */
  font-weight: bold; /* espessura da fonte */
  font-style: italic; /* estilo da fonte */
}

De uma olhada no site Modern Font Stack para sugestões de pilhas de fontes.

Fontes Web Personalizadas

Por volta de 2010, os navegadores começaram a suportar fontes personalizadas, porém:
Internet Explorer: .eot (Embedded OpenType)
Firefox, Chrome e outros: .woff (Web Open Font Format) e .ttf (TrueType Font)
Safari: .svg (Scalable Vector Graphics)

Como incluir fontes

A regra @font-face permite que você defina uma fonte personalizada, especificando o nome da fonte e a URL do arquivo da fonte.

@font-face {
  font-family: "MinhaFonte";
  src: url("minhafonte.eot"); /* IE9 Compat Modes */
  src: url("minhafonte.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
    url("minhafonte.woff") format("woff"), /* Modern Browsers */ 
    url("minhafonte.ttf") format("truetype"), /* Safari, Android, iOS */
    url("minhafonte.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Fontes Web Personalizadas

Atualmente, os navegadores suportam principalmente os formatos .woff e .woff2 (é uma versão mais recente e eficiente, oferecendo melhor compressão e desempenho).

@font-face {
  font-family: "MinhaFonte";
  src: url("minhafonte.woff2") format("woff2"), /* woff2 */ 
    url("minhafonte.woff") format("woff"); /* woff */
}

Repositórios de fontes

Um serviço que hospeda uma grande biblioteca de fontes.
Google Fonts
Font Squirrel (Web Font Generator)
1001 Fonts
Bunny Fonts
Como adicionar fontes ao seu site

Designer acusa Embratur de violar direitos autorais em nova marca; órgão admite erro e promete mudar campanha

Obrigado!

[email protected] · website/docs · github