Adding Color to Your Webpage

We have learned many ways to spice up our websites. Perhaps none is more eye-catching than using color both for text and background. This simple step can take a boring black/white website, and transform it into an exciting website users will enjoy using. There are at least a couple of ways to code color for your website, namely CSS and HTML. In this tutorial we will learn how to code in HTML. This can be useful for occasional changes in the code, but in general I would recommend styling in CSS because it allows for greater flexibility and ease.

The first step in changing the color or background-color in HTML is to identify the element we wish to color. In this example we will use the heading h1. We must first open our h1 tags, and then include the property it’s value. Example 1) below shows us this step.


Ex. 1) <h1 style=”color: blue;”>


Our next step is to type the text we wish to color, and close the tag. We can see this in example 2)

Ex. 2) <h1 style=”color: blue;”>Adding Color to Your Webpage</h1>


The same steps can be copied in order to change the background color, we just need to change the property. In that case the code would read,

<h1 style=”background-color: blue;”>Adding Color to Your Webpage</h1>


These three examples can be seen below in both code and how it would look on your webpage.

Screen Shot 2013-09-22 at 11.13.50 PM Screen Shot 2013-09-22 at 11.14.10 PM Screen Shot 2013-09-22 at 11.14.37 PM


I hope this tutorial will help you spice up your website like it did mine. A little color goes a long way when it comes to a user-friendly experience!


-zach goldschmiedt

New Media Research Studio

~ by zg304 on September 22, 2013.

2 Responses to “Adding Color to Your Webpage”

  1. First of all, I’d specify this DIY as “CSS specific,” so you don’t have to worry about explaining that in the intro. I’d also skip the example layout and use steps, since that’s so much easier for the user to read. Other than that, I like your casual language and thoroughness in describing this process!

  2. This tutorial would be more helpful if there were more pictures of how exactly these changes would look on your site and you could also talk about numbered colors as opposed to just writing out names of color or link to a hex color picker.

Comments are closed.

%d bloggers like this: