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:
<div class="product box"> </div>
.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:
<a class="button-example"> </a>
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;
}