Exercícios

CSS - Cascade StyleSheet

linguagem de estilo que dá ao conteúdo estilo e aparência
as regras de CSS dizem ao browser como interpretar elementos especificos numa página HTML

SELECTOR (SELETOR)

o seletor ( [p] no exemplo ) indica qual o elemento numa página de HTML que será afetado pela(s) regra(s)

p{
	color: #00000F;
	margin-top: 10px;
}

DECLARATION (DECLARAÇÃO)

a declaração ( [font-size: 16px] no exemplo) indica ao browser como interpretar o elemento selecionado


h1 {
	font-size: 16px;
}

DECLARATION BLOCK (BLOCO DE DECLARAÇÕES)

a declaração ( [color: #CCFA14; margin-top: 10px;] no exemplo) indica ao browser como interpretar o elemento selecionado


h1 {
	color: #CCFA14;
	margin-top: 10px;
}

PROPERTY (PROPRIEDADE)

a propriedade ( [background-color] no exemplo) refere-se ao aspeto do elemento a formatar


h2 {
	background-color: #FA001A;
}

VALUE (VALOR)

o valor ( [#FA001A] no exemplo) refere-se ao estilo exato a atribuir à propriedade


h2 {
	color: #FA001A;
}

ID, & CLASS SELECTORS

o seletor é um ID
(o elemento é referenciado pelo seu ID, os ID’s só são utilizados uma vez por página)


#logo {
	background-color: rgb(234, 453,12);
}

o seletor é uma CLASSE
(o elemento é referenciado pela sua CLASSE, as classes podem aparecer várias vezes por página)


.column {
	width: 160px;
}

Colocação na página

inline
o CSS é associado ao elemento específico
Exemplo:


<hr style="color:blue;">
<p style="margin:20px">This is a paragraph.</p>

internal
o CSS encontra-se no início da página
Exemplo:


<head>
	<style type="text/css">
		hr { color: blue; }
		p { margin: 20px; }
	</style>
</head>

external
o CSS está num ficheiro à parte
Exemplo:


<head>
	<link rel="stylesheet" href="file.css">
</head>