Seguinte Lesson

Aula 1

Bytes4Future – PowerUP Old CSS Aula 1

O que é CSS ?

É uma linguagem de estilização;
Um acrónimo para Cascading Style Sheets;
Frequentemente utilizada com HTML;
Podemos posicionar elementos, criar animações e reproduzir layouts na web;

Em prática, é o que nos permite passar disto…

…Para isto

Sintaxe

Para estilizar elementos vamos sempre seguir alguns passos;
Escolher a tag (por meio do nome, classe ou id);
Abrir e fechar chavetas, delimitando o espaço dos estilos do elemtento;
Escrever as regras de estilização;
Todas devem terminar com um ponto virgula(;).

seletor { 
  propriedade: valor;
}

Seletor: é um elemento da marcação HTML Identificado pelo seu nome(tag), classe(nome-da-classe) ou id(#nome-do-id);
Declaração:
- Propriedade: define o que mudará no elemento HTML (tamanho da fonte, cor do texto, altura do elemento).
- Valor: é a característica que o elemento html irá assumir.(letra tipo Arial, cor azul, fundo verde)

body {
  background-color: #000;
}

Formas de adicionar o CSS

Temos três maneiras de para adicionar CSS numa página:

Inline: onde o CSS fica na tag;
Internal CSS: onde o CSS fica no head da página;
External CSS: onde o CSS fica em um arquivo externo;

Esta última forma é a mais indicada, e devemos sempre sempre tentar, utilizá-la;

CSS Inline

Tal como o nome indica, o CSS inline é escrito “dentro da linha” do elemento de HTML.

Por exemplo, se quisermos que um título fique vermelho, escrevemos assim:

<h1 style="color: red; font-size: 30px;">Era uma vez</h1>

CSS Interno

Para utilizarmos CSS Interno, usamos a tag <style> dentro da tag <head> do documento HTML.

<!doctype html>
<html lang="en">
    <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Três métodos de ligar CSS</title>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>Era uma vez</h1>
    </body>
</html>

CSS Externo

Para podermos usar CSS externo, precisamos de conectar o nosso ficheiro HTML com um ficheiro externo de CSS. Para isso, utilizamos a tag <link> dentro da <head> no nosso ficheiro HTML.

<head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Três métodos de ligar CSS</title>
     <link rel="stylesheet" href="css-externo-css" />
</head>

Selectors

Os selectors, ou selectores, tal como o nome indica é o que nos permite selecionar os elementos HTML, aos quais queremos modificar propriedades.

Temos formas além das tags de selecionar elementos:

Por classes: quando queremos afetar mais elementos
Por identificadores: quando queremos afetar um único elemento

Estas formas são referentes aos atributos class que no CSS representado por . (ponto) e id que no CSS é representado por # (cardinal);

Especificidade

Caso tenhamos mais que uma regra para um mesmo elemento, a especificidade é um valor invisível que irá calcular que regra de CSS é que se aplica a esse mesmo elemento.

De maior especificidade para menor, temos:

CSS Inline
Selector de ID
Selector de Class
Selector de Elemento

Cores

Em CSS uma das propriedades que podemos aplicar são cores.
Há 3 formas de utilização das mesmas:

Nome da cor
Código Hexadecimal
Código RGB

Module anterior

Voltar para Module