Category: CSS


10 CSS Form Examples
Articles / 12 Mar 2008

10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

CSSEdit Tutorial: The Basics
Articles / 18 Jan 2008

CSSEdit Tutorial: The Basics

CSSEdit Icon

CSSEdit is, as the name implies, a CSS editor for the Mac. It has come on leaps and bounds in the latest version and is now one of the best apps available on the Mac for designers. CSSEdit is created by the great delopers over at MacRabbit, who are also responsible for DeskShade.

One of the strongest features of CSSEdit is the simple, easy to navigate and beautiful interface. Even people who have no experience in styling web pages can find their way around this amazing app and create some stunning web pages. In this tutorial we’re going to be looking at the interface and how to get the most out of it.

The Main Window

The main window has three main sections, the first section (on the left) is the styles section. Here you can see all the styles you have applied to your site. The middle section is the actual editor of the app, here you do all the coding of your css file all with the ever-helpful code completion feature. The right hand section is a way of styling your page without coding anything whatsoever. You can type in or select with drop down boxes how you wish to style a certain element and the code is inserted for you. This is a great feature for anyone new to CSS or anyone who isn’t sure how to code a certain technique.

CSSEdit Main Window

The Toolbar

The toolbar of CSSEdit has some of the best features in the app and is therefore used quite a bit, especially in more advanced use, we’ll go through each toolbar icon one-by-one and I’ll explain what each one does.

CSSEdit Toolbar

Along the left hand side of the toolbar there are 5 tools, the first is the new style feature, this allows you to add a new style to your stylesheet quite easily. The second allows you to group certain styles together into a folder to make them easier to navigate through. The third is a simple of way of adding a comment into your stylesheet without having to code it in by hand. The fourth is a more advanced way of styling elements, it allows you to style a certain element wherever it appears in your stylesheet. With these four features there is no coding needed, CSSEdit does it all for you. The fifth feature is a simple search function, useful if you have a very large stylesheet.

CSSEdit Right Icons

The right hand side of the toolbar contains some of the more advanced features of CSSEdit. The first allows you to insert a link to the stylesheet into a HTML file, this assigns the HTML file the CSS file to style it. The second is a way of previewing your web page without having to open an external web browser. The third is called Milestones, it is a way of saving your current progress in the stylesheet, allowing you to revert if a mistake is made. The fourth is a way of validating your CSS and the final icon allows you to change which three columns of the main interface you can see, meaning that if you can’t code you can just edit your CSS with no coding needed.

If you don’t have this app, as a web developer I seriously suggest reading more at MacRabbit. It really is the ultimate in stylesheet creation.

Search Forms in Safari
Articles / 9 Sep 2007

Search Forms in Safari

Search fields in SafariIt is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

10 CSS Table Examples
Articles / 30 Aug 2007

10 CSS Table Examples

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

Free CSS Layout Templates
Articles / 29 Aug 2007

Free CSS Layout Templates

Free CSS Layouts and TemplatesWhen designing a new website, having a template to work from can save a huge amount of time. We have a collection of 12 great CSS templates to base your design on, both fixed and fluid layouts. These free CSS templates are designed by Mitch Bryson, and provided for you with his permission.

10 Great CSS Star Raters
Articles / 2 Aug 2007

10 Great CSS Star Raters

People need a way to know what’s great and what isn’t on the web – so rating systems have been around for a long time. Here is a collection of 20 fantastic CSS star rating tools to integrate into your own website.

We’ve tried to include a star rating script for each blogging or coding platform out there.

1. Creating a star rater using CSS

Creating a star rater using CSS

Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state. Well, I’m glad you asked because that is just the question I intend to answer.

2. CSS Star Rating Part Deux

Creating a star rater using CSS 2

Explaining how to create a star rating system with state, and more advanced features.

3. Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh).

4. Movable Type AJAX Rating Plugin

Movable Type AJAX Rating Plugin

Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog. There is also a ‘pro’ commercial version with more features if you desire.

5. Textpattern AJAX Rating System

6. WordPress Post Rating System

7. CSS Star Matrix

8. CSS Star Rating System (check out the source code)

9. Ruby on Rails Star Rating

10. ASP Powered Star Rater

Cross Browser Transparency
Articles / 18 Jul 2007

Cross Browser Transparency

There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:


The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.

Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.

The Basics of Semantics
Accessibility / 16 Jul 2007

The Basics of Semantics

Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.


It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.


It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

CSS Tabs Rollover Menu
Articles / 11 Jul 2007

CSS Tabs Rollover Menu

Using a tabbed rollover menu in the header of your website can add functionality, as well as making the navigation look good. Doing this in CSS means that you can use it to it’s greatest capacity, easily add or remove tabs and change the colour in different styles.

Pop Out CSS Menu
Articles / 11 Jul 2007

Pop Out CSS Menu

For websites with a complex hierarchy of navigation, using a pop out menu can allow you to easily find your way to what you want quickly. Using CSS to create one is a snap, and is easy to update.

Introduction to CSS
Articles / 5 Jun 2007

Introduction to CSS

For many people, Cascading Style Sheets (CSS) is a fairly alien topic. This tutorial helps to provide a comprehensive overview of CSS, allowing you to get started using it in your website.

What is CSS?

Where HTML is the language you use for designing the structure of a web page and adding the content, CSS is the language for adding styles, colours and layout options to the content you have written in HTML.

It allows you to define and create styles, which can either be linked to pre-existing tags such as or

, or completely new styles which you would reference by placing

around the content.

How to include a style sheet

The general practice for including a CSS file in your webpage is to place the following code in the area of your page:

The pathname (style.css) would need changing to the name and location of your CSS file.

The basic website

Here is the code of a simple website, ready to be styled with CSS. If you follow through the example and explanation, it should really help you when you come to create your own CSS styled web page.

At the moment, this website will look something like this. Very basic, and not too pretty. Let’s go ahead and create a CSS file to link to this page, defining some styles.

The basic style sheet

The website now looks much better, with more colour, layout ideas and more attractive fonts.

Most of the code used above in the CSS example is very self explanatory. The body section applies to everything within the HTML tag, h1 to everything inside a

tag, and .box to anything within the

tags. The dot before box denotes this as a custom style, not a standard one such as body or h1.

Why is CSS important?

Most of the effects shown above can be achieved by using tags in your design, or tables. The great thing about CSS is that it separates design from layout, and keeps your HTML code easy to read and understand. Pages load quicker, search engines have an easier time indexing your site and everyone benefits.

It also reduces the repetition of using lots of font tags, and if you wanted to change the look of all the headings on your website, you need only alter one CSS file rather than every single page.

Where to go from here

Start experimenting! Set up your own page in a similar way to above, try your own styles and see just how easy it is to achieve stunning visual effects with CSS.

Ten Tips for Accessible Websites
Accessibility / 30 May 2007

Ten Tips for Accessible Websites

We all know that building accessible designs is important, but how many of us really take it into account when crafting a site? Here are some simple and effective steps for making your site accessible for everyone.

1. Validate your XHTML and CSS

Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.

2. Add alternative text for images

Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.

3. Make sure your site works without JavaScript

As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.

4. Use CSS to seperate content and formatting

As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.

5. Provide a high contrast style sheet

Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.

6. Ensure link text is descriptive

Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.

7. Add “Skip to content” links on pages

Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.

8. Ensure every form has label tags

Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.

9. Don’t open links in a new window

Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.

10. Make an accessibility statement

Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.

0 0 0 0