Web programming 4 Colors Subscribe Pub

Previous: Web programming 3 Html content tags.

We saw how to color all the text in a page with the style:

Hacker Factory

The first thing is that you can color any piece of text right in the html content, like so:

Haha <span style="color:red">red words</span>

Notice the style is specified directly in the span tag surrounding the text we want a different color for.

The other thing to know is advanced colors. You are not limited to just red/blue or yellow, but have access to a really large number of shades as well.

What you need is a "html color picker". Go on, google that and pick the first one. Pick any color you like and then any shade of that color. Each has a 6 digit code like #0066FF. These are hexadecimal digits, each pair stands for how much red/green/blue is in the respective shade and the browser will mix it for you (the # just says the rest are hexadecimal digits, so we all know what we have).

You can use these codes in the color style property instead of the keywords we used so far, for instance:

Haha <span style="color:#0066FF">red words</span>

Note the red words are not that red anymore... quite literally, there is 0 red in them...

You can also use these codes in the style section or even for backgrounds:

Haha <span style="color:#0066FF">red words</span>

You just saw what no red/green/blue means, i.e. 0 of each: did you guess it would be black? Also, maximum of each gives us.... white. Note that in hexadecimal, FF or ff means 255 or maximum for one color.

Also, since there are 256 x 265 x 256 combinations, you get a staggering 16 million colors and shades.

Read more about colors here: Web colors.


Use the style when you want to change the properties of all the elements of a type. So far we only changed the body but you can change any element, for instance here's for the list items:

<li>item 1</li>
<li>item 2</li>
<li><span style="color:#0066FF">item 3</span></li>

So, use it to create a "style" of the entire page. Then, when you want certain elements to look different, use the span to change the style for that element specifically, like we did for the 3rd item above.

Continue to Web programming 5 Code-Javascript-Graphics.

Was this useful?    

By: Razie | 2014-06-18 .. 2016-11-08 | Tags: post , html , lesson , hacker.factory

See more in: Cool Scala Subscribe

Viewed 892 times ( | Print ) this page.

You need to log in to post a comment!