How to use two CSS attributes at the same time?

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>

Do you see this <h1> ? It has a style="" property, this I was able to implement successfully, but I do not know how to add the font Verdana in the same <h1> without changing the color.

    
asked by anonymous 05.08.2015 / 21:34

5 answers

16

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 I recommend using CSS style sheets.

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

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

p {
    color: red;
}

In the html call it like this (the css should be in the same folder as your html and the <link> should be within <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:

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

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

I recommend you read:

05.08.2015 / 21:47
4

Should be wrong syntax, as you did not show how you did, I can not point the exact error. See it 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 do not know if you used the right property, you forgot ; or tried to apply two style separated.

There are several ways you can do this. This is a valid syntax embedding CSS in HTML. To test is practical but it is recommended to separate the styles whenever possible.

    
05.08.2015 / 21:38
3

I think you want 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, applying styles to pages is always done using this style language and not directly using the style attribute, as you did. Here's an example of how you could use CSS without style : link

    
05.08.2015 / 21:41
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;
}
    
05.08.2015 / 21:43
0

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

    
05.08.2015 / 22:43