CSS Background Color - HTML Color Codes
Có thể bạn quan tâm
CSS Tutorial
Body background color
In CSS the background is considered to be the width and height of an element, plus any padding and borders (but not margins). Using the CSS background-color property we can color the <body> background of our HTML page red.
HTML
<head> <style> body { background-color: #FF0000; } </style> </head> <body> </body>Demo on CodePen
Pretty simple, right! Of course, you could always use an ID or class to give the <body> element a background color, but this is the easiest method. Next we'll look at a couple techniques to color the background of in-page elements like a <div>.
Fixed size element background color
For HTML elements that are of a fixed size – whether in pixels, ems or percentages – adding a background color is easy. We can simply use the CSS code from the previous step to give our <div> of fixed width and height a blue background.
HTML
<head> <style> div { width: 50%; height: 200px; background-color: #00FF00; } </style> </head> <body> <div></div> </body>Demo on CodePen
If we remove either the height or width from the CSS code however, the background color will disappear. Try it for yourself in the demo.
Variable size element background color
Ok great, but what if we don't know the size of our HTML element? As long as there is an element inside the one you want to add a background too, we can use the CSS padding property to give the outer element some color.
HTML
<head> <style> div { padding: 16px; background-color: #00FF00; } </style> </head> <body> <div> <h1>Title with a background color</h1> </div> </body>Demo on CodePen
Responsive color squares
This technique uses a combination of positioning and fixed width with padding to create a perfect responsive square with a background color. You can actually create rectangles of any proportion just by varying the CSS padding-bottom property.
HTML
<head> <style> .outer { position: relative; width: 25%; padding-bottom: 25%; } .inner { position: absolute; width: 100%; height: 100%; background-color: #00FF00; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body>Demo on CodePen
If you found this helpful be sure to check out our other tutorials on CSS text color, link color and placeholder color.
Từ khóa » Html Cool Background Color
-
CSS Background-color Property - W3Schools
-
CSS Backgrounds - W3Schools
-
Background-color - CSS: Cascading Style Sheets - MDN Web Docs
-
How To Add & Change Background Color In HTML - HubSpot Blog
-
HTML Background Color - HTML Color Codes
-
CSS: Background-color Property - TechOnTheNet
-
How To Set Background Color In HTML? - Tutorialspoint
-
CSS/Properties/color/keywords - W3C Wiki
-
How To Change Background Color In HTML? - Top 5 Methods That ...
-
CSS Background Color – How To Change The Background Color In ...
-
HTML Background Color Tutorial – How To Change A Div ...
-
How To Set Background Color With HTML And CSS - W3docs
-
Setting Backgrounds & Gradients - Learn To Code HTML & CSS