CSS3

1 - CSS - Introdução

Webdesign By Giovanni Francesco Guarnieri

O que é CSS?

CSS é a sigla para Cascading Style Sheets, que em português significa Folhas de Estilo em Cascata. O CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como o HTML. O CSS separa o conteúdo da representação visual do site. Com o CSS é possível alterar a cor do texto, a fonte, o espaçamento entre parágrafos, o tamanho das imagens, o layout e muito mais.

Como funciona o CSS?

O CSS funciona em conjunto com o HTML. O HTML é responsável pela estrutura do site, enquanto o CSS é responsável pela aparência visual. O CSS é composto por regras de estilo que são aplicadas a elementos específicos do HTML. Cada regra de estilo é composta por um seletor e uma declaração. O seletor é o elemento HTML que será estilizado, e a declaração é a propriedade que será aplicada a esse elemento.

Formas de aplicar CSS

Sintaxe do CSS


/* Seletor */
seletor {
    /* Propriedade: Valor */
    color: red;
    font-size: 16px;
}

Exemplo de CSS


/* Seletor */
h1 {
    /* Propriedade: Valor */
    color: red;
    font-size: 24px;
}

Seletores CSS

Os seletores CSS são utilizados para selecionar elementos HTML e aplicar estilos a eles. Existem vários tipos de seletores CSS, como seletores de elemento, seletores de classe, seletores de ID, seletores de atributo, seletores de pseudo-classe e seletores de pseudo-elemento.

Exemplo de seleção de vários elementos de diferentes formas 


/* Seletor de elemento */
p {
    color: red;
}

/* Seletor de classe */
.btn {
    color: green;
}

/* Seletor de ID */
#header {
    color: orange;
}

/* Seletor de atributo */
[type="text"] {
    color: pink;
}

/* Seletor de pseudo-classe - hover -> ao passar o mouse */
a:hover {
    color: red;
}

Comentários CSS

Os comentários CSS são utilizados para adicionar notas ao código CSS. Os comentários CSS não são renderizados no navegador, e são utilizados apenas para documentação e organização do código.


/* Comentário de uma linha */
/* Comentário de 
várias linhas */

Propriedades CSS

As propriedades CSS são utilizadas para definir o estilo dos elementos HTML. Existem várias propriedades CSS, como propriedades de texto, propriedades de fonte, propriedades de cor, propriedades de layout, propriedades de borda, propriedades de fundo, propriedades de animação, entre outras.

Valores CSS

Os valores CSS são utilizados para definir o comportamento das propriedades CSS. Existem vários tipos de valores CSS, como valores numéricos, valores de cor, valores de tamanho, valores de fonte, valores de layout, valores de borda, valores de fundo, valores de animação, entre outros.

Modo compilado - Propriedades

Algumas propriedades CSS podem ser agrupadas em uma única linha de código utilizando o modo compilado. O modo compilado é uma forma mais compacta de escrever o CSS, que facilita a leitura e a manutenção do código. No modo compilado, as propriedades são separadas por ponto e vírgula, e os valores são separados por espaços.

Unidades de Medidas

As unidades de medida CSS são utilizadas para definir o tamanho dos elementos HTML. Existem vários tipos de unidades de medida CSS, como unidades de comprimento, unidades de ângulo, unidades de tempo, unidades de frequência, unidades de resolução, entre outras.

Cores

As cores CSS são utilizadas para definir a cor dos elementos HTML. Existem várias formas de definir cores em CSS, como cores nomeadas, cores hexadecimais, cores RGB, cores RGBA.. entre outras.

Exemplo de aplicação de cor em p, h1 e elementos com classe btn


/* Seletor */
p {
    /* Propriedade: Valor */
    color: red;
}

h1 {
    color: blue;
}

.btn {
    color: green;
}

Background

O background CSS é utilizado para definir o fundo dos elementos HTML. Existem várias propriedades de background CSS, como background-color, background-image, background-repeat, background-position, background-size, background-attachment


/* Seletor */
body {
    /* Propriedade: Valor */
    background: red url('imagem.jpg') no-repeat center center;
}

Bordas

As bordas CSS são utilizadas para definir a borda dos elementos HTML. Existem várias propriedades de borda CSS, como border-width, border-style, border-color, border-radius, border-image.

Exemplo de aplicação de borda em btn 


/* Seletor */
.btn {
    /* Propriedade: Valor */
    border: 1px solid red;
}

Fontes

As fontes CSS são utilizadas para definir a fonte dos elementos HTML. Existem várias propriedades de fonte CSS, como font-family, font-size, font-weight, font-style, font-variant

Exemplo de aplicação de fonte em h1 



/* Seletor - Aplicação de estilo */
h1 {
    /* Propriedade: Valor */
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* Seletor - Aplicação de estilo em modo compilado  */
h1 {
    /* Propriedade: Valor */
    font: italic bold 16px Arial, sans-serif;
}

Texto

O texto CSS é utilizado para definir o estilo do texto dos elementos HTML. Existem várias propriedades de texto CSS, como as comentadas acima e também: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, text-shadow.

Exemplo de aplicação de texto em p 


/* Seletor */
p {
    /* Propriedade: Valor */
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    text-indent: 20px;
    line-height: 1.5;
    letter-spacing: 2px;
    word-spacing: 4px;
    white-space: nowrap;
    text-shadow: 1px 1px 1px black;
}

Referências Bibliográficas

Illustrations by unDraw
MDN Web Docs - HTML
W3Schools - HTML
AOS - Animate on Scroll Library
SaaSDesign - Figma Website Template - Landing Page (Free)