10

O código:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:#CC0099">Um dia eu aprendo</h1>
<p style="color:red">This is a paragraph.</p>

</body>
</html>

Vêem esse <h1>? Ele tem uma propriedade style="", isso eu consegui implementar com sucesso, mas não sei como faço pra adicionar a fonte Verdana no mesmo <h1> sem alterar a cor.

2
  • Tanto de resposta eu acho impossível você ficar sem aprender agora. Abraço :-) Commented 5/08/2015 às 19:54
  • 1
    Só faltou marcar alguma pergunta como resolvido Commented 2/05/2016 às 18:52

6 Respostas 6

18

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:

4

Deve ter errado na sintaxe, como você não mostrou como fez, não posso apontar o erro exato. Veja funcionando:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:#CC0099; font-family:Verdana">Um dia eu aprendo</h1>
<p style="color:red">This is a paragraph.</p>

</body>
</html>

Coloquei no GitHub para referência futura.

Não sei se usou a propriedade certa, se esqueceu o ; ou tentou aplcia dois style separados.

Tem diversas formas de fazer isto. Esta é uma sintaxe válida embutindo o CSS no HTML. Para testar é prático mas se recomenda separar os estilos sempre que possível.

1
  • 2
    O que será que tem de errado na minha resposta pra merecer um negativo?
    – Maniero
    Commented 5/08/2015 às 20:31
3

Creio que deseja fazer isto:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:#CC0099; font-family:verdana;">Um dia eu aprendo</h1>
<p style="color:red">This is a paragraph.</p>

</body>
</html>

Contudo, recomendo estudar um pouco de CSS. Em geral, a aplicação de estilos nas páginas é sempre feita usando esta linguagem de estilo e não usando diretamente o atributo style, como fez. Veja um exemplo de como poderia ficar utilizando CSS sem style: https://jsfiddle.net/7o40548b/1/

3

HTML

<!DOCTYPE html>

<html>
<body>

<h1>Um dia eu aprendo</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS

h1{
  color:#CC0099; 
  font-family: Verdana;
}

p{
 color: red;
}
0
0

Você pode colocar um ; e colocar o atributo seguinte, porém, não é recomendado colocar os estilos dentro da própria tag. Como já citaram, coloque dentro das tags <style>/*Estilos CSS*/</style>

-1

basta adicionar ; font-family: Verdana apos o código da cor!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .