CSS

Sobre o CSS

CSS, em inglês Cascading Style Sheets, é uma linguagem de estilização usada para ajustar o HTML. Ela é composta de seletores e propriedades(regras) e a sintaxe geral é:

seletor {
    propriedade: valor;
}
/*
Comentário
*/

Como integrar o CSS e o HTML

Existem 3 formas de colocar o CSS para estilizar o HTML:

Como atributo no elemento

Exemplo

<body>
    <p style="font-size: 12px; color: red;">Um parágrafo de exemplo</p>
</body>

Dentro do elemento Style

Exemplo

<head>
    <style>
        p {
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
    <p>Um parágrafo de exemplo</p>
</body>

Em outro arquivo

No arquivo HTML:

<head>
    <link rel="stylesheet" type="text/css" href="file.css">
</head>
<body>
    <p>Um parágrafo de exemplo</p>
</body>

Em um arquivo .css:

p {
    font-size: 12px;
    color: red;
}

{% hint style="info" %} OBS: a tag link é utilizada para integrar o arquivo .css com o HTML. {% endhint %}

{% hint style="info" %} OBS2: a forma mais apropriada para integrar é utilizando o arquivo separado. {% endhint %}

Seletores

Existem alguns tipos de seletores: por tag HTML, por classe e por id.

Tag Selector

As regras dentro desse seletor se aplicam a todas as tags HTML desse tipo. Exemplos:

/*
Todos os parágrafos p ficarão com a cor azul de texto
*/
p {
    color: blue;
}
/*
Todos os div ficarão com a cor de fundo amarela
*/
div {
    background-color: yellow;
}

Class Selector

As regras dentro desse seletor se aplicam a todas as tags HTML que tenham a classe seletora. Se coloca um "." antes da palavra, para indicar que é uma classe.

/*
Todos os elementos com a classe title ficarão com o tamanho de texto de 48px.
*/
.title {
    font-size: 48px;
}

Id Selector

As regras dentro desse seletor somente se aplicarão à tag que tem o id igual ao id seletor. Se coloca um "#" antes da palavram, para indicar que é um id.

/*
O elemento com o id my_id terá a largura de 100% do elemento pai
*/
#my_id {
    width: 100%;
}

Combinando Seletores

É possível combinar mais de um seletor ou especificar seletores para alcançar mais elementos ou elementos mais específicos.

Multiplos Seletores

Pode-se colocar múltiplos seletores para as mesmas regras. As regras serão aplicadas para todos as tags selecionadas.

/*
Esse código aplica a regra de padding(espaço entre o elemento e sua borda) para todas as tags button e p, além de aplicar para tags que tenham a classe some_class
*/
button, .some_class, p {
    padding: 10px;
}

Seletores Específicos

Para a tag ser estilizada, ela precisa participar dos dois ou mais grupos de seletores. Pode ser uma tag e uma classe, ou duas classes ou mais.

/*
Apenas um div que tenha a classe specific irá ter sua cor de fundo mudada para #FFFFFF(branco em hexadecimal)
*/
div.specific {
    background-color: #FFFFFF;
}
/*
Apenas para um elemento que tenha as classes dark, large e spaced essas regras se aplicarão
*/
.dark.large.spaced {
    color: black;
    width: 200px;
    margin: 20px;
}

Seletores Descedentes

Uma relação de descendência entre os seletores. A sintaxe é

seletor1 seletor2 {
    regras...
}

Onde o seletor1 representa o "elemento pai" do seletor2.

Exemplo: arquivo HTML

<div class="links-container">
    <a>Link 1</a>
    <a>Link 2</a>
</div>

Exemplo: arquivo CSS

/*
Apenas links(tags a) dentro de um elemento que contenha a classe links-container irão ter a decoração de texto retirada e a cor mudada para preto.
*/
.links-container a {
    text-decoration: none;
    color: black;
}

Caso especial: Descendente direto

Coloca-se ">" para que só se peguem os descendentes diretos do "elemento pai".

Exemplo usando o exemplo HTML acima:

