Os melhores exemplos de CSS e CSS3

Artigo original: The Best CSS Examples and CSS3 Examples

Traduzido em português europeu

O CSS fornece a estilização de um site.

A propriedade background permite-te utilizar imagens e cores para criar o fundo das tuas páginas web.

Exemplo de background-color

A propriedade background-color permite-te escolher a cor do teu elemento. Isto pode ser o fundo de toda a página ou de uma secção da tua página.

• Um elemento é uma parte do HTML como um cabeçalho ou um parágrafo numa página web.

Aqui está um exemplo de uma definição da cor de fundo de uma página web para verde.

  body {
    background-color: green;
  }

Aqui está um exemplo da definição das cores de dois elementos. Isto definirá o fundo do cabeçalho para roxo e do resto da página para azul.

  body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }

Em CSS, a cor pode ser definida de três maneiras:

• Um nome de cor válido como blue
• Um valor HEX como #FFFFF (Este é o valor hexadecimal para branco.)
• Um valor RGB como rgb(76,175,80) (Este é o valor RGB para verde claro.)

Imagens de fundo

Podes utilizar a propriedade background-image para definir uma imagem como fundo de um elemento. A imagem é repetida quando algum valor não é explicitamente definido para a propriedade repeat, de modo a que ocupe todo o elemento.

body {
  background-image: url("barn.jpg");
}

Também podes fazer a ligação com imagens ou gifs que encontres on-line, ao utilizar o seu link (por exemplo, de uma pesquisa das imagens do Google).

body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}

Background-image – a propriedade repeat

A imagem de fundo é repetida tanto na vertical (cima e baixo) como na horizontal (ao longo da página) quando a propriedade não é explicitamente definida. Podes utilizar a propriedade background-repeat para repetir a imagem verticalmente ou horizontalmente.

Aqui está um exemplo que repete a imagem verticalmente:

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-y;
}

Podes repetir a imagem horizontalmente ao definir a propriedade background-repeat para "repeat-x".

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-x;
}

Também podes utilizar a propriedade background-repeat para definir uma imagem para não repetir.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
}

Background-image – a propriedade position

Podes utilizar a propriedade background-position para especificar onde será localizada a tua imagem numa página web.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

Background-image – a posição fixed

Podes utilizar a propriedade background-attachment para definir uma imagem para uma posição fixa. Uma posição fixa faz com que uma imagem não desça com o resto da página.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Gradientes de fundo

Um gradiente é uma transição entre duas ou mais cores e pode ser utilizado via CSS, de modo semelhante a uma imagem de fundo.

A sintaxe de um gradiente pode ser um pouco complexa e ainda é geralmente utilizada com prefixos de fornecedor, devido a inconsistências entre navegadores suportados.

O Colorzilla Gradient Editor é uma ótima ferramenta on-line para gerar gradientes personalizados e o respetivo código CSS associado.

Background – a versão reduzida da propriedade

Podes escrever as propriedades do fundo numa só linha. A isto, chama-se a versão reduzida da propriedade (em inglês, shorthand).

body {
  background: url("barn.jpg") no-repeat right top;
}

Podes omitir as propriedades que não precisas quando utilizares a versão reduzida da propriedade, mas as propriedades devem ser utilizadas numa determinada ordem. A ordem é:

• color
• image
• repeat
• attachment
• position

Várias imagens de fundo

Podes especificar várias imagens de fundo numa só propriedade background.

body {
  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}

A primeira imagem (ou gradiente) especificada é a que fica mais acima, a segunda vem a seguir e assim adiante. Se um dos elementos não estiver correto por causa do seu URL ou sintaxe, toda a linha será ignorada pelo navegador.

Algumas propriedades básicas de fundo em CSS

As propriedades de fundo do CSS são utilizadas para definir os efeitos do fundo para os elementos.

Propriedades de fundo do CSS: background-color, background-image, background-repeat, background-attachment, background-position

Exemplo de um breakpoint em CSS

Um breakpoint em CSS é um ponto específico onde o aspeto do site altera, com base na ativação de uma media query (texto em inglês).

Geralmente, especificas um breakpoint quando queres adaptar o aspeto do teu site ao tamanho da janela do navegador; maioritariamente, à largura da janela.

Por exemplo, se o conteúdo do teu site ficar muito bem numa janela mais estreita (como num navegador de um smartphone), mas começa a ter mau aspeto em ecrãs de maior dimensão (por exemplo, talvez o tamanho de letra seja muito pequeno ou difícil de ler), então podes introduzir um novo breakpoint para ecrãs maiores que torna o tamanho de letra maior:

