Basic CSS3 Techniques That You Should Know

After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.

We’ll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment!

This is a follow-up of a previous article called CSS3 Techniques You Should Know which you should also check out.

Multiple Backgrounds

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.
body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Selectors

CSS3 selectors allow you to select elements to apply style properties with greater specificity, giving you opportunities to select complex groups of elements. The new selectors not only save you time, but also help you keep your HTML markup to a minimum. You’ll inevitably reduce the number of classes and IDs you’ll need, allowing you to become a bit more organized with your stylesheet.

The general sibling combinator

There is a new kind of combinator that is being introduced in CSS3, the general sibling selector. This selector targets all of the siblings of a particular element. For example, if you wanted to target paragraphs in the same hierarchy as your level-1 headings, you would do:

h1~p {
  color: red;
}

The selector above will match the first p element below (giving it a red color), but not the second p element, because it is not on the same level (e.g. not a sibling) as the h1 element.

<h1>Heading</h1>
<p>This paragraph is a match</p>
<div>
  <p>This paragraph is not a match</p>
</div>

New pseudo-classes for greater specificity without scripting

New pseudo-classes introduced in CSS3 specifications allow you to select a group of elements that, before, would’ve required DOM selection using a scripting language such as JavaScript, or additional classes/ID’s.

Here are some new pseudo-classes:

• :last-child selects only the last child element.
• :nth-child(n) selects the n^th child, useful for zebra-striping tables.
• :not(e) selects everything except e.

SitePoint has a complete list of CSS3 psuedo-classes.

Resizing Elements

With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.

div {
  resize: both;
}

Better Fonts

The most commonly used fonts on the web are Arial, Helvetica, Verdana and Georgia because most computers have them preinstalled. With CSS3, you can break away from these fonts and use various types of fonts as long as it can be called from an internet-enabled location. When you call on your font, it will be displayed anywhere on the site. Because of copyright issues, you have to make sure that you can use the font before using the @font-face feature.

In the following example, the @font-face feature declares the name of the font family (you can name it anything you want) and the location of the font file (in this case a TrueType font file). Once it’s declared, you can use the font-family property to set the font of an element.

@font-face {
  font-family: SketchRockwell;
  src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
  font-family: SketchRockwell;
  font-size: 3.2em;
  letter-spacing: 1px;
  text-align: center;
}

Text Shadows

The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.

In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.

h1 {
  text-shadow: #003471 2px 5px 2px;
}

Preview of text shadow CSS3 property in Firefox 3.5.5.

Rounded Corners

Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.

For example, the below code will produce 10px-rounded corners for divs:

div {
  border: 2px solid #434343;
  padding: 10px;
  background: #e3e3e3;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 500px;
}

In the above code, -moz is for Firefox and -webkit is for Safari and Chrome.

Rounded corners in Firefox 3.5.5.

Summary

CSS3 gives us better control over our HTML elements, opening up possibilities of creating complex and flexible designs that have a reduced reliance on static graphics and scripting. We talked about some basic stuff that works in most modern web browsers (except IE8). To learn more about CSS3, check out the W3C CSS3 Current Work page and see CSS3 .Info for the latest news about the newest version of CSS.