/*
Nesse caso, mesmo que tivesse outro div dentro do div de links-container e dentro desse div tivesse um link(tag a), apenas os links 1 e 2 serão estilizados.
*/
links-container > a {
    text-decoration: none;
    color: black;
}

Seletor de tudo(*)

Para selecionar todas as tags HTML é possível usar o "*". A aplicação seria para pegar todas as "crianças" diretas de um elemento pai:

/*
Todos os elementos filhos diretos do elemento com a classe links-container teriam seu estilo alterado.
*/
links-container > * {
    color: black;
}

Precedência

Quando existem regras conflitantes entre si, por exemplo 2 regras mudando a cor de um texto, existe uma ordem de precedência que o CSS obedece ao estilizar o HTML:

A regra mais específica
Seletor de Id
Seletor de Classe
Regras que vierem depois de outras que estão antes no arquivo

{% hint style="info" %} OBS: pode-se usar !important depois de uma regra para anular qualquer outra, independentemente da precedência explicada anteriormente. {% endhint %}

Propriedades

São as regras que serão passadas aos elementos selecionados pelos seletores. Antes de falarmos das propriedades, falaremos de algumas unidades utilizadas nessas regras.

Unidades

No HTML e CSS existem várias unidades que serão utilizadas para definir o espaço no site. Entre elas, temos:

Pixel(px)
rem
vw e vh
%

Pixel

É a unidade mais comum de medição. Representa um pixel na tela(depende da tela utilizada).

Exemplo

Rem

É uma unidade relativa ao tamanho da fonte do elemento raiz(html, body), ou seja, é bem útil para padronizar o site. Na maioria dos browsers dos computadores, 1rem equivale a 16px.

Vw e Vh

São unidades relativas à proporção da tela que o usuário está usando. Vw significa viewport width, ou seja, está relacionada a uma porcentagem da largura da tela. Já Vh é a viewport height, está relacionada a uma porcentagem da altura da tela.

%

Como o símbolo já sugere, ele representa uma porcentagem do "elemento pai".

Propriedades relativas a texto

Font-size

É o tamanho da fonte do texto. Para o exemplo utilizado na explicação sobre o pixel, foi utilizada essa propriedade para definir o tamanho do texto. Os valores possíveis são as unidades previamente explicadas ou valores padrão: small, medium, large, ...etc.

Line-height

É o espaço entre as linhas do texto. Ela será multiplicada pelo tamanho da fonte(font-size). São utilizadas as unidades de medida.

Text-align

Alinhamento do texto. Pode ter os valores de: left, right, center, justify e justify-all.

Text-decoration

Decoração do texto, pode ser underline, overline, line-through ou none.

Font-weight

É quão negrito o texto deve ficar. São utilizadas medidas de 100 a 900, valores padrão: normal(400), bold(700) ou ainda valores relativos como bolder(mais negrito) e lighter(menos negrito).

Font-family

É o fonte do texto. Podem ser colocados vários valores em sequência(font-family: "value1", "value2", ..., value;) para caso alguma das fontes não seja encontrada a seguinte ser implementada no texto. Tem alguns valores padrão como serif, sans-serif, monospace, cursive e fantasy; porém é possivel adicionar uma fonte externa utilizando o seguinte código no css:

@font-face {
    font-family: name;
    src: url('url');
}

Para isso, é preciso ter a fonte em um arquivo do tipo fonte(.tff) e que ele esteja adicionado no projeto. Assim, o "name" seria o nome dado à fonte(que será utilizado para definir essa fonte nos outros textos) e o 'url' seria o caminho relativo do arquivo do tipo fonte no projeto.

Outra forma é utilizando fontes externas, é só importá-las utilizando a tag <link/> do html. Um exemplo de fácil uso é o google fonts:

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap" rel="stylesheet">
</head>

Para esse exemplo em específico, podemos usar a fonte importada normalmente no css:

p {
    font-family: 'Inconsolata', monospace;
}

{% hint style="info" %} Ambos os códigos foram tirados do próprio site do Google Fonts {% endhint %}