Os breakpoints do CSS podem ser considerados como o coração do design responsivo para a web, pois definem como se comporta ou organiza o conteúdo em diferentes larguras/escalas de dispositivos. Isto permite-te apresentar o melhor aspeto possível ao utilizador.

Definição de breakpoints

Os breakpoints são geralmente definidos com base em qualquer um dos seguintes:

• Breakpoints com base na largura do dispositivo
• Breakpoints com base no conteúdo

Breakpoints com base na largura do dispositivo

É bastante evidente que os nossos dispositivos não têm todos as mesmas larguras/dimensões. É agora uma decisão de design incluir um conjunto de dispositivos em particular e programar as regras do CSS adequadamente.

Já temos dispositivos que chegue para nos causar preocupação. Quando é lançado um novo com uma largura diferente, voltar atrás para o nosso CSS e adicionar um novo breakpoint outra vez consome muito tempo.

Aqui está um exemplo:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Google Pixel ----------- */

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

Com esta abordagem, acabarás por ter uma lista enorme de media queries.

Breakpoints com base no conteúdo

Esta é a escolha preferencial para quando são criadas ou escritas as regras do breakpoint. Como é mais fácil ajustar o teu conteúdo de acordo com um layout em particular apenas quando este precisa de uma alteração.

@media only screen (min-width: 768px){
...
}

Este breakpoint faz com que o CSS seja aplicado quando a largura do dispositivo é de 768px ou acima.

Também podes definir um intervalo com os breakpoints, para que o CSS seja aplicado apenas dentro desses limites.

@media only screen and (min-width: 768px) and (max-width: 959px){

...

}

Nota: tenta sempre criar breakpoints com base no teu próprio conteúdo, e não nos dispositivos. Divide-os em larguras lógicas em vez de uma largura aleatória e mantém o valor como um número fácil de gerir, de modo a que fazer modificações continue simples e claro.

Os breakpoints do CSS são úteis quando queres atualizar os estilos com base no tamanho do ecrã. Por exemplo, para um dispositivo a medir 1200px de largura ou acima, utiliza o font-size: 20px;. Caso contrário, utiliza o font-size: 16px;.

Começamos com dispositivos com dimensões maiores do que 1200px, a largura de um portátil comum. Também podes ter reparado que mencionamos 'maior do que', o que significa que, de certo modo, estamos a utilizar uma espécie de instrução 'if-then'.

Vamos transformar isto em código CSS:

.text1 {
    font-size: 16px;
}
@media (min-width: 1200px) {
    .text1 {
        font-size: 20px;
    }
}

Por conveniência, escrevemos primeiro os estilos básicos para .text1… e depois vamos especificar as regras de @media.

Dica: podes verificar numa framework de CSS comum chamada 'Bootstrap', que adotaram o 'min-width' para cima na sua versão Bootstrap v4.0, em comparação com a antiga versão Bootstrap v3.0, que utilizava ‘max-width’ para baixo. Isto é apenas uma preferência, e não há problema nenhum em dizer 'deste tamanho para baixo' versus 'deste tamanho para cima'.

É completamente correto utilizar @media (max-width) {}. Aqui está um exemplo:

.text1 {
    font-size: 20px;
}
@media (max-width: 1199px) {
    font-size: 16px;
}

// Normal, estilos básicos
// que ficam com bom aspeto em monitores mais pequenos
// mas não em monitores maiores
body {
  font-size: 16px;
}

// Define um novo breakpoint, com uma media query.
// Neste caso, para quando a largura do viewport
// tenha pelo menos 512px de largura.
@media (min-width: 512px) {
	body {
		font-size: 20px;
	}
}

Os breakpoints que são baseados no conteúdo e não no dispositivo são menos complicados. Aqui está uma pequena amostra que é ativada quando a largura do dispositivo é superior a code 700px, aproximadamente o tamanho de um smartphone

@media only screen and (min-width: 700px) {
  algo {
    algo: algo;
  }
}

Também é possível definires uma largura mínima e máxima, o que te permite experimentar intervalos diferentes. Este é ativado aproximadamente entre o tamanho de um smartphone e tamanhos maiores de monitores:

@media only screen and (min-width: 700px) and (max-width: 1500px) {
  algo {
    algo: algo;
  }
}

