CSS is used in web design to define the way your pages are presented. It’s a styling language first standardised in 1996 as a way to give designers more power and reduce the complexity of HTML documents. Before its creation, all aspects of page appearance such as colours, sizes, borders and spacing were part of the HTML mark-up. This meant that even simple pages quickly became a large mess of code and the same statements had to be repeated over and over throughout a website.
The idea behind CSS is that it separates the presentational code from the content, so that HTML documents can remain clean and simple with multiple documents all pulling their styles from a single CSS file. This allows pages to be built quicker, with less repetition, and makes any future maintenance or design changes much easier.
The current standard is CSS 2.1 which has mostly been in use since 2004, but a big update is around the corner in the form of CSS 3. It’s going to be a while before browser adoption catches up but this post is going to cover some of the exciting new tools that designers will be able to take advantage of, some of which can even be used today.
Multi-Column Layouts
Placing your text into multiple columns is technically possible today using multiple DIVs but CSS 3 will make this much easier allowing you full control over the number of columns, their widths and the spacing between them.
#content-main{
text-align: left;
width: 920px;
font-size: 1.2em;
-webkit-column-count : 3;
-webkit-column-gap : 50px;
}
Multiple Background Images
Again, giving an area multiple background images is possible today but it means cluttering up your page with unnecessary DIVs. With CSS 3 you’ll be able to assign more than one image to an element, in the example above I created a single DIV with two separate background images:
1. The main blue graphic locked to the top right hand corner.
2. The white WSI logo (as a transparent PNG) locked to the bottom left.
The logos would stay in their assigned corners no matter what the size of the DIV, giving designers a lot of flexibility when working with dynamic content.
#multibg{
width: 500px;
height: 200px;
background: url(../images/bg2.png) bottom left no-repeat,
url(../images/bg1.jpg) top right no-repeat;
}
Rounded Corners
CSS 3 allows you to place rounded corners on any element without having to use images or JavaScript to fake it. You have full control over which corners are affected and the amount of rounding.
#outer{
width: 475px;
height: 100px;
padding: 50px;
background: url(../images/bg1.jpg) bottom left no-repeat;
-webkit-border-radius: 10px;
}
Drop Shadows
Drop shadows could easily be used badly and ruin a site but in the hands of a good designer could also add that something to make it stand out. It’s another effect that can be faked at the moment using images or JavaScript but CSS 3 will streamline your code with shadows natively rendered by the browser.
#dropshadow{
width: 450px;
height: 170px;
background: url(../images/bg1.jpg) bottom left no-repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0 0 5px #111;
}
h1{
font-size: 2.5em;
font-weight: bold;
margin-bottom: 15px;
color: #003767;
text-shadow: #ccc 4px 4px 2px;
}
Element Opacity
The opacity controls in CSS 3 are flexible enough that you can control the exact value for any single element as well as deciding whether the opacity of child elements is effected.
#opacity{
width: 450px;
height: 150px;
padding: 25px;
background: rgba(255, 255, 255, .40);
}
@Font-Face
The @font-face attribute allows you to embed a custom font, hosted somewhere online allowing you to venture out of the safety of traditional web fonts. A slightly less useful version has been available in Internet Explorer for years but it’s now starting to gain support from both browser developers and font foundries. We discussed @font-face in more details in a previous post.
So can I start using these right away?
Unfortunately the answer is yes and no. The last 6 months has seen a huge improvement in CSS 3 support from most of the major browsers but you’ll still have to use browser specific attributes (“-moz-“ or “-webkit-“ before the attribute name, as in some of the examples above) to get many of these new techniques working right now. The latest versions of Opera, Safari and Chrome all have excellent CSS 3 support right now with Firefox close behind. As usual though, Internet Explorer is dragging its heels with almost no support even in IE8. This is hopefully set to change whenever IE9 launches according to a recent discussion with Microsoft developers.
There are many site designs and blogs already taking advantage of these new techniques and there’s nothing to stop you from experimenting too. Browser support is going to improve over time and as long as the design doesn’t look broken in IE, those visitors would never even realise anything was different for them. There are a lot of designers pushing the idea that a website doesn’t have to look identical in every browser. It’s important to make sure that everyone receives a good browsing experience but why deprive the modern browsers of those more advanced features?
This is obviously something that needs to be discussed at the beginning of a project but if you’re lucky enough to be working with a forward thinking, tech savvy client, why not suggest that they join you leading the charge into the next stage of web design?
