How to use two CSS attributes at the same time?

Asked

Viewed 4,502 times

10

The code:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

See that <h1>? He owns a property style="", this I managed to implement successfully, but I do not know how to add the source Verdana in the same <h1> without changing the color.

html css

  • So much of answer I find it impossible for you to go without learning now. Hug :-)

  • 1

    Just needed to mark some question as solved

6 answers

17

You can use ; and font-family, as already mentioned by other users, an example:

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

However for a better organization recommend using CSS files, style sheets.

For example, create a file called estilo.css and add this to it:

.titulo1 {
   color: #CC0099;
   font-family: Verdana;
}

p {
    color: red;
}

In html call it that (css must be in the same folder as your html and <link> should stay inside <head>):

Example in 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>

You can also divide by "Divs", for example:

css style.:

.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>

The selector .box1 h1 will apply style to all elements h1 within elements having the class box1.

I recommend you read:

4

Must have been wrong in the syntax, as you did not show how, I can not point out the exact error. See working:

<!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>

I put in the Github for future reference.

I don’t know if you used the right property, if you forgot the ; or tried aplcia two style separated.

There are several ways to do this. This is a valid syntax by embedding CSS into HTML. For testing is practical but it is recommended to separate styles whenever possible.

  • 2

    I wonder what’s wrong with my answer to deserve a negative?

3

I believe you wish to do this:

<!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>

However, I recommend studying a little CSS. In general, the application of styles on pages is always done using this style language and not directly using the attribute style, as you did. Here’s an example of how you could use CSS without 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

You can put a ; and put the next attribute, however, it is not recommended to put the styles inside the tag itself. As already mentioned, put inside the tags <style>/*Estilos CSS*/</style>

-1

just add ; font-family: Verdana after color code!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.