Exemplo de cores no CSS

Cores

CSS Colors é um módulo do CSS que lida com cores, tipos de cores, mistura de cores e transparência. Nem todas as propriedades do CSS que recebem (a) como valor fazem parte deste módulo, mas dependem dele.

Em CSS, podes alterar a cor de praticamente todos os elementos na tua página HTML. Propriedades como background-color, color e border-color definem a cor desses elementos.

O CSS suporta nomes de cor, valores hexadecimais e cores RGB. Para além da introdução da declaração opacity, as cores em CSS3 podem agora ser especificadas através do nome da cor, ou com valores RGB, HEX, HSL, RGBA e HSLA.

O HTML suporta 140 nomes de cor predefinidos.

RGB(A)

RGB significa "Red, Green, Blue" (vermelho, verde e azul, em português). Um valor RGB é uma combinação da intensidade dos valores de vermelho, verde e azul. Cada um deles está entre 0 (preto) e 255 (intensidade máxima). Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa – que especifica a transparência da cor. O parâmetro alfa é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Um valor de cor RGB é especificado com: rgb(vermelho, verde, azul). Um valor de cor RGBA é semelhante, com o valor de alfa na última posição: rgba(vermelho, verde, azul, alfa).

HSL(A)

HSL significa "Hue, Saturation and Lightness" (tom, saturação e brilho, em português). O tom é o grau na roda das cores (de 0 a 360): 0 (ou 360) é vermelho, 120 é verde, 240 é azul. A saturação é um valor em percentagem: 100% é a cor total. O brilho também é uma percentagem; 0% é escuro (preto) e 100% é branco.

Os valores de cor HSLA são uma extensão dos valores de cor HSL com um canal alfa – que especifica a transparência de uma cor.

Um valor de cor HSL é especificado com: hsl(tom, saturação, brilho). Um valor de cor HSLA é semelhante, com o valor de alfa na última posição: hsla(tom, saturação, brilho, alfa).

CMYK

As cores CMYK são uma combinação de CYAN, MAGENTA, YELLOW e BLACK (ciano, magenta, amarelo e preto, em português). Os monitores de computador exibem as cores utilizando valores de cor RGB. As impressoras geralmente apresentam as cores utilizando valores de cor CMYK. Os valores CMYK não são suportados em HTML, mas estão sugeridos como uma nova predefinição no CSS4.

Cores de exemplo: vermelho CMYK: cmyk(0%, 100%, 100%, 0%), verde CMYK: cmyk(100%, 0%, 100%, 0%), ou azul CMYK: cmyk(100%, 100%, 0%, 0%).

Hexcodes

Hexcode, abreviatura para código hexadecimal (hexadecimal code, em inglês), é um modo de expressar um valor de cor no teu computador. Tem este nome porque podem ser utilizados 16 símbolos únicos como valores. Neste caso, são utilizados os números de 0 a 9 e as letras de a até f.

Os códigos hexadecimais são expressados neste formato: #000000, que, neste caso, seria a cor preto. São utilizados seis caracteres em cada hexcode, utilizando qualquer um dos 16 caracteres mencionados anteriormente. Estes seis caracteres são divididos em três pares de dois.

Cada um destes três pares expressa um valor para a quantidade de vermelho, verde e azul numa cor em particular. Se pegarmos no hexcode da cor #AA11BB, AA é a quantidade de vermelho, 11 é a quantidade de verde e BB é a quantidade de azul. 0 é o valor mais baixo de uma cor, enquanto que f é o valor mais elevado.

Os códigos hexadecimais são insensíveis a maiúsculas e minúsculas, o que significa que #FFFFFF e #ffffff seriam a mesma cor: branco.

Adicionalmente, existem 16,777,216 combinações de cores possíveis através da utilização do hexcode.

Transparência

A propriedade opacity do CSS3 define a transparência para todo o elemento (tanto a cor de fundo como o texto serão opacos/transparentes). Ao contrários dos valores de alfa com rgba e hsla, a transparência é herdada pelos elementos descendentes.

O valor da propriedade opacity deve ser um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Exemplos

<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

body {
  background-color: green;
  color: white;
}

No exemplo acima, o background-color: green torna o elemento <body> verde. Isto torna toda a página web verde. Os elementos <p> também ficam todos brancos depois de color: white. Podes utilizar nomes de cores, como green, blue, yellow, red, purple e muitas outras. Para cores personalizadas, contudo, podes utilizar códigos hexadecimais (#147ACC), valores RGB  (rgb(20, 122, 204)) e até mesmo valores HSL (hsl(145, 59%, 30%)).

p {
  color: rgba(244, 145, 14, 0.80); // laranja vivo
}

h2 {
 color: #FA8072; //salmão 
}

Também podes adicionar um valor alfa ou transparência às cores. A transparência permite que seja sobreposto texto sobre uma imagem e que se mantenha a imagem parcialmente visível através do texto, ou pode ser utilizada para alterar a tonalidade da cor, caso não existam outros elementos à frente ou atrás do texto. Utiliza rgba() ou hsla() e preenche os teus valores de cor. O valor alfa fica em último e é uma percentagem convertida em número decimal (por exemplo, 20% é 0.2, 75% é 0.75, etc.).

body {
  background-color: hsl(184, 87%, 94%); // azul vivo
}

O exemplo acima apresenta parágrafos estilizados a laranja vivo e com 20% de transparência, elementos h2 com cor-de-rosa salmão e a cor de fundo do body a azul vivo.

Para fazer com que as cores personalizadas funcionem em CSS, podes achar útil encontrar um selecionador de cores. Alguns editores de texto têm selecionadores de cor incorporados, como, por exemplo, o Visual Studio Code. Se pesquisares "color picker" no Google ou no DuckDuckGo, encontrarás um selecionador de cor que possas utilizar. O Google Chrome e o Firefox também têm add-ons de seleção de cores que podes instalar. O Adobe Color CC não só ajuda a escolher uma cor, como também ajudará a escolher um esquema de cores para a tua página!

É uma boa ideia verificares se tens contraste suficiente entre o texto e as cores de fundo ao utilizar uma ferramenta como o Verificador de Contraste de Cor do WebAIM.

Cores num exemplo de CSS

As cores em CSS são utilizadas para dar cor aos elementos nas tuas páginas web. Existem muitas formas de atribuir cores aos elementos. Podes utilizar o nome das próprias cores, os seus valores RGB ou os valores hexadecimais. Em CSS3, o hsl (tom-saturação-brilho) foi adicionado à especificação.

Nomes de cores

Atualmente, existem 140 nomes de cor suportados em HTML, que podem ser atribuídos em regras CSS simplesmente ao escrever o nome da cor. Por exemplo:

Sintaxe

p {
  color: green;
}

Esta regra altera a cor de letra de todos os elementos <p> para verde.
Podes ver a lista completa das 140 cores aqui: https://www.w3schools.com/colors/colors_names.asp

Valores RGB

RGB significa “Red”, “Green” e “Blue” (vermelho, verde e azul, em Português) e também podemos atribuir cores ao escrever o seu valor RGB nas nossas regras. Um valor RGB teria este aspeto: rgb(255,0,0), onde cada número define a quantidade de cada cor que estará na mistura final.

Os valores variam entre 0 e 255. No nosso exemplo, podemos observar que apenas o primeiro valor é 255, enquanto que os outros dois estão definidos para 0. Isto quer dizer que existe apenas vermelho no nosso valor e o respetivo elemento será pintado de vermelho. Um valor RGB de (0, 0, 0) resulta em preto e um valor de (255, 255, 255) resulta em branco.

É impossível tentar memorizar todos os códigos de cor. Por essa razão, existem inúmeras ferramentas on-line para escolheres as cores que desejas para os teus projetos. Por exemplo: https://www.w3schools.com/colors/colors_picker.asp ou http://htmlcolorcodes.com/color-picker/.

p {
  color: rgb(0, 255, 0);
}

Esta regra altera a cor do texto de todos os elementos p para verde, tal como acima.

Valores hexadecimais

Valores hexadecimais são mais uma forma de definir cores em CSS e funciona de modo bastante semelhante aos valores RGB.

Um código hexadecimal aleatório teria este aspeto: #29432b, onde os dois primeiros caracteres após o cardinal (#) correspondem à quantidade de vermelho na mistura, os segundos dois correspondem à quantidade de verde e os últimos dois correspondem à quantidade de azul.

Os valores #000000 e #ffffff correspondem a preto e a branco, respetivamente.
Podes encontrar os códigos de cor hexadecimais específicos ao utilizar as mesmas ferramentas mencionadas para os valores RGB.

Sintaxe

p {
  color: #00fe00;
}

Esta regra também altera a cor do texto de todos os elementos p para verde.

HSL

O HSL tem três valores. O primeiro é Hue (tom), que é medido em graus. Então, 0 (ou 360) representa a cor vermelho, aos 120 é verde e aos 240 é azul.

O segundo valor é Saturation (saturação), que tem um valor em percentagem com um intervalo de 0 a 100%.

E o terceiro valor é Lightness (brilho), que também tem um valor em percentagem com um intervalo de 0 a 100%. 0% é preto escuro, 50% é meio termo, 100% é branco.

Sintaxe

p {
  color: hsl(0, 100%, 50%);
}

Resultado

JSfiddle

Por que utilizar valores RGB ou HEX?

Os nomes de cores só abrangem 140 valores, enquanto que os valores RGB e HEX têm 16,777,216 de combinações possíveis. Por isso, se quiseres que os teus projetos tenham exatamente o aspeto que imaginaste, deves utilizar estas duas opções e aproveitar os nomes de cores para simulações e testes.

A palavra-chave currentColor

A palavra-chave currentColor, tal como o nome sugere, é um valor de cor válido em CSS. Isto representa o valor específico da propriedade color do elemento. Isto permite-te utilizar o valor da propriedade color para propriedades que não recebem este valor quando ele não é explicitamente definido.

Por exemplo, se declarares cada div para ter um contorno de 3px com a cor currentColor, significa que o contorno de cada div será da mesma cor que o valor da sua propriedade color:

div{
  /* A palavra-chave currentColor para o valor da cor, o que significa que o contorno terá o valor da respetiva propriedade de cor da div */
  border: 3px solid currentColor;
}

/* Esta div terá contorno verde, porque o seu valor de cor é verde. */
#div1{
  color: green;
}

