Some Handy CSS Tricks

Brad Pyne — Sat, 27 Feb 2010 14:44:04 +0000

Cascading Stylesheets are used to determine the presentation settings for a web page. Any self respecting web developer is well versed in this language as the basics are easy to catch on to and are immensely useful. I’ve noticed lately that a lot of developers aren’t taking some of the easy shortcuts they ought to be. Below, I’ve included some functionality of CSS I believe every web developer should be aware of.

CSS Shorthand

When styling certain of elements it is helpful to use the shorthand syntax of a few key elements. You can use this syntax for backgrounds, fonts, borders, and some more. This isn’t anything complicated but will accumulate to a lot of time saved. This quick example will explain everything.

Easy way!

font: bold italic small-caps 120% verdana,sans-serif

background: #FFF url(images/bg.jpg) top left no-repeat;

border: 1px solid #000;

Long way…

font-weight: bold; font-style: italic; font-size: 12px; line-height: 120%; font-variant: small-caps; font-family: verdana,sans-serif;

Multiple Class Declerations

Most new developers are unaware that you can assign multiple class assignments in your html, this is an extremely effective tool. Here’s a great example of when you may want to use something like this:

.product { float:right; } .box { border:2px solid #000; }

As you start growing a personal library of commonly used classes it becomes much quicker to create a new page for the site. Stop creating a third class when your problems may easily be solved by applying two classes you’ve already created. The important thing to make sure of is that you use a space to separate the classes, do not use a comma. If any of the rules you’ve set overlap each other the rule set nearest to the bottom of the document will take precedence.

CSS Media Types

This isn’t something you’ll need for the small websites. When you’re dealing with large clients it’s important to cover all of your bases. Make sure to understand the different media types.

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

Here are some short descriptions to get you introduced. These are taken straight from W3C.

all
Suitable for all devices.

braille
Intended for braille tactile feedback devices.

projection

Intended for projected presentations, for example projectors.

screen
Intended primarily for color computer screens.

speech
Intended for speech synthesizers.

handheld
Intended for handheld devices (typically small screen, limited bandwidth).

print
Intended for paged material and for documents viewed on screen in print preview mode.

tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).

tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Image & Text Replacement

Image and text replacement has been revolutionized through the introduction of CSS. Despite this I find old and antiquated Javascript techniques used to this very day. In almost every scenario this is a horrible technique and should never be used. I’ve included an example on the right. If this is news to you then your life is about to be changed… well part of it anyways.

How it’s done:

The Hero (button.jpg)

Seriously, it’s that simple. When doing it this way you can also start to get JQuery involved, more about that later.

a.button-example { display:block; width:120px; height:30px; background:url(images/button.jpg) top left no-repeat; }

a.button-example:hover { background-position:bottom left; }

New Site Launch

Brad Pyne — Fri, 23 Oct 2009 23:57:11 +0000

Well I’ve been putting it off for quite some time but I’ve finally completed my portfolio. This is the third version of this website and my first ever blog! Please check out some of my work and feel free to contact me if you are interested in working with me.

In this blog I’ll be talking about…

Web / Graphic Design
I’m constantly learning new ways to make a design look better. This is where I’ll explain some of the different things I learn, some of the tools I find, and some of my favorite designs.

Search Engine Optimization (SEO)
Recently I’ve started to branch out from web design and have developed a strong interest in search engine optimization. In fact this is going to be one of my first attempts at SEO and plan on having many more in the future.

Anything I Feel Like!
It is my blog after all.