Create background and border for HTML tag
In this article, I will show you how to create background for HTML tags, through which you will know how to use some CSS properties about background.
To create a background color for any HTML tag, we use the background property. This article I have presented in the CSS learning series, but for your convenience, today I will create a completely new lesson. You can check out the article I linked to above to learn more.
1. Create background color for HTML tags
Suppose I have a div tag, I want to create a background and border for it, just use the background and border properties.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: red; height: 200px; } </style> </head> <body> <div> Nội dung bên trong </div> </body> </html>Add border to it.
div{ background: red; height: 200px; border: solid 3px blue; }As you can see, the background for this div tag has a length of 100%. The reason is because the div tag is displayed as a block, so it has a width of 100%. If we replace it with a span tag now, it will be completely different.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: red; border: solid 3px blue; } </style> </head> <body> <span>Thẻ span</span> </body> </html>2. Understanding background and border colors
Regarding colors, you can use according to the following rules:
- Use English names like black, white, red, blue…
- Use RGB format like:
- rgb(255,0,0) = red
- rgb(0,255,0) = green
- rgb(0,0,255) = blue
- rgb(0,0,0) = black
- rgb(255,255,255) = white
- Use Hex format like:
- #ff0000 = red
- #00ff00 = green
- #0000ff = blue
- #000000 = black
- #ffffff = white
- And a few other formats like RGBA and HSL
We usually use the Hex format, because this is the standard color code in Photoshop.
For example : Set the background to red, you can write one of the ways below.
background: red; background: #ff0000; background: rgb(255,0,0); 
