O Cascading Style Sheets (CSS) é uma “folha de estilo” que define como os elementos contidos no código de uma página da internet serão exibidos. Sua maior vantagem é separar o formato do conteúdo de um documento, o que torna o HTML mais legível e mantém o documento independente do formato.

Uma folha de estilo contém definições de estilo para um ou mais documentos. Como o HTML é considerado um documento, o CSS pode ser utilizado para formatar a página HTML.

Objetivos da aula

●  Descrever as principais propriedades CSS referentes a texto

●  Discutir a formatação de listas para menu em CSS

●  Explicar o conceito de classe em CSS

Propriedades para texto

Com o CSS podemos definir propriedades do texto como: tamanho da fonte, cor da fonte, peso da fonte, tipo da fonte, espaçamento entre linhas e espaçamento entre letras.

p {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 14px;
	text-shadow: 3px 3px 3px #ababab;
	color: white;
	text-decoration-line:  underline;
	font-weight: bold;
	line-height: 90%;
	background-color: green;
}

No exemplo acima, o seletor p vai atribuir aos parágrafos da página: alinhamento do texto ao centro, fonte Arial, tipo de fonte itálica, tamanho da fonte de 14 pixels, sombreamento ao texto, cor cinza, decoração sublinhada, negrito para peso da fonte e altura da linha de 80% do tamanho da fonte e cor de fundo verde.

A propriedade font-family permite que se faça uma lista de prioridades de famílias de fontes e/ou nomes genéricos de famílias a serem utilizadas. O navegador irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o download utilizando a informação contida na regra @font-face.

A propriedade margin do CSS define a área de margem nos quatro lados do elemento.

Formatando listas para menu

Um menu pode ser criado aplicando CSS aos elementos de uma lista não ordenada como a que se segue.

<ul>
	<li><a>Item 1</a></li>
	<li><a>Item 2</a></li>
	<li><li>Item 3</a></li>
</ul>

Para transformar a lista acima em menu, removemos os marcadores utilizando a propriedade list-style: none; no seletor ul, fazemos os itens li ”flutuarem” para a esquerda com utilizando a propriedade float: left; por fim, adicionamos um espaçamento entre os itens com padding: 10px; e removemos o sobrescrito do link com text-decoration: none;

ul {
	list-style: none;
}
ul li {
	float: left;
}
ul li a {
	padding: 10px;
	text-decoration: none;
}

Estilizando tabelas com pseudo-classes

Com o uso do CSS, é possível aplicar estilos a elementos por meio das pseudo-classes. Pseudo-classes são palavras-chave adicionadas aos seletores que definem um estado especial do elemento selecionado. A lista completa de pseudo-classes pode ser encontrada na documentação para desenvolvedores da Mozilla. No exemplo a seguir, uma tabela é utilizada, atribuindo a cor de fundo #e9e9e9 para as linhas pares e a cor de fundo #bdbdbd para as linhas ímpares.

Saiba mais: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes