Webmaster Tips: CSS articles

7 Useful CSS Tools

Sat, 04 Sep 2010 10:23:05 -0500

CSS or Cascading Style Sheets is still one of the most popular modes of designing a working website, yet, for many designers it can be at times a lengthy and tedious job. Thus, many web designers have took to using CSS tools in order to quicken the process up as well as have more control over design elements. Here's a few of the favourite CSS tools recommended by web designers to enable you to create a working website quickly and easily using CSS web design - you don't even need to know everything about CSS!…

Using !important CSS Declaration

Fri, 15 Jan 2010 07:01:56 -0600

The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important declaration should be used with caution, it's a very useful and powerful expression that much deserves its place in our CSS world. This article offers a guide to what the declaration is, what it does and how you should use it..

Styling Forms with CSS

Mon, 02 Nov 2009 06:32:01 -0600

In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web. Standardizing text field sizes between PC and Macintosh was a problem because the different operating systems interpreted character width differently; moreover, the field sizes may vary from browser to browser. CSS form design gives the designer much more flexibility, both to integrate and isolate the form and form elements. Text fields, for example, can take on a shade of a site's background color or adopt the same typeface used on the page. Similarly, you can draw attention to the form itself by giving it a contrasting background; this enables you to format lengthy drop-down lists for easy reading..

10 CSS Tips from a Professional CSS Front-End Architect

Wed, 22 Jul 2009 16:57:29 -0500

I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows..

How to change the look of Select element

Fri, 22 Aug 2008 05:39:24 -0500

So you’ve built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You’ve mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your select's are. With a little DOM scripting and some creative CSS, you can make your select's beautiful.

Hyperlink Cues with Favicons

Wed, 02 Jul 2008 05:39:34 -0500

Do you want to show the site's favicon for all links that point to external sites? This small tutorial shows you how to accomplish it with CSS and Javascript.

Styling File Inputs With CSS and Javascript

Wed, 02 Jul 2008 05:36:41 -0500

File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Clean and pure CSS FORM design

Wed, 02 Jul 2008 05:34:34 -0500

For CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.

Creating a Floating HTML Menu Using jQuery and CSS

Wed, 02 Jul 2008 05:27:14 -0500

For all of us who deal with long web pages and need to scroll to the top for the menu, here's a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it's fully W3C-compliant. This tutorial covers how to create a "floating menu" using HTML, CSS, and jQuery. To reiterate, a floating menu stays visible even if you scroll down a web page. They're animated, so they move up and down as you scroll the browser window up or down.

3 Simple Steps in Coding a Rounded Corners Layout

Tue, 17 Jun 2008 04:22:59 -0500

That we should aim in coding is simplicity and try to avoid any unnecessary markup. Various rounded corners techniques often include several additional elements that are purely presentational. When talking about fixed width, rounded corners layout, there's no need for complications. Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps. As a special treat, PSD and XHTML/CSS files included in this brief tutorial..