Color formats

There are a couple of different ways to denote color when using CSS.

Please note that these color values can be used with any property that takes a color value. For instance the "color" property that changes font colors and the "background-color" that changes element background colors both take their values in the same way.

For the sake of the examples on this page we will simply be using the "color" property.

Named

Assigning a color via name is as simple as typing the color in plain english. For instance if I want a font to appear as red then...


color: red;

...will suffice.

The main benefit of this format is that it is easy to use and makes it easy for anyone looking at the code to know what color is defined via plain english.

There are two reasons you might *not* want to use this format however.

  • Not all colors titles are used, even if they seem obvious. "lightgreen" and "lightblue" are perfectly acceptable values for instance. But "lightred" is not used by all browsers. You instead would have to use "pink".
  • While not as much of a problem as it used to some browsers may not render colors as other browsers do. "periwinkle" may be slightly more blue in one browser than another for instance since the exact color value is left up to the browser.

Hex Value

You don't need to know this. Seriously.

RGB

RGB stands for "Red, Green, Blue" and is a sraightforward way of getting an exact color. The value will appear as follows...


color: RGB(128,255,000)

The above value denotes a color that has full green, no blue, but half the possible red.

It should be obvious that the numbers, which can range from 0 to 255, are just representing the strength of their respective color channels. If you like, a more expansive explanation of how colors are represented as numbers can be found in the graphic design section through the following link...

Click here to open a new tab to the Digital Color section

RGBA

The RGBA format is simply RGB with an "Alpha" value added to it. In computer graphics the word "alpha" is synonymous with "transparency". It traditionally is written as a decimal point value between 0 and 1, with 0 being completely transparent, and 1 being completely opaque. So a color having an "alpha" of "0.5" would make it 50% transparent so that you could see whatever element lies behind the fill color.

It is formatted similarly to RGB, but with the addition of a fourth number within the parenthesis that denotes the alpha amount. The line below would result in a slightly red color that is 75% opaque.


color: RGBA(255,128,128,0.75);

Let's use two simple square elements to show the effect of this.

With the above squares the top red square has an alpha value of "1.0" while the lower square has an alpha of "0.5". As you can see the blue square that exists behind both of them is slightly visible behind the second square because of this.

Note: in CSS "1.0" is equal to just "1". Either can be used.

Background & Text

The first thing to remember in CSS is that the property "color" describes the TEXT within an element, not the background color of the element itself.

To change the actual background color you must use the property "background-color". You can see the code and the effects of it in the boxes below.



#example {
    color:red;
    background-color:lightblue;
}

This element has the "color" property set to 'red' and the "background-color" property set to 'lightblue'.

...and this element has the background color value set to "transparent".

Just remember that it's typically preferable to define color with RGB or RGBA values to ensure consistency!

Note also that unlike a regular "img" tag using "background-image" is not enough to show an image without defining the height and width manually somewhere. But you actually don't have to write inline or linked css to define the dimensions. The following code will produce an image shown as "background-image" but sized by the "img" tag.


<div style="background-image: url(http://your_image.jpg);"> 
    <img src="http://your_image.jpg" style="visibility:hidden"/>
</div>

Why would you want this? "img" tags can not inherantly have other divs inside of them. This makes it hard to create overlays that might give an image caption or other symbol *over* the image and based on the images dimensions.

Outline vs Border

Outlines and borders are a great way of not only sectioning off information but making it clearer to the eye wher those sections are.

As mentioned before the "outline" and "border" properties both trace around the edges of an element with "border" adding width and/or height to the element and "outline" just being drawn on top of the element.

Below we have three cuboids. Both have "width" and "height" properties of 200px and 100px. The one on the left however has a "border" property set while the one on the right uses "outline", both have a set width of 20px.

(Note that we've set the border and outline to be semi-transparent)
Border
None
Outline

Note that all three boxes share a "line" across the top (shown in red).

The box on the left has the outside edge of the border starting on this line because the border is pushing the original green content area down.

The box in the middle has the top side resting on this line.

The box on the right also has the content area of the box resting on this line and is drawing the border around the content area.

"Outline" and "border" might also be the first time you see a property that (can) take multiple values. By this we mean you can define several aspects of the element at once instead of on different lines.

For instance the code below...


outline:1px solid black;

Will actually have the same exact effect as the following code....


outline-width:1px; 
outline-style:solid;
outline-color:black;

Either approach is a perfectly valid way of defining these styles.

Images

While it's certainly possible to use a simple "img" tag to include an image file on a page it may not give you the level of control you want or need. Let's look at how the "background" property of CSS can be extended to further manipulate images.

background-image

This is the basic property that links to an image. The div to the right has a single property that reads;


background-image:url(images/rushmore.jpg);

No "<img>" tags are used at all. In this case "images/" denotes a folder below the position of THIS html file and "rushmore.jpg" is the file we are pointing at.

It should also be noted the element we've assigned the background image to has width and height properties set to be the same size of the image we've chosen. The element will not resize to match the chosen background image on its own.

background-size

The size property allows you to change the width and height of the image without changing the element containing it. We'll now shrink our image with the following line. As you can see an image defined using "background-image" will naturally tile (repeat) if the defined size is smaller than the containing element.


background-image:url(images/rushmore.jpg);
background-size: 50%;

There are a few values we can use with "background-size".

  • Exact pixels. We can use one value such as "20px" and both the width and height will be set to 20 pixels. We can also define two values. "background-size:40px 20px;" will make the image twice as wide as high.
  • Percentages. We can also use percentage values in the same exact way we use exact pixels.
  • "Cover". Setting the value to "cover" will expand the image as large as is needed to cover the entire element. Any parts of the image that go beyond the element borders will be hidden.
  • "Contain". This value will scale the image to fill as much of the element as possible without actually going outside the element bounds.

Keep in mind that when using percentages the value is a percentage of the container size and not the size of the image file.

This example is just to show that you can scale an image in two directions at once.


background-size: 50% 25%;

This is not advisable to do with images like this, but for abstract patterns it can be more helpful.

In this image we continue to use the size setting from the above example.

background-position

Let's add another property, the position property. This is different than how we position elements themselves though, it refers to where the image STARTS within the div, not the div itself. This element uses the following property.


background-image:url(images/rushmore.jpg);
background-size: 50%;
background-position: center;

Other values include "left", "right", top", and "bottom".

You can also use numerical values such as exact pixel values or percentages to place the upper left corner of an image at a particular location.

By default, without this property, the position will be the upper left. Since we used "center" it placed the image evenly within the frame.

background-repeat

The repeat property allows you to define if, and how the background repeats in any visible empty space within the element. For instance;


background-image:url(images/rushmore.jpg);
background-size: 50%;
background-position: center;
background-repeat: repeat-y;

This value makes it so the image only repeats in the "y" direction (up and down). "repeat-x" would of course repeat it to the left and right. Not using the repeat property defaults it to repeating in both directions (as seen above).

It is also possible to have no repeating whatsoever by setting the value to "no-repeat". In this case the background will be the default color (if "background-color" has not also been added).

(As shown at the top of this page, if we wanted to, we would only need to set the background-color property to "transparent" to remove any remaining color.)

In studying "background" properties you'll probably also come across two more possible options; "background-clip" and "background-origin". These two properties have very specifric uses. They will define the way background images interact with the border and padding of an element.

"background-clip" defines if the image is clipped at the border, padding, or the content

"background-origin" defines if the image starts at the border, padding or the content.

You may think that only images used multiple times should be applied by css, and that unique images that appear only once within a document can be defined by the HTML, and they can be. But chances are there are going to be properties of the way one image is displayed that will apply to all of them anyway.

For instance, an "employees" page of a business site may have head shots of those employees. Each once is a unique link, true, but they will probably be all formated the same within the page and therefore make use of one or two source classes.

Now that we know how images are implemented, let's look at actual design approaches.

Image Slicing

It’s interesting how sometimes the “accepted” approach to web design can not only shift, but completely reverse. It used to be that slicing up an image (creating one large image of a page and “slicing” it to create separate elements) was a was of increasing the (often only perceived) speed of a web page by loading several points at once (before the advent of high speed internet). It also allowed pages to be designed using the visual effects of a program like photoshop in a time before many effects could be done in-browser.

These days the only benefit of slicing up a web page would be if you have one continuous, complex image that you wanted to flow across elements, that wasn’t a traditional square shape. In this case making an “L” shaped photograph (perhaps for instance, a header and a sidebar that share a background) can save memory by excluding the space not used).

