HTML pages have a default while color background if you wish to use a specific color to your webpage here are different ways you can do it,
- Using bgcolor attribute in body tag:
- Using inline style CSS
- Using embedded CSS
- Using CSS class
- Using external CSS
⛏️ You will set the background color to the <body> tag.
1. Using bgcolor attribute in body tag:
This is a special attribute that you use in body tag that would change the color of your webpage as defined, there are multiple ways you can use it,
- Using color names: aqua, black, gray, fuchsia, white, maroon, olive, navy, teal, red, green, blue, purple, yellow, lime, silver e.t.c.
- Using hex # color codes: #f2f2f2, #eeeeee, #784264, #aa7722, #189d1920
- Using rgb color codes: rgb(128, 128, 128), rgb(0, 0, 0)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML : bogy bgcolor Example</title>
</head>
<body bgcolor="green">
<p>Setting background-color to HTML webpage using bgcolor</p>
</body>
</html>
2. Using inline style CSS:
You can make use of inline style element to set background color using background-color property,
Example:<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML : background-color inline css Example</title>
</head>
<body style="background-color:#777777">
<p>Setting background-color to HTML webpage using background-color property</p>
</body>
</html>
3. Using embedded CSS:
This is one of the most preferred ways of setting a background for your webpage, just take the embedded style into a style element in your head section.
Example:<!DOCTYPE html>
<html lang="en">
<style>
body {
background-color:#cccccc;
}
</style>
<head>
<title>HTML : background-color embeded CSSExample</title>
</head>
<body>
<p>Setting background-color to HTML webpage using background-color property embeded CSS</p>
</body>
</html>
4. Using CSS class:
Example:<!DOCTYPE html>
<html lang="en">
<style>
.page-background {
background-color:#550055;
}
</style>
<head>
<title>HTML : background-color using CSS Class Example</title>
</head>
<body class="page-background">
<p>Setting background-color to HTML webpage using background-color property as a CSS class</p>
</body>
</html>
5. Using External CSS:
If you are using an external .css file then you just take the code in the style section to that file!
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="style.css" />
<head>
<title>HTML : background-color using external CSS file Example</title>
</head>
<body>
<p>Setting background-color to HTML webpage using background-color using external CSS file.</p>
</body>
</html>
External style.css file:
body {
background-color:#eeefff;
}
⚡️ Supported by all browsers: Safari, Google Chrome, Internet Explorer, Opera, Firefox.
- HTML5 HELLO WORLD Example
- All directional arrows codes for HTML
- Adding Sub Headings to Bootstrap Header tags
- Create HTML button that looks like a href hyperlink
- 70+ HTTP Error Codes CheatSheet
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- How to set background color in HTML page?
- Obsolete marquee element alternatives html5
- Base 64 Index, Character and Binary Table
- Get HTML table td, tr or th inner content value with id or name attribute
- Align html element at the center of page vertically and horizontally
- How to add multiple spaces between html page text
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- How to pretty print HTML using Java Code
- W3 HTML validator warning Unable to Determine Parse Mode
- Hyperlink in html (anchor tag) without a underline
- reCaptcha Verification expired. Check the checkbox again
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Chessboard with pieces using pure HTML and CSS
- Default speed of Marquee tag : SCROLLAMOUNT
- Fibonacci series from 1 to 500 table
- 9 Border to DIV Element in HTML Examples
- How to remove old 404 pages ulrs from Google crawler
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
- How to remove username from Mac Menu Bar? - MacOS
- Setting JAVA_HOME in macOS Big Sur - MacOS
- TextEdit Get the count of lines in a file - MacOS
- Fix: Microsoft Teams Error Code 2:- 1200 - Teams
- Make Android View Scrollable both Horizontally and Vertically - Android
- Fix Microsoft Teams Error code - 107 - Teams
- How to run Java Unit Test cases with Apache Maven? - Java
- Spring 5 IoC Example with application Context XML (ClassPathXmlApplicationContext) and Gradle. - Java