Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Supercharge your image borders

by Matthew Pennell

Image borders. Borders - for images. They're not very interesting, right? Sometimes we'll add a border: 1px solid #ccc; if we want our images to stand out from the surrounding text, but apart from that it's not usually an aspect of CSS that gets a great deal of attention.

I'm going to show you three ways to spruce up your image borders and add a little more visual interest to your designs - and all without any additional markup.

<img> and the CSS box model

All of these techniques rely on what we know about the CSS box model: Total width equals the width of the content, plus internal padding, plus borders - right? But where's the internal padding on a self-closing element like <img>?

The answer is that applying CSS padding to an image works in exactly the same way as any other element, by creating space between the border and the content - only in this case, the content is the src of the <img> tag. So, armed with this knowledge, what happens if we apply both borders and padding to our images?

img { border: 1px solid #666; background: #fff; padding: 10px 10px 60px; }

Voila - Polaroid-style image styling, without the need for an extra containing element! By setting the background as well as using padding, we can surround our image with space. Ideal for an image gallery or portfolio page.

Emphasize the edges of your photos

A second use for this technique is to let you add a subtle border to your photos - a good idea if your color scheme calls for a light-colored border for your images. Sometimes the sky can blend into a surrounding light color, but by setting a small amount of padding we can simulate a double border on our photo:

img { border: 15px solid #def; background: #aaa; padding: 1px; }

That's much better - the subtle 1px border prevents the photo from 'bleeding' into its border.

Lightbox slides

Finally, we've seen what happens if you set a background-color for your image - but what about using another image as the background? Well, it works just the same - specify the background-image as you would for any other element, and add enough padding for the background image to be visible:

img { background: #fff url(slide.png) no-repeat 50%; padding: 45px 20px 45px 15px; }

Here's one I prepared earlier - lightbox-style slide backgrounds (hat-tip). This technique will only work if your images are all the same size, as the width of the image plus the padding needs to add up to the width of the background-image for it to be displayed correctly. Still, it's a fun technique for displaying photo galleries or other sets of images where you already know the image dimensions.

Summary

So, there we go - three new ways to style your images, and not an extraneous <div> or <span> in sight!


CSS values for colors

by Maurício Samy Silva

In this article we will explain how to specify colors for a CSS property that accepts color values.

The following elements can display colors values defined via CSS:

  1. backgrounds
  2. borders
  3. links
  4. outlines
  5. text

According to the CSS2.1 Specification – Section 4.3.6:

A <color> is either a keyword or a numerical RGB specification.

The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. These 17 colors have the following values:

The seventeen keywords for CSS colors

In addition to [the above] color keywords, users may specify keywords that correspond to the colors used by certain objects in the user's environment. Please consult the section on system colors for more information.

~ CSS2.1 Specification

Syntax examples for colors values

For example, if you wanted to specify a red color for text in a paragraph you could do it using any of the following methods:

  • Color Names: p {color:red;}
  • Hexidecimal: p {color:#ff0000;}
  • Short-hand Hexidecimal: p {color:#f00;}
  • RGB: p {color:rgb(255, 0, 0);}
  • RGB percentages: p {color:rgb(100%, 0%, 0%);}

As you might've noticed we used two hexadecimal syntaxes in the above examples. For CSS colors values you can use a shorthand hexadecimal notation. When the hexadecimal notation consists of three matching pairs it is perfectly valid to use only one digit representing a pair (i.e. #xxyyzz is the same color as #xyz).

Be aware, however, that some colors do not have shorthand notations. For example there isn't a shorthand notation for the #808080 hex color.

System color values

The System colors are deprecated in the CSS3 Color Module. For further information see CSS2.1 Specification – Section 18.2.

References


CSS selectors: the basics

by Kev Stone

For anyone who has been using CSS for some time, CSS selectors become almost second nature. For those who are new to CSS, however, selectors are powerful tools that allow you to write cleaner, more efficient markup. This article will guide you through some of the basic concepts of CSS selectors.

Element selectors

Element selectors are the most basic selectors found in CSS. They allow you to style any HTML element found within your markup, e.g., <p>, <ul>, or <div>. For example:

p {color: blue;}

This example simply makes any text found within a <p> element the color blue.

Group selectors

Group selectors build upon the idea of element selectors but allow you to set the same styles to a number of HTML elements, as opposed to only one. For example, if you wanted to make your <h1> and <p> elements bold, then you could write the styles as follows:

p {font-weight: bold;} h1 {font-weight: bold;}

This example will get the desired result, but with group selectors you can drastically reduce the size of your stylesheet by simply placing both the selectors on the left side of the style rule, and separating them with a comma, as shown below:

p, h1 {font-weight: bold;}

Note: The comma between the two elements is very important; failure to use a comma will give this rule a completely different meaning and will instead create a descendant selector, which is discussed later.

Class and ID selectors

The previous selectors have dealt with all HTML elements that are found within your HTML document. If you wish to set a style rule for something more specific, the most frequently used options are class or ID selectors. For example, if you have a paragraph in the sidebar of the page, you might want the words in it to have a different color than words on the rest of the page. A class selector for a <p> element is written in the HTML document as:

<p class="sidebar">Lorem ipsum dolor sit… </p>

An ID selector is written as:

<p id="sidebar">Lorem ipsum dolor sit… </p>

The addition of the class/ID selectors now allows you to set various style rules to the <p> elements found within your document, yet also allows you to specify different style rules for the <p> elements which contain a class or ID attribute.

If, for example, you wanted your <p> elements to be the color red, yet wanted two or more <p> elements in the sidebar to be the color blue, then you would assign these <p> elements a class attribute (as shown above) and would write your style rules as follows:

p {color: red;} p.sidebar {color: blue;}

If you wanted to make only one <p> element the color blue then you would use an ID attribute (as shown above) and would write your style rules as:

p {color: red;} p#sidebar {color: blue;}

Note: Each ID must be used on only one element on a page. If you wish to assign the specific style rules to more than one element, then you should use a class. For example, only one <p> in an HTML document can have an ID called “sidebar,” whereas, a paragraph and a heading and a list, or three paragraphs could all have the same class. It's also important to note that an ID selector will overrule a class selector that refers to the same element.

Descendant selectors

Descendant selectors allow you to select an element that is a descendant of another specified element. For example, if you wanted to make every <strong> element that is found within a <p> element the color blue, then you could either markup every <strong> element with a class attribute as outlined above, which would be very time-consuming, or you could use descendant selectors. Descendant selectors are written very much like group selectors with the exception that they do not use a comma. In order to make every <strong> element that is found within a <p> element the color blue, you would write your style rule as:

p strong {color: blue;}

Descendant selectors are used regularly at more advanced levels, as they allow authors to specify style rules to various elements, and can quite often allow them to set very specific style rules without needing to use class or ID selectors. For example, it is quite common to see the example below used to style page navigation:

ul#nav li a {color: blue;}

Whilst this may look confusing at first, the key to being able to understand descendent selectors is simply to read them backwards. Taking this into account, the above example therefore states that:

Every <a> element found within an <li> element that is found within a <ul> element with the ID of “nav” (therefore <ul id=”nav”>), is to be colored blue.

This article has outlined a number of the most basic CSS selectors which, if understood clearly, will allow any author to write much more efficient HTML and CSS. This article by no means covers the bulk of what can be done with CSS selectors, yet it does show some of the simplest and most commonly used tasks that they can perform.

Resources

More on CSS selectors can be found at these locations:


Recently

Coloring text-decoration

by Realazy

Consider the following example:

HTML

<a href="#">foo <span>bar</span> zoo</a>

CSS

a { color:blue; text-decoration:underline; }

Question: How can the phrase ‘bar’ and its text-decoration be changed to a different color?

Centering an image, Part 2

by Maurício Samy Silva

In Part 1 of this article we explained that there are two techniques you can use to place an image within a block level element:

Centering an image, Part 1

by Maurício Samy Silva

There are two techniques for placing an image within a block level element:

  1. Wrapping the IMG element in the block level element within the markup;
  2. Setting up the background-image CSS property for the block level element.

The technique you should choose depends upon your needs. We'll describe how to center an image both vertically and horizontally using the first technique in this article, and cover the second in a later article.

Easy cross-browser transparency

by Matthew Pennell

If you've ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you've probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.

Become a Bite Size Standards author

by Andrea Arbogast

A quick announcement to point out that we are now accepting article submissions. Details can be found in the Contribute section.

© Copyright 2006 Bite Size Standards and Authors