How To Give Text A Background In Css

How to Set up Text and Background Colour with CSS

See CSS: Tips and Tricks for like articles.

The color and groundwork-color properties determine how color is set in CSS.

Before you can learn how to set text and background colors in CSS, you need to know a trivial chip nigh color values.

Color values can exist specified in several means:

Color Names: At that place are 17 basic keyword color names that are specified in CSS3. Modern browsers support many additional color names.
```
                    <div way="color: red;">colour: ruddy;</div>                  
```
Hexadecimal Colour Values: Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the colour, and bb is the amount of blue in the colour.
```
                    <div manner="colour: #ff0000;">color: #ff0000;</div>                  
```
Brusque Hexadecimal Color Values: Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you lot tin remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of scarlet, grand is the corporeality of green in the color, and b is the corporeality of blue. For example, #f60 is the same every bit #ff6600.
```
                    selector { 	colour: #f60;                  
```
Functional Notation: Functional note takes the format rgb(n,n,northward), where n is a number betwixt 0 and 255 or a pct between 0% and 100% for the red, green, and blueish intensities of the colour, respectively.
```
                    <div fashion="colour: rgb(255,0,0);">color: rgb(255,0,0);</div> 	<div mode="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>                  
```
RGBA-Format Colour Names: The boosted (the "a") parameter specifying the opacity (the "alpha" channel) of the color as a decimal between 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code
```
                    <div style="groundwork-colour: 	rgba(255,0,0,0.5)"> 	color: rgba(255,0,0,0.5) 	</div>                  
```
would manner the div with a scarlet background with 50% transparency.
HSL Specification: Supported in mod browsers (Net Explorer from version 9), HSL is used to specify hue (a degree on the color cycle, with 0=red, 120=green, and 240=blueish), saturation (a percentage, with 0% a shade of gray and 100% the full color), and lightness (a pct, with 0% as black and 100% as white). The following code displays a div with red background:
```
                    <div style="groundwork-color: hsl(0,100%, 50%)"></div>                  
```

Our recommendation is to employ three-character hexadecimal notation (i.east., #rgb) when yous tin get the color you desire and to use the half-dozen-digit hexadecimal note (i.e., #rrggbb) when y'all need to define the colour more granularly.

Now let's larn how to use these properties in the following steps:

As y'all have seen in the examples above, the color property is used to gear up the foreground color of an chemical element. Use the property as shown in this code:

                    <!DOCTYPE HTML> <html> <caput> <meta charset="UTF-8"> <title>Color</title> </caput> <body>  <h1>Color</h1>  <div style="color: red;">color: cherry;</div> <div way="color: #ff0000;">colour: #ff0000;</div> <div style="color: #f00;">color: #f00;</div> <div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div> <div style="colour: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div> <div style="color: hsl(0,100%, l%);">colour: hsl(0,100%, 50%);</div>  </body> </html>

This code renders the following: Color

Next, you employ the groundwork-color belongings to specify the groundwork color of an chemical element. It tin be practical to cake elements and inline elements. The syntax looks similar this:

                    selector { groundwork-colour: color;}

Used in HTML, it looks like this:

                    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Groundwork Color</championship> </head> <body> <h1>Groundwork Color</h1>  <div way="top: 100px; width: 500px; background-colour: #ff0000;"> 	groundwork-colour: #ff0000; </div>  <div way="tiptop: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.5);"> 	groundwork-color: rgba(255, 0, 0, 0.v); </div>  <div style="height: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.one);"> 	groundwork-color: rgba(255, 0, 0, 0.1); </div>  </body> </html>

This code renders the following: Background Color