Color

É a cor do texto. Pode ser:

Um dos valores padrão como "blue" e "transparent";
rgb(significa red green blue, uso: rgb(valor1, valor2, valor3), onde o valor varia de 0 a 255);
rgba(o mesmo que rgb só que o "a" significa a transparência, uso: rgba(valor1, valor2, valor3, valor4), onde o valor varia de 0 a 255)
hexadecimal(uso: #valor, onde o valor é em hexadecimal)

Propriedades de containers

Background-color

Cor do fundo do container. Os valores são os mesmo aplicados a propriedade "color".

Background-image

Propriedade utilizada para colocar uma imagem no fundo no container. Propriedades relacionadas:

Background-repeat: repeat/repeat-x/repeat-y/no-repeat; É usado para definir o que fazer caso a imagem não seja do tamanho do container.
Background-size: contain/cover/width/height; É usado para definir como a imagem vai cobrir o container
Background-position: center/x/y; É usado para definir a posição da imagem no fundo

Border

É um conjunto de 3 outras propriedades relacionadas à borda do elemento:

border-width: usa as unidades de medida para definir qual é o tamanho da borda
border-style: tem alguns valores padrão: none, hidden, solid, dotted, dashed, groove, ridge, inset e outset
border-color: tem os mesmos valores que "color".

{% hint style="info" %} OBS: Border-radius é uma outra propriedade relacionada à borda que deve ser definida separadamente para arredondar os cantos das bordas. O valor é de unidade de medida. {% endhint %}

{% hint style="info" %} OBS2: Todas essas propriedades podem ser definidas para apenas um dos cantos usando border-(left/right/top/bottom) ou ainda definir para os 4 cantos de uma vez da seguinte forma: {% endhint %}

* 1 valor(será aplicado para todos os 4)
* 2 valores(top e bottom para o primeiro valor, left e right para o segundo)
* 4 valores(top, right, bottom e left)

Margin

É uma propriedade que define quanto de espaço o elemento irá "empurrar" os elementos adjacentes. Usam-se as unidades de medida. Podem ser aplicadas as regras da OBS2 da Border para definir para um dos 4 cantos.

Padding

É a propriedade que define quanto de espaço entre o elemento e a borda tem que existir. Usam-se as unidades de medida. Podem ser aplicadas as regras da OBS2 da Border para definir para um dos 4 cantos.

Width e Height

São duas propriedades que definem qual será o tamanho do elemento. Quando se coloca apenas uma delas, a outra é calculada automaticamente. Os valores podem ser:

Valores de unidade de medida
Valores padrão como max-content, min-content e fit-content

{% hint style="info" %} OBS: os prefixos max- e min- podem ser usados antes de width e height para definir outras propriedades que definem um tamanho máximo ou mínimo para o elemento. {% endhint %}

The Box Model

As 4 últimas propriedades fazem parte do Box Model:

Propriedade Box-sizing

Define se as propriedades de height e width vão considerar apenas o conteúdo da caixa e padding e border são "adicionais"(content-box) ou vão considerar a padding e a border também, sendo o tamanho total considerado para o cálculo dessas propriedades(border-box).

Propriedades de Overflow

Às vezes os elementos são grandes demais para a tela, e para essa e outras razões existe a propriedade de overflow, que pode deixar que os elementos passem do container que estão de alguma forma, que depende do valor passado. Valores possíveis:

auto: se necessário, será adicionado um scroll
hidden: a parte que está além dos limites do elemento será escondida
visible: o overflow fica visível
scroll: adiciona um scroll, mesmo que não seja necessário

{% hint style="info" %} OBS: É possível utilizar essa propriedade separadamente para eixo x e y, utilizando overflow-x ou overflow-y. {% endhint %}

Propriedade Display

Essa propriedade define como o elemento será disposto na tela. Existem 2 tipos principais de elemento no HTML:

Elementos de bloco(block): esses por padrão ocupam o espaço de tal forma que não é possível nenhum elemento ficar à sua esquerda ou direita sem o uso de outras propriedades. Eles respeitam as propriedades de width e height.
Elemento do tipo linha(inline): esses se ajustam de forma que eles podem ficar na mesma linha que outros elementos inline ou inline-block, como veremos depois. Eles não respeitam as propriedades de width e height.

Dessa forma, motivado a colocar um width ou height em um elemento inline, foi-se criado o tipo "inline-block", que tem as mesmas características do tipo block, porém pode ficar ao lado de outros elementos.

Outra valor possível para a propriedade Display é o "none", que basicamente retira o elemento da página. Ele pode ser útil para fazer um site responsivo, pois quando a tela é muito pequena é possível retirar alguns elementos e adicionar outros mais adequados.

Display flex

Por último, um valor para o display pode ser "flex", que define o elemento como um container(a flexbox) e os seus "elementos filhos"(flex-itens) serão organizados de alguma forma inteligente, dependendo do valor de algumas propriedades relacionadas.

Entre essas propriedades temos:

flex-flow: é uma propriedade da flexbox que engloba outras 2(flex-flow: flex-direction flex-wrap):
- flex-direction: define a direção em que os itens dentro da flexbox vão ser colocados (pode ser row, row-reverse, column, column-reverse)
- flex-wrap: define se os elementos ficarão em só uma fila ou em mais de uma(tem os valores wrap, wrap-reverse, nowrap).
Exemplo: flex-flow: row wrap;
flex: é uma propriedade de flex-item que engloba outras 3(flex: flex-grow flex-shrink flex-basis;) :
- flex-grow: determina quanto esse flex-item crescerá em relação ao seus "elementos irmãos" com menores valores dessa propriedade(valores são 0,1,2,3,4, ...)
- flex-shrink: o contrário do que o flex-grow faz(faz o elemento diminuir com base nos "elementos irmãos" com menores valores)
- flex-basis: dependendo se a flex-direction é row(ou row-reverse)/column(ou column-reverse), vai governar o width/height do flex-item
{% hint style="info" %} OBS: é possível determinar somente a primeira propriedade, por exemplo: flex: 1; {% endhint %}
justify-content/align-items: essas 2 propriedades de flexbox ajudam a ajustar o elemento no container, para auxiliar a colocá-los da forma que desejamos. Elas vão depender da flex-direction. Valores para justify-content(flex-direction da esquerda é row e o da direita é column):

Valores para align-items(flex-direction da esquerda é row e o da direita é column):
align-content: como as linhas(no caso de justify-content row) ou colunas(no caso de justify-content column) serão organizadas.
align-self: valores do align-items; propriedade de flex-item, alinha apenas um item
order: valores de 1,2,3, ...etc. propriedade de flex-item, ordena os items da forma em que o primeiro é o 1, o segundo é o 2, ...etc.

Display Grid

Mais um valor possível para a propriedade display é grid(ou inline-grid), que forma um container(grid-container) com elementos em grade(grid-itens). Dessa forma, os elementos ficam organizados em linhas e colunas.

Propriedades relacionadas

Algumas propriedades são utilizadas para ajustar a grid. Algumas delas são:

Gap: é o conjunto de 2 outras propriedades, row-gap e column-gap, define o espaço entre as colunas e entre as fileiras. É uma propriedade para o container grid.
Grid-template: uma propriedade para container, que é um shortcut para outras 3 propriedades:
- Grid-template-rows: define o tamanho das linhas e quantas linhas serão formadas. Exemplo: grid-template-rows: auto auto auto significa que terão 3 linhas e o tamanho calculado das linhas será automático.
- Grid-template-columns: define o tamanho das colunas e quantas colunas serão formadas. Exemplo: grid-template-rows: 20% 20% 20% significa que terão 3 colunas e o tamanho de cada linha será 20% do elemento.
- Grid-template-areas: é uma propriedade que depende da nomeação de uma àrea usando uma propriedade no grid item, grid-area. Dessa forma, é possível definir um espaço mais(tanto para fileira quanto para coluna) para esse grid item ou vários definidos com o grid-area. Exemplo: grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; significa que o grid item(definido dessa forma: grid-area: myArea) ocupará as primeiras 2 colunas e 2 fileiras.
Grid-column/Grid-row/Grid-area: grid-area é a propriedade definida na anterior, porém ela pode ser usada como a junção entre grid-row e grid-column, os quais por sua vez representam 2 outras propriedades: grid-row-start/grid-column-start e grid-row-end/grid-column-end. Assim, essas propriedades, todas colocadas em grid-itens, determinam onde um elemento vai começar e onde vai terminar no grid, de forma que ele ocupe um espaço personalizado no grid.

Propriedade Position

Essa propriedade determina como o elemento será disposto na tela em geral. Os valores possíveis são:

static: é o valor padrão, significa um elemento não-posicionado, ou seja, ele será posto na forma padrão.
fixed: o elemento não "descerá" com o resto da página.
relative: o elemento fica normalmente na página, mas respeita algumas propriedades de posicionamento.
absolute: o elemento é posicionado de acordo com algum elemento "pai" ou "avô" que seja posicionado(fixed, relative ou absolute).
sticky: o elemento se comporta normalmente até o elemento ancestral mais próximo que tiver um scroll rolar até onde ele sairia da tela. Em vez disso, o elemento "gruda" no topo e continua sendo mostrado.

Propriedades de posicionamento

São 4 propriedades(left, right, top, bottom) que governam onde os elementos posicionados(fixed, relative ou absolute) ficarão. Os valores possíveis são as unidades de medida, que determinam o "espaço" que o elemento vai ter desse lado. Por exemplo: left: 10px significa que o elemento ficará à 10 pixels da parte esquerda(seja da tela na position:relative e na position:fixed ou de algum container que seja posicionado e ancestral à esse elemento na position:absolute)

Propriedade do z-index

Ela determina o grau de sobreposição entre elementos posicionados. Valores de 0,1,2,...etc que quanto maior o valor, mais em cima será colocado o elemento.

Pseudo-classes

São classes que são definidas pelo próprio navegador e auxiliam a criar certas funcionalidades. A sintaxe é:

outro-seletor:pseudo-class {
    propriedade: valor;
}

Algumas propriedades são:

visited: serve para tags a(links), significa que o estilo será aplicado quando o link já estiver sido clicado anteriormente.
hover: muda o estilo quando o mouse estiver sobre o elemento.
active: muda o estilo quando o mouse clicar no elemento.

nth-child: uma pseudo-classe para listas(é preciso selecionar os list itens). As opções são odd/even/3n/4n/...etc. Isso selecionará de acordo com a opção somente os itens nesse padrão e aplicará o estilo.

Exemplo:

<ol>
    <li class="list-item">Ímpar</li>
    <li class="list-item">Par</li>
    <li class="list-item">Ímpar</li>
    <li class="list-item">Par</li>
</ol>

.list-item:nth-child(even) {
    color: red;
}

FilesExpand file tree

css.md

Latest commit

History

css.md

File metadata and controls

CSS

Sobre o CSS

Como integrar o CSS e o HTML

Exemplo

Exemplo

No arquivo HTML:

Em um arquivo .css:

Seletores

Tag Selector

Class Selector

Id Selector

Combinando Seletores

Multiplos Seletores

Seletores Específicos

Seletores Descedentes

Exemplo: arquivo HTML

Exemplo: arquivo CSS

Caso especial: Descendente direto

Exemplo usando o exemplo HTML acima:

Seletor de tudo(*)

Precedência

Propriedades

Unidades

Pixel

Exemplo

Rem

Vw e Vh

%

Propriedades relativas a texto

Font-size

Line-height

Text-align

Text-decoration

Font-weight

Font-family

Color

Propriedades de containers

Background-color

Background-image

Border

Margin

Padding

Width e Height

The Box Model

Propriedade Box-sizing

Propriedades de Overflow

Propriedade Display

Display flex

Display Grid

Propriedades relacionadas

Propriedade Position

Propriedades de posicionamento

Propriedade do z-index

Pseudo-classes