/* Esta div terá contorno azul, porque o seu valor de cor é azul. */
#div2{
  color: blue;
}

Aplicação prática com um SVG

Aqui está um exemplo muito comum na web – um botão com um ícone SVG e texto dentro dele. A cor do contorno, texto e ícones altera ao passar o rato por cima do botão. A imagem abaixo retrata o estado inicial e o estado quando o rato está por cima do botão, por ordem.

Os ícones de fontes também podem ser utilizados para este propósito, mas existem várias vantagens em utilizar SVG em linha em vez de ícones de fontes. Isto pode fazer com que os SVGs sejam a escolha de muitos programadores. Citando o CSS-Tricks,

Pode ser frustrante posicionar um ícone de fonte. Os ícones são inseridos por meio de pseudoelementos, e dependem de line-height, vertical-align, letter-spacing, word-spacing, como o fonte está desenhada (tem espaço natural à sua volta? tem informação de kerning?). Então, o tipo de display dos pseudoelementos causa efeito se essas propriedades tiverem ou não algum efeito. Um SVG tem apenas a dimensão que tem.

Resumindo, por vezes pode ser frustrante utilizar ícones de fonte em conjunto com o texto.

Poderíamos utilizar este nosso código para alcançar este comportamento desejado:

button {
  color: #016898;
}

.emailIcon {
  fill: #016898;
}

button:hover {
  color: #19B5FE;
}

button:hover .emailIcon {
  fill: #19B5FE;
}

Agora, em vez de alterar explicitamente a cor de fill (preenchimento) do SVG ao passar o rato por cima, podemos definir o preenchimento para currentColor. Isto altera automaticamente a cor do SVG para o valor da propriedade color do botão. Agora só precisamos de alterar a propriedade color do botão. Isto torna o código CSS mais curto e inteligente:

.emailIcon {
  fill: currentColor;
}

button {
  color: #016898;
}

button:hover {
  color: #19B5FE;
}

Dá uma vista de olhos ao exemplo em https://repl.it/NNt9/2.

Exemplo de media queries em CSS3

As media queries permitem-te ter estilos diferentes para tamanhos de dispositivos/ecrãs diferentes.

A melhor abordagem ao desenhar um site responsivo é pensar primeiro em dispositivos móveis; o que significa que começas a criar a tua página com o aspeto e conteúdo da versão para dispositivos móveis.

Podes pensar que com uns tamanhos escalonáveis ( %, vw ou vh ) a tua página se adapte de forma perfeita a qualquer dispositivo. Isso, porém, não vai acontecer. Talvez para um aspeto muito básico, mas garantidamente não funcionará em páginas mais comuns ou complexas!

