Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Classes CSS

Classes CSSClasses CSS – Identificando e agrupando elementos (classes e id)

Classes CSS e ID são formatos de comandos de CSS para estilizar conteúdo de páginas de uma forma muito prática e fácil. A partir deste momento você perceberá que está mais gostoso estudar CSS, pois tudo ficará mais no sue estilo. Em alguns casos você pode querer aplicar estilos a um elemento ou grupo de elementos de uma página em particular. Nesta postagem veremos como usar class e id para estilizar elementos.

Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas são algumas das questões que vamos ver agora como o uso de Classes CSS.

Agrupando elementos com uso de Classes CSS

Vamos supor que tenhamos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto. O código HTML seria conforme mostrado abaixo:

<p>Uvas para vinho branco:</p>
<ul>
<li><a href=”ri.htm”>Riesling</a></li>
<li><a href=”ch.htm”>Chardonnay</a></li>
<li><a href=”pb.htm”>Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm”>Merlot</a></li>
<li><a href=”pn.htm”>Pinot Noir</a></li>
</ul>

Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.

Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link, usando o atributo class (Classes CSS) .

Vamos especificar estas classes css no exemplo a seguir:

Digite o código abaixo em editor de código puro que pode ser o Nortepad+ +, e salve em um arquivo com o nome de index.html dentro da mesma pasta em que você salva o arquivo estilo.css para o código logo mais abaixo.

<html>
<head>
<title>Meu primeiro estudo sobre CSS</title> /* Título da página*/
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/> /* Link para chamar o arquivo estilo.css*/
<style type=”text/css”>
</head>
<body>
<p>Uvas para vinho branco:</p>
<ul>
<li><a href=”ri.htm” class=”whitewine”>Riesling</a></li>
<li><a href=”ch.htm” class=”whitewine”>Chardonnay</a></li>
<li><a href=”pb.htm” class=”whitewine”>Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href=”cs.htm” class=”redwine”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm” class=”redwine”>Merlot</a></li>
<li><a href=”pn.htm” class=”redwine”>Pinot Noir</a></li>
</ul>
</body>
</html>

Agora podemos definir as propriedades específicas para os links pertencentes as classes whitewine e redwine, respectivamente. Digite o código abaixo em um editor de código que pode ser o Notepad+ + e salve o arquivo conforme especificado acima, dentro da mesma pasta do index.html e como estilo.css

a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}

 

No exemplo mostrado acima, pode-se também definir as propriedades para estilização dos elementos pertencentes a uma determinada classe usando o comando  .nomedaclasse na folha de estilos do documento ou seja estilo.css.

Clique no botão abaixo para visualizar o resultado em um site de verdade. Após você abrir o arquivo index em seu navegador, deve aparecer um resultado igual ao que você verá com a visualização:

Classes CSS

Veja agora o próximo estudo que é a sequência deste aqui.

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.