Você pode usar ;
e font-family
, como já citado pelos demais usuários, um exemplo:
<h1 style="color:#CC0099; font-family: Verdana">Um dia eu aprendo</h1>
<p style="color:red">This is a paragraph.</p>
No entanto para uma melhor organização recomendo usar arquivos CSS, folhas de estilo.
Por exemplo, crie um arquivo chamado estilo.css
e adicione isto a ele:
.titulo1 {
color: #CC0099;
font-family: Verdana;
}
p {
color: red;
}
No html chame-o assim (o css deve estar na mesma pasta que o seu html e o <link>
deve ficar dentro de <head>
):
Exemplo no html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css">
</head>
<body>
<h1 class="titulo">Um dia eu aprendo</h1>
<p>This is a paragraph.</p>
</body>
</html>
Você também pode dividir por "divs", por exemplo:
estilo.css:
.box1 h1 {
color: #CC0099;
font-family: Verdana;
}
.box1 p {
color: red;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css">
</head>
<body>
<div class="box1">
<h1 class="titulo">Um dia eu aprendo</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
O seletor .box1 h1
vai aplicar o estilo a todos elementos h1
dentro de elementos que tiverem a classe box1
.
Recomendo que leia: