Introdução ao CSS

Try it - Editor W3Schools

O que é o CSS?

O CSS (Cascading Style Sheet) é uma "folha de estilo" composta por camadas. Sua principal aplicação é formatar a apresentação do conteúdo em páginas da WEB (desenvolvidas em linguagens de marcação como XML, HTML e XHTML). Uma das principais vantagens em adotar o CCS é separar os códigos de estrutura e formatação.

Foi desenvolvido em 1996 pelo W3C (World Wide Web Consortium) afim de agregar um padrão a formatação (estilos) do conteúdo HTML, uma vez que a linguagem de marcação é bastante limitada neste quesito. A relação entre HTML e CSS é bastante estreita, para desenvolvermos um site minimamente viável será necessário utilizarmos esta integração.

Como funciona o CSS (Cascading Style Sheet)?

A exibição do conteúdo das páginas web apresentados pelos browsers combina conteúdo e estilos. O processo segue o fluxo de estágios resumidos abaixo:

  1. O navegador carrega todos os elementos vinculados ao site.
  2. Converte o HTML em um DOM (Document Object Model). O DOM representa o documento na memória do computador.
  3. O navegador analisa os estilos (CSS) e classifica as diferentes regras por seus tipos de seletores, por exemplo, classe, ID e etc. Com base nos seletores, o navegador define quais regras devem ser aplicadas a quais nós no DOM e anexa os respectivos estilos (essa etapa intermediária é chamada de árvore de renderização).
  4. A árvore de renderização é apresentada na estrutura em que deve aparecer após as regras serem aplicadas a ela.
  5. A interface visual da página é rederizada na tela (este estágio é chamado de pintura).
  6. O diagrama a seguir apresenta o esquema simplificado do processo.

DOM

Um DOM tem uma estrutura semelhante a uma árvore. Cada elemento, atributo e parte do texto na linguagem de marcação se torna um nó DOM na estrutura da árvore. Os nós são definidos em relacionamentos hierárquicos. Alguns elementos são pais de nós filhos, e os nós filhos têm irmãos.

Compreender o DOM ajuda a projetar e dupurar o CSS, é no DOM que o CSS e o conteúdo do documento se encontram. Ao começar a trabalhar com o DevTools do navegador, você estará navegando no DOM enquanto seleciona itens para ver quais regras se aplicam.

Métodos de chamada do CSS

O CSS pode ser incorporado no código de 3 formas distintas:

  1. Método inline - CSS adicionado ao próprio elemento HTML, utiliza o atributo style.
  2. Método interno - Os estilos CSS são definifos no elemente <head>, por meio do <style>
  3. Método externo - Os estilos CSS carregados de um arquivo externo .css. A declaração é realizada no elemento <link>

Método Inline

<!DOCTYPE html>
<html>
	<body>

		<h1 style="color:blue;text-align:center;">This is a heading</h1>
		<p style="color:red;">This is a paragraph.</p>

	</body>
</html>

Método Interno

<!DOCTYPE html>
<html>
	<head>
		<style>
		body {
		  background-color: linen;
		}

		h1 {
		  color: maroon;
		  margin-left: 40px;
		}
		</style>
	</head>
	<body>

		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>

	</body>
</html>

Método externo - Arquivo HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="mystyle.css">
	</head>
	<body>

		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>

	</body>
</html>

Método externo - Arquivo CSS

body {
  background-color: lightblue;
}

h1 {
  color: navy; 
  margin-left: 20px;
}

Elemento DIV

A implementação do elemento <DIV> é um recurso essencial para o desenvolvimento de páginas WEB. Trata-se do elemento de divisão. Quando associado ao CSS, atua como elemento chave para estruturar o conteúdo na linguagem de marcação.

A linguagem HTML está em constante evolução. A cada nova geração, novos padrões de programação e elementos são incorporados. Na primeira versão do HTML o principal elemento estruturante do conteúdo eram as tabelas, com o passar do tempo o elemento <DIV> passou a ocupar o protagonismo nesta tarefa. Recentemente, com o lançamento do HTML5 novos elementos estruturais de conteúdo foram incorporados ao HTML, entretanto o elemento <DIV> continua largamente utilizado e serve como referências aos novos elementos de estrutura

<div style="background-color:lightblue">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

Conceitos básicos de referências

/*Referencia ao elementro */

a{ 
    text-decoration: none;
    color: darkblue;
}

p{
    font-family: Helvetica;
}

/*Referencia ao ID do elementro */

#container{
    background-color: #FFF;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/*Referencia a classe do elementro (class) */

.selected{
    font-weight: bold;
}


/*Referencia hierárquica */

#nav ul{
    list-style-type: none;
    padding: 0;

}

/*Referencia de vários elementos (ou ids ou classes) */
h1, h2, h3{
    margin:0
}

IDE Padrão para o desenvolvimento

Download VSCODE

Tutoriais para esta aula

Exemplo utilizando a técnica FLOW Curso sobre a técnica FLEXBOX

Guia de estudos para este tema

Conteúdo que deverá ser apresentado (Seguir guia de estudos)

Conteúdo extra

Curso sobre a Técnica GRID

Conteúdo que será desenvolvido na próxima aula