Ao desenhares a tua página para dispositivos mais pequenos, o teu foco será no conteúdo principal. Num ecrã maior, terás de readaptar alguns tamanhos de letra, margens, paddings, entre outros, de modo a manter a tua página confortável e legível. Também vais querer/precisar adicionar mais conteúdo, as partes que não achaste fundamentais e preencher o espaço vazio criado pelo tamanho do ecrã.

O processo de pensamento deve ser:

1. Que conteúdo apresentar?
2. Como organizar?
3. Dimensões?

A sintaxe básica

    @media only screen and (min-width: 768px) {
      p {padding: 30px;}
    }

A tag p terá um padding de 30px assim que o ecrã atingir a largura mínima de 768px.

A sintaxe de AND

  @media only screen and (min-height: 768px) and (orientation: landscape) {
    p {padding: 30px;}
  }

A tag p terá um padding de 30px assim que o ecrã atingir a altura mínima de 768px e a orientação do ecrã esteja no modo landscape.

A sintaxe de OR

    @media only screen and (min-width: 768px), (min-resolution: 150dpi) {
      p {padding: 30px;}
    }

A tag p terá um padding de 30px assim que o ecrã atingir a largura mínima de 768px ou a sua resolução atinja no mínimo 150dpi.

Exemplo de fontes no CSS

As diferentes propriedades de fonte do CSS definem o tamanho, peso, estilo, altura de linha e fonte/tipo de letra do texto na página.

Fonte

A fonte ou tipo de letra do texto é definida ao utilizar a propriedade font-family.

Esta propriedade funciona com um sistema de reserva – se o teu navegador não suportar a primeira fonte, este tentará cada uma das fontes subsequentes até encontrar uma que seja suportada. Se o nome da fonte for maior do que uma palavra, este deve estar entre aspas. Por exemplo:

p {
    font-family: "Times New Roman", Times, serif;   
}

A fonte Times New Roman é constituída por três palavras e deve ser colocada entre aspas. Por outro lado, serif é apenas uma palavra e não precisa das aspas.

O último item na lista deve ser sempre uma fonte genérica, como serif, sans-serif, monospace, cursive, fantasy, system-ui.

Estilo de fonte

A propriedade font-style pode ser utilizada para tornar o texto itálico ou oblíquo.

Existem três valores possíveis para esta propriedade:

• normal - O texto é apresentado no modo normal
• italic - O texto é apresentado em itálico
• oblique - O texto é apresentado inclinado

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

Tamanho de letra

Utiliza a propriedade font-size para ajustar o tamanho do texto. O tamanho de letra predefinido é 16px em maior parte dos navegadores.

Aqui estão os valores de tamanho de letra mais utilizados:

• px (pixeis)
• em - 1em – o tamanho de letra do elemento pai
• rem – o tamanho de letra do elemento raíz
• % - percentagens

.with-pixels {
    font-size: 14px;
}

.with-ems {
    font-size: 0.875em;
}

.with-absolute {
    font-size: large;
}

.with-percentage {
    font-size: 80%;
}

Peso da fonte

A propriedade font-weight ajusta o peso do texto. Esta propriedade aceita valores de palavra-chave como bold ou normal, além de valores numéricos de palavra-chave, como 400  700.

Aqui estão alguns valores de palavras-chave e palavras-chave numéricas comuns:

O valor predefinido para o peso da fonte é 400 ou normal.

p {
   font-weight: bold
}

Nota: nem todas as palavras-chave ou palavras-chave numéricas estão disponíveis para todas as famílias de fonte. Por exemplo, se estiveres a carregar uma fonte do Google Fonts, precisarás de selecionar todos os pesos de fonte que desejas utilizar.

Exemplo de alinhamento de texto em CSS

Esta propriedade do CSS descreve o alinhamento horizontal do conteúdo em linha no seu bloco pai. text-align não controla o alinhamento dos elementos do bloco, este afeta apenas o seu conteúdo em linha.

Valores:

A propriedade text-align é especificada como uma única palavra-chave escolhida a partir da lista de valores abaixo:

text-align: left; alinha o texto à esquerda

text-align: right; alinha o texto à direita

text-align: center; alinha o texto ao centro

text-align: justify; faz com que as linhas tenham todas a mesma largura

text-align: justify-all; faz com que as linhas tenham todas a mesma largura, incluindo a última linha

text-align: start; alinha a última frase ao início da linha

text-align: end; alinha a última frase ao final da linha

