HTML: How To Change Background Color of a <div> element using CSS.

As a technical writer for over a decade, I often get caught up in trying to think of advanced subjects to write about. JavaScript event loop, prototypal inheritance and functional programming are all interesting subjects! Today I decided to try something different. Why not write on the simplest subject imaginable?

I’ve just published html: how to change background color tutorial on my YouTube coding channel. The idea came to me after starting to record a new series of tutorials covering the basics of HTML & CSS. So why not also document it on one of my article sites for extra SEO boost? So here it goes.

How to change background color in HTML with inline CSS

The simplest way to change color in HTML is to use inline CSS. The following example demonstrates that. Just use style attribute and type CSS in quotes:

<div style = "background:black"></div>

This is called inline CSS: it’s typed directly into the HTML element. But you can also use internal CSS. This is when you include your CSS code separately in a pair of <style> tags:

<head>
<style type = "text/css">
div {
background:black;
}

</style>
<head>

Somewhere in <head> tag include <style> tags and type your CSS commands between them. In this case background:black will be applied to all DIV elements in your HTML page.

Why Did I Write This Tutorial?

What if you’re completely new to HTML? At this point you barely know what a CSS property is. Every day someone new is making decision to learn HTML from scratch. Plus I simply get bored on writing about advanced subjects.

What if, for some reason, you need to change background color in some website editor, game or an app with built-in HTML. And you need a quick solution for changing the background of an HTML element.

This might mean you’ll never have to touch CSS ever again in your life. Just looking for a quick way to help you figure out how to do it.

I know this is is an incredibly simple tutorial, but I decided to write it anyway. Changing background color of an HTML element is probably one of the most simplest things you’ll ever learn as a web developer.

Still people, especially beginners, search for it online. And perhaps we already have a flood of tutorials about “how to change background color” out there. But you can also say there are advanced tutorials on important subjects as well that are hard to find or not many get to read (flooded by other content.)

Cover Image

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store