EN
HTML / CSS - change whole web page background color
0
points
In this article, we would like to show you how to set whole web page background color in HTML / CSS.
1. Using CSS
In this example, we use CSS to create a style inside <style> element. We use body query selector and to change whole web page background color to yellow.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<div>Some div element inside body</div>
</body>
</html>
2. Using HTML style attribute
In this example, we use HTML style attribute to assign yellow background color to the body element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body style="background-color: yellow">
<div>Some div element inside body</div>
</body>
</html>
3. Using JavaScript
In this section, we use JavaScript to get the document.body property and change its background color via style property.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<body>
<div>Some div element inside body</div>
<script>
document.body.style.backgroundColor = 'yellow';
</script>
</body>
</html>