text-align: match-parent; calcula o início e fim do valor na direção do elemento pai e substitui pelo valor apropriado de left ou right.

Valores de alinhamento de bloco (sintaxe não predefinida):

text-align: -moz-center;

text-align: -webkit-center;

Valores globais:

text-align: inherit; herda do seu elemento pai

text-align: initial; valor predefinido

text-align: unset; aplica quer o valor inherit quer o initial, com base nas propriedades predefinidas do elemento

Exemplo do modelo de caixas do CSS

Compreender o modelo de caixas do CSS é crucial para sermos capazes de organizar corretamente uma página web.

Quando um navegador renderiza (desenha) uma página web, cada elemento, por exemplo, um pedaço de texto ou uma imagem, é desenhado como uma caixa retangular seguindo as regras do modelo de caixas do CSS.

No centro da caixa está o próprio conteúdo, que ocupa uma determinada altura e largura. Esta região é conhecida como área de conteúdo. A dimensão da área de conteúdo pode ser determinada automaticamente, ou então podes definir explicitamente uma altura e largura (ver nota abaixo sobre box-sizing).

À volta da área de conteúdo, existe uma região conhecida como área de padding. A dimensão do padding pode ser a mesma a toda a volta (definido com padding), ou então podes definir o padding de maneira individual para o topo, direita, baixo e esquerda (com padding-top, padding-right, padding-bottom e padding-left).

De seguida temos a Área de Contorno. Isto cria um contorno à volta do elemento e do seu padding. Podes definir a grossura (border-width), cor (border-color) e estilo (border-style) do contorno. As opções de estilo incluem none (sem contorno), solid, dashed, dotted e muitas mais.

Adicionalmente, podes definir o contorno nos 4 lados de maneira individual; por exemplo, o contorno do topo com border-top-width, border-top-color e border-top-style para a largura do contorno, cor e estilo (ver nota abaixo sobre box-sizing).

Por último, existe a área de margem. Isto cria espaço livre à volta do elemento, do padding e do contorno. Novamente, podes definir de modo individual as margens para o topo, direita, baixo e esquerda (com margin-top, margin-right, margin-bottom e margin-left). Em algumas circunstâncias, o colapso de margens ocorre e as margens de elementos adjacentes podem ser partilhadas.

Propriedade box-sizing: O valor predefinido para esta propriedade é content-box. Se utilizares a predefinição, então o modelo da caixa permitirá que o autor especifique a dimensão da área de conteúdo. No entanto, é possível utilizar isto para especificar a dimensão da área de contorno. Isto é feito ao alterar a propriedade box-sizing para border-box. Isto pode por vezes criar layouts mais facilmente. Podes definir a propriedade box-sizing por elemento, da maneira que desejares.

Cursores do CSS

A propriedade cursor especifica o tipo de cursor a ser exibido quando se passa o rato por cima de um elemento. Tem 36 valores possíveis:

    .auto            { cursor: auto; }
    .default         { cursor: default; }
    .none            { cursor: none; }
    .context-menu    { cursor: context-menu; }
    .help            { cursor: help; }
    .pointer         { cursor: pointer; }
    .progress        { cursor: progress; }
    .wait            { cursor: wait; }
    .cell            { cursor: cell; }
    .crosshair       { cursor: crosshair; }
    .text            { cursor: text; }
    .vertical-text   { cursor: vertical-text; }
    .alias           { cursor: alias; }
    .copy            { cursor: copy; }
    .move            { cursor: move; }
    .no-drop         { cursor: no-drop; }
    .not-allowed     { cursor: not-allowed; }
    .all-scroll      { cursor: all-scroll; }
    .col-resize      { cursor: col-resize; }
    .row-resize      { cursor: row-resize; }
    .n-resize        { cursor: n-resize; }
    .e-resize        { cursor: e-resize; }
    .s-resize        { cursor: s-resize; }
    .w-resize        { cursor: w-resize; }
    .ns-resize       { cursor: ns-resize; }
    .ew-resize       { cursor: ew-resize; }
    .ne-resize       { cursor: ne-resize; }
    .nw-resize       { cursor: nw-resize; }
    .se-resize       { cursor: se-resize; }
    .sw-resize       { cursor: sw-resize; }
    .nesw-resize     { cursor: nesw-resize; }
    .nwse-resize     { cursor: nwse-resize; }

Também podes definir uma imagem como cursor.

.custom-cursor {
  cursor: url(cursor-image.png);
}