CSS tricks for branding

Already on evolt.org, several articles have appeared about some basic uses of CSS. However, the strong capabilities of CSS to add an extra touch of slickness to a site haven't been fully touched upon. This article seeks to reveal some of the different ways degradable CSS can be used to add that extra something to the feel of a site.

Contents

• Custom Cursors
• Background Images
• Form Elements
• Custom List Pictures

Internet Explorer 6 for Windows shipped with support for custom cursors, something which, once other popular browsers also take the initiative, will remove the need for web site authors to make their users download plug-ins to see custom cursors. The best thing about this feature is that using it won't break your site in browsers which don't support it, but instead make them revert to the default cursor. To use a custom cursor you must declare all the elements you want to use it on, for example, a link cursor in your <a> tags, and a text cursor in your <p> tags.

Trial versions of many different icon/cursor editors are available if you do not have one currently on your computer.

The following line of code is needed in your stylesheet to use the cursor: cursor: url("http://yoursite.net/customcursor.cur"); with the path of your cursor inside the url statement.

A word of warning: Make sure you know your audience before using these. Even if all you use them for is changing the cursor's colour to match your site's scheme better, some people are used to things exactly how they are and will panic at even such a small change as this.

CSS allows for much more advanced control over background images than HTML, letting you change the attachment, position and whether or not it repeats. This extra control allows for powerful branding effects, such as the old design of Independents Day.

There are several properties in CSS to control the background of elements, all of which are available through the shorthand background declaration too.

body {
	background-image: url("mybackground.gif");
	background-attachment: fixed;
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}

All the keywords above can be specified in order after the background declaration too, as in background: url("mybackground.gif") fixed top left no-repeat #FFFFFF;. The possible values for background-attachment are scroll, fixed and inherit. Scroll specifies that it should scroll up with the page, while fixed says that the image should stay fixed where it is on screen, in other words that the image stays exactly where it is while the other content scrolls up, and inherit specifies that it should do whatever it's parent element was specified to do. Background-position can take a full list of position keywords, and percentage values. If you use percentage values, you should specify horizontal then vertical. Background-repeat can be repeat-x, repeat-y, repeat, or no-repeat.

Styling form elements is one of the more widely used applications of CSS. Invariably some questions pop-up again and again, and to answer them, no matter what z-index you use, some form elements will always show through, because the browser uses the O/S to render them, instead of doing them itself. Now that that's out of the way, there are many things that you still can do with form elements, using only simple CSS. Are you tired of that white background and 3d border? Background and border can help you out. Similarly, if you want your options to be different colours as you scroll down, you can make some classes and apply them to your options.

Stylesheets can help make forms adhere to your colour scheme, enhancing the feel of your site just a little bit further.

One other nice trick that CSS enables you to do is custom list pictures. Custom list pictures are actually quite easy to use, as simple as list-style-image: url("myimage.png");. This can help you make lists better fit into the theme of a site, if used correctly. And if you need to use more than one, then it's quite easy simply by using different classes.

For example

ul.tv {
	list-style-image: url(images/tv.gif);
}

ul.comp {
	list-style-image: url(images/computer.png);
}