CSS (Cascading Style Sheet) is a great low bandwidth option for bringing the pretty to your website. With each generation of CSS, designers have more and more power over the presentation of their elements. CSS3 introduces functionality such as transformations and animations that require far less technical knowledge to implement than alternatives such as jQuery and HTML5 animation.

“Style is a simple way of saying complicated things”
– Jean Cocteau

The CSS outlined below isn’t the fanciest, some are quite basic but during my time as a web designer I feel I have gotten really good value from them.

Display: inline-block

Used in text and list items where you want to use widths and margins but you want to keep the elements on the same line.

!important

This is CSS speak for just do as I say! I wish I could pull this one out in everyday life. !important stops your elements being overwritten by any other CSS code that applies to the same HTML.

Text-align: justify

Justified text is pretty much a must have for a professional looking website.

Border-radius

The border-radius tag will give you nice rounded edges on your divs or if you set the value high enough you end up with a rather trendy circle.

Box-shadow

Shadows are great for that polished look or adding contrast where there isn’t quite enough. Be sure to add -moz-box-shadow and -webkit-box-shadow for compatibility with all major browsers.

Linear-gradient

While flat colour is all the rage at the moment a little gradient goes a long way. For a quick way to create CSS gradients use a generator site such as the Ultimate CSS Gradient Generator from ColorZilla

Transform

Much like the transform function in Photoshop the transform property can rotate or morph 2D or 3D elements, see W3Schools for more information. This property came in very handy when I needed to rotate table headers 90 degrees for an iPad friendly site. Be sure to include the -ms-transform: and -webkit-transform: tags for compatibility with all major browsers.

Background-attachment: fixed

The advent of faster internet connections has made it possible to have a single large image as the background of a webpage. The background-attachment: fixed declaration ensures the background doesn’t move as users scroll through the rest of the content.

Web fonts

No more having to stick to boring, safe old Arial. Google fonts contains a large selection of fonts that can be added to websites using CSS. Using too many web fonts can affect website performance not mention make your website look busy so it is best to use these judiciously.

:nth-child

This is a handy way of applying styles to one or more elements in a collection without having to give them a class. Useful if, for example you would like to have different background colours for odd and even table rows you can use nth-child(odd) and nth-child(even).

Honorable mention – Font Awesome

Font Awesome relies on bootstrap which contains JavaScript. That possibly disqualifies it from being on a list of favourite CSS code but fully scalable icons without an image is really very cool so I figure it rates a mention. Check it out at GitHub.

That is some of my favourite CSS code. Even as I was writing this list I thought of CSS that has cruelly failed to make the cut (::before and ::after, I am sorry). The exciting thing about working with CSS is that there is always something new to learn.

I would love to hear about any CSS that you think is pretty cool or anything that has gotten you out of a web design scrape.