This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course

219 points
Picture
Submitted by
Marisel Cruz
over 2 years ago

How to change the span from HTML in CSS?

there is a in HTML but how do I change the background color in CSS?


0 votes

permalink

<!DOCTYPE html>
<html>
<head>
    <title>Fancy Fonts</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <p>I'm a paragraph written in red font, but one of my words is <span>Bluey</span>!</p>
</body>
</html>

The color in the background of an element can be set with the background property,

p {
    color: red;
    line-height: 2em;
    background: lightgray;
    border: 1px solid black;
}
span {
    color: blue;
    background: yellow;
}

I've bumped up the line-height and added color and border to the P so we can see more clearly what setting the background color on an inline element results in. Notice that only the text has a background, not the full line-height. To correct this (should we desire to) we can give the span an inline-block display property.

Add this line to the span rule:

    display: inline-block;

See the difference? Now you know how to do both. I passed 2/26 even with the changes. Submit it so it gets saved and you can refer to it (and even experiment) in future.

8296 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
over 2 years ago

1 Comment

Picture Marisel Cruz over 2 years ago

Thank you, a very thorough answer.


0 votes

permalink

p {
color: red;
line-height: 1em;
background: yellow;
border: 2px solid black;
}
span {
color:pink;
background: blue;
}

181 points
56a8d547976df3d27600013b_611169587
Submitted by
Hima Bindu
over 2 years ago

2 Comments

Picture Marisel Cruz over 2 years ago

Thank you.

56a8d547976df3d27600013b_611169587 Hima Bindu over 2 years ago

your welcome