Physical Address

Godawari 2 Attariya Kailali

Add Back ground color using CSS3

Add Back ground color using CSS3

Add Back ground color using CSS3

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 \

Table of Contents

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> &copy;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> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

Follow us on Social Media For More

Facebook, Instagram, Pinterest

Related Posts