CSS3 Basics

by: Jason Cranford Teague

Cascading Style Sheets (CSS) standard is a stylesheet language that allows web developers to add visual and temporal styles to Web pages using mark-up languages—typically HTML. CSS3 (or CSS Level 3) is the latest iteration of the CSS specification as defined by the World Wide Web Consortium’s CSS Workgroup. It builds on features already defined in the CSS1, CSS2, and CSS2.1 specifications. CSS4 is also currently under development by the CSS Workgroup but its features are still experimental.

Because it is a progression of the previous standards rather than a replacement, there are few changes from the previous versions, mostly additions. There are a few cases, however, where older syntax is being depreciated in favor of new syntax. Those cases will be highlighted in this document.

Browser Support

CSS3 is a standard that is supported in part by all modern web browsers. However, web browsers have gradually implemented CSS3 over the last several years, so older browsers may not have properties implemented, have the properties fully implemented, or may be using a browser extension. Universal browser support should be assumed unless otherwise indicated.

Rendering Engines and Browser Extensions

The rendering engine (sometimes called layout engine or web browser engine) is a software component used to display and interpret HTML, CSS, JavaScript, or other code used to create web pages.

Some of the features in CSS3 (and CSS4) are supported using browser extensions, which were used to test experimental features in rendering engines in advance of their inclusion in the full CSS specification. Although referred to as browser extensions, they are actually prefixes based on the specific company of origin or the rendering engine used by the browser, rather than the specific, name-brand browser.

Using Browser Extensions

To ensure maximum backwards - and cross-browser compatibility, always include the declaration using all possible browser extensions available for the specific property along with the CSS3 syntax.

.mybox { -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);

It is a good idea to place the W3C version of the property last in order, so that it will override the older browser extension versions if recognized.

Selectors are used to indicate the element to be styled and the conditions by which it should be styled. One of the key areas that CSS3 has added to the standard is new pseudo-classes and pseudo-elements, allowing you more precise control over web designs.

New Pseudo-Classes

Pseudo-classes are used to reference specific elements on the page that are not specific HTML selectors.

Structural Pseudo-classes

Structural Pseudo-classes are used to reference specific elements based on their location in the DOM (Document Object Model).

UI Pseudo-classes

UI pseudo-classes are used to reference specific elements based on their use to input information by the user.

Other Pseudo-Classes

New Pseudo-Elements

Pseudo-elements are used to reference elements based on their use within the document. Four new ones have been added in CSS3, but have not been widely implemented yet.

Change in pseudo-element Syntax

The only major change to the actual syntax of CSS is with pseudo-elements, which now use two colons (::) instead of a single colon.

Example using CSS2.1

p:first-letter { font-size: 2em; }

Example using CSS3:

p::first-letter { font-size: 2em; }

There are new ways to define color values as well as gradients and to set the opacity of individual color fills.

HSL

Hue, saturation, and lightness are common ways to define a color value, and are now available to web designs.

Changing Hue

hsl(0, 100%, 50%)
hsl(90, 100%, 50%)
hsl(180, 100%, 50%)
hsl(270, 100%, 50%)

Changing Saturation

hsl(120, 100%, 50%)
hsl(120, 75%, 50%)
hsl(120, 50%, 50%)
hsl(120, 25%, 50%)
hsl(120, 0%, 50%)

Changing Lightness

hsl(240, 100%, 100%)
hsl(240, 100%, 75%)
hsl(240, 100%, 50%)
hsl(240, 100%, 25%)
hsl(240, 100%, 0%)

HSL is not available in IE until version 9.

Opacity

Opacity is used to make an entire element translucent. This includes all of the elements children.

50% opacity would be:

element1 { opacity: .5 }

Color Opacity with Alpha Values

The alpha of a color refers to its opacity as a value between 0 (transparent) to 1 (opaque). CSS3 adds the ability to control opacity of individual color fills by adding an alpha value to RGB and HSL color values. This is done by changing the syntax for the color declarations slightly to rgba() or hsla().

Solid Color:

rgb(255, 0, 0); hsl(0, 100%, 50%);
rgb(0, 255, 0); hsl(120, 100%, 50%);
rgb(0, 0, 255); hsl(240, 100%, 50%);

Color set to 50% Opacity:

rgba(255, 0, 0, .5); hsla(0, 100%, 50%, .5);
rgba(0, 255, 0, .5); hsla(120, 100%, 50%, .5);
rgba(0, 0, 255, .5); hsla(240, 100%, 50%, .5);