Otherwise, fewer images, with more visual effects shifted to being added in-browser is the new norm. Here are some reasons for this shift:

  • Resolution dependent. Most CSS styles will scale with a user's chosen resolution. Images which have exact sizes will only get blurrier if scaled up.
  • Extra server requests. For every image you download the client has to ask for the image and the server has to find and send it. Furthermore each image will have its own header and metadata which may just be repeated information. By using one large file you can easily cut down on communication traffic and duplicate data. It's a very small consideration, maybe even just a few bytes, but it is there.

Image Blitting

A sprite sheet similar to what might have been used in the original Super Mario Bros.
A Sprite Sheet is a single image file on which many images have been placed. These images can be completely unrelated or they can be frames of an animation sequence.

"Blitting" refers to a technique that can have several names but which all indicate the same thing. The technique involves using a single large image with multiple smaller images packed onto it. During the drawing process the browser only copies a small section of this source image to the final composition.

Blitting is the actual act of displaying only one image on a sprite sheet at once.

Benefits of this technique:

  • All images contain a header of metadata declaring things like type, size, camera or author info, etc, and combining those images keeps the amount of metadata to a minimum.
  • A client (user) makes one request to a server instead of many. The more requests made to a server the more you have to wait for answers (each increasing the chance of packet loss).
  • There will be fewer files to clutter up your project folder for ease of use.

Let's look at an example implementing this idea specifically in web pages.

Here we see a sprite sheet for a basic menu interface that will make use of a "hover" pseudo selector to change the appearance of each menu item during a mouse over event. We put both the original and changed appearance of each button on the sheet. This means three buttons will require six button images arranged upon our single image file.

By placing the normal and highlighted versions of the buttons near one another on the image we can help ensure two things;

  • By making use of the grid within our image editor we can be sure that we have the same exact size for each button and also the same exact position of elements such as the text.
  • We can apply the same user made style (in this case the glow effect created by he image editor) across all of the elements easily.

Now here is the CSS for the three buttons. Notice how the width and height of the shared class matches the width and height of a single button on the sprite sheet. And then notice how the "hover" selectors only modify the "background-position" property to change what part of the image is being currently shown.


.u_buttons {
	position:relative;
	width:200px;
	height:100px;
	margin:10px;
	margin-left:auto;
	margin-right:auto;
	outline:1px solid black;
	background-image:
    	url(button_sheet.jpg);
}
.u_buttons_01 {
	background-position:0px 0px;
}
.u_buttons_01:hover {
	background-position:0px -100px;
}
.u_buttons_02 {
	background-position:0px -200px;
}
.u_buttons_02:hover {
	background-position:0px -300px;
}
.u_buttons_03 {
	background-position:0px -400px;
}
.u_buttons_03:hover {
	background-position:0px -500px;
}

The HTML required to set this up will be simple enough.


<div class="u_buttons u_buttons_01"></div>
<div class="u_buttons u_buttons_02"></div>
<div class="u_buttons u_buttons_03"></div>

By utilizing this technique we can create a slightly interactive menu system that responds to mouse movement.

Move your mouse over the following images to see the result.

Several sites you probably already visit use this technique regularly. For instance nearly all of google's interface images are stored on one or two sprite sheets. Here is an exact image directly from their search results page.

Imagine the amount of CSS it takes to pick apart this sprite sheet, with all the different images on it, but obviously they believe it's worth it!