ID - HTML e CSS

IDs, por outro lado, são ótimos quando você tem exatamente um elemento que deve receber um certo tipo de estilo.

IDs são atribuídos a elementos HTML com a palavra id e um sinal de igual:

Código: Selecionar todos


<div id="first"></div>
<div id="second"></div>
<p id="intro"></p>

IDs são identificados em CSS com um sinal de sustenido (#):

Código: Selecionar todos


#first {
    height: 50px;
}

#second {
    height: 100px;
}

#intro {
    color: #FF0000;
}

Isso permite que você aplique um estilo a uma única instância de um seletor, ao invés de aplicar a todas as instâncias.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<div id="serious">Teste</div>
</body>
</html>

CSS

Código: Selecionar todos

#serious{
color:#CC0000;
font-family:Courier;
}

Demo: http://jsfiddle.net/ugg1Loor/