Alpha values are not available in Internet Explorer until version 9.

Gradients

A gradient allows you to set two or more color stop values that will then fill with color, smoothly transitioning between. Gradients can only be applied to backgrounds.

Linear Gradient

Currently, linear gradients still rely on browser extensions to ensure full cross-browser compatibility, but the syntax is identical.

background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, 
rgba(0,0,225,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 
0%,rgba(0,0,225,1) 100%); 
background: -o-linear-gradient(top, rgba(255,0,0,1) 
0%,rgba(0,0,225,1) 100%);
background: -ms-linear-gradient(top, rgba(255,0,0,1) 
0%,rgba(0,0,225,1) 100%);
background: linear-gradient(top, rgba(255,0,0,1) 
0%,rgba(0,0,225,1) 100%);

Sample Radial Gradient

background: radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%,rgba(0,0,225,1) 100%);

Currently, radial gradients rely on browser extensions to ensure full cross-browser compatibility, but the syntax is the same.

background: -moz-radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%, rgba(0,0,225,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%,rgba(0,0,225,1) 100%);
background: -o-radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%,rgba(0,0,225,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%,rgba(0,0,225,1) 100%);
background: radial-gradient(center, ellipse cover, 
rgba(255,0,0,1) 0%,rgba(0,0,225,1) 100%);

Font styles affect the appearance of individual letters, while text styles generally are used to affect an entire block of text.

@font-face

Although technically a part of the CSS2 specification, @font-face is commonly associated with CSS3, where it has come into its own with the availability of webfonts that allow the syntax to work.

The basic @font-face syntax looks like this:

@font-face {
    font-family: ‘font name’;
    src: url(‘fonts/fontfile.ttf’) format(‘truetype’);
font-stretch: normal;
    font-style: italic;
    font-weight: bold;
}

Then use the font name in your CSS:

p { font-family: ‘font name’, times, serif; }

Cross-Browser Webfonts

Webfonts are simply font files that can be used by a particular browser to display type. However, different browsers use different file formats, so you will need different sources for each:

@font-face {
    font-family: 'font name';
    src: url('fonts/fontfile.eot?') format('embeddedopentype'),
    url('fonts/fontfile.woff') format('woff'),
    url('fonts/fontfile.ttf') format('truetype'),
    url('fonts/fontfile.svg#fontname') format('svg');
}

The browser will download the first file format it recognizes and use that.

All elements have a background area that can be filled with a solid color, gradient or image. Although part of the CSS2 specification, with CSS3 you can now designate multiple background images on the same element, which has necessitated some slight changes to the properties syntax.

Box-Shadow

Drop shadows are a common visual effect used to create a feeling of depth on a 2D screen.

box-shadow: 2px 3px 5px rgba(0, 0, 0, .5), 0 0 20px rgba(023, 
234, 120, .75) inset;

Border Image

CSS3 introduces the ability to use an image file to create customized border styles. To do this, you will first need to create a bit map image, saved in a web-compatible format (e.g., PNG, GIF, or JPEG).

The CSS slices the image into nine areas: the four corners, the four sides, and the center. The corners of the image will be used at the corners of the box, and each of the four sides are tiled horizontally or vertically

Then, use the properties below to set the image as the elements border.

In the border-image shorthand, the URL for the image file, the width and the height that the border should slice into the image from its edges, and then how the border image should repeat.

border-image:url(“flora.png”) 30 30 repeat;

The border image property is still not fully supported as a CSS standard, but is available in Firefox, Safari, Chrome, and Opera with the appropriate browser extensions:

.floralborder {
   border: 30px solid transparent;
   -moz-border-image:url("flora.png") 30 30 repeat;
   -webkit-border-image:url("flora.png") 30 30 repeat;
   -o-border-image:url("flora.png") 30 30 repeat;
   border-image:url("flora.png") 30 30 repeat;
}

Border Radius

Border radius allows for the inclusion of rounded corners. Although referred to as border radius, this property really rounds the corners of the box, whether there is a specific border on it or not. The radius can be a single value per corner for a circular radius or two values per corner for an elliptical radius. The border radius can be applied to all four corners or each individually as desired.

border-radius: 20px;

border-radius: 20px 10px 30px 40px;

border-radius: 20px/10px;

border-radius: 20px 10px/10px 20px;

Overflow allows you to control how content is viewed if it does not fit in the area defined. However, the new overflow-x and overflow-y allow you to set how overflowing content is controlled independently horizontally and vertically, while the resize property allows the user to change the size of the element’s box.