We can use the background-color property to change the color that appers bbehind the contetn on a page (Add Back ground color using CSS3). For example, you can change the backgrouynd behinds text to afluorscent color to make it appear as if the text has been hightlighted with a maker. you can specify the coloir by name hexadecimal color value, or RGB value to add a background color to just a few words of aparagraph, You can apply the property using the <span> tag and a CSS class. To add a background color to an entire page, you can apply the property to the <body> tag.
Use caution when assigning a background color to an element taking into account the color of the content in the foreground \
Add Back ground color using CSS3
Add to text
Step 1: In the styl;e sheet for the page create a Css calss for the <span> tag.
Step 2: Click insid the tag declaratina and type background-color:a dn then a space
Step 3: Type the color name or color code you want to assign
Step 4: Type <span> before the text to which you want to add a background color
Step 5: Type </span> after the text
Step 6: Click inside the <span> tag, Type class-“?” replacing? with the name of the class you defined in step 1:
Result Output
<!DOCTYPE html>
<html>
<Head>
<Title>Coding thai</Title>
<style>
h1{
text-align: center;
text-transform: uppercase;
}
span.highlight{background-color: #ffcc88;}
</style>
</Head>
<body>
<h1>Types of Web Developer</h1>
<hr>
<ol>
<li>Frontend Developer</li>
<li>Back-end Developer</li>
</ol>
<Section class="First">
<p> <span class="highlight">A front end developer</span> has one general
responsibility: to ensure that website visitors can easily interact
with the page. and Back-end developers are the experts who build and
maintain the mechanisms that process data and perform actions on websites.</p>
</Section>
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>Add to a page
Step 1: In the style for the page create a cass rules for the <body. tag.
Step 2: Click insid the tag declartion and type background-color: andthen a space.
Step 3: Type the color name or color code you want to assing.
Result Output
<!DOCTYPE html>
<html>
<Head>
<Title>Coding thai</Title>
<style>
h1{
text-align: center;
text-transform: uppercase;
}
span.highlight{background-color: #ffcc99;}
body{
background-color: #ffffcc;
}
</style>
</Head>
<body>
<h1>Types of Web Developer</h1>
<hr>
<ol>
<li>Frontend Developer</li>
<li>Back-end Developer</li>
</ol>
<Section class="First">
<p> <span class="highlight">A front end developer</span> has one general responsibility: to ensure that website visitors can easily interact with the page.
and Back-end developers are the experts who build and maintain the mechanisms that process data and perform actions on websites.</p>
</Section>
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>Follow us on Social Media For More
Facebook, Instagram, Pinterest