How to change background color in HTML

Simple tutorial about changing HTML link color using CSS (and some insight into doing YouTube SEO on the side for boosting your initial set of videos)

Subscribe to my newsletter and never miss my upcoming articles

As a tutorial writer 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 a small SEO boost?

Tip: In part I'm doing this as a SEO experiment. If you're a YouTube content producer, your videos are underperforming probably because you published them too soon or because it's too early and there aren't any backlinks pointing to them. This usually also means at this point there is not enough retention data, which is another important metric.

With so much competition, your videos on popular subjects might never get any organic traffic. Even if they are targeted, high quality videos, YouTube's retention algorithm might simply not have enough data with low traffic videos.

(You need at least 100 hits or so for YouTube to even start aggregating some basic idea of how long audience remains engaged.)

This is important because retention data is directly related to how well you will rank in YouTube search. It's normal for retention to gradually fall as the video continues. But it's important that it doesn't fall below 60% too soon. By too soon I mean at least within first 30 seconds.

In my experience on average keeping 60% - 80% within first 30-40 seconds is good enough to have you rank within top results. However, this won't happen if you don't explain something users actually came to learn within first part of your video.

Even if video retention significantly drops after 30 seconds (let's say to 40% and below,) in my experience it doesn't seem to affect your earned top placement in search results on that subject as long as retention within first 30 seconds is pretty high. So again, gradual fall off is normal, at least for tutorial videos in education niche.

You definitely don't have to worry if your entire video doesn't have 80-100% retention throughout its entire length! I don't think that even some of the most popular videos manage to hit that record.

Advice for completely new YouTube channels

It's difficult at first. Don't expect quick results, but remain consistent. Working without immediate reward can be exhausting, but I assure you that if you keep going, eventually the momentum will pick up. Just don't have any immediate expectations, be realistic and give yourself several months.

So, what about entirely new videos? Depends on whether you already have an active audience. On average for completely new YouTube video channels traffic might start increasing organically in 3-4 months, which is quite a long period of time.

I've launched multiple video channels in the past. Having said that, to get a good start many YouTube channels may need 3-5 key videos that perform really well (even if they are based around simple subjects.) They can be videos that are SEO-optimized by using links that come from some articles you've also written on popular writing outlets.

Once those simple videos start to get subscribers, every new video you produce will create alerts for your new fans. And if you remain consistent, your traffic will begin snowballing, combining your past efforts and the new content you're releasing onto fans that are waiting for your videos.

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.)

Comments (1)

Enock Omondi's photo

Informative