Vandelay Design Blog » CSS

10 Resources for When You Need Help with CSS

Vandelay Website Design — Thu, 11 Dec 2008 13:27:35 +0000

From time-to-time there will probably be situations where you could use some help or guidance with CSS during your web design and development work. While there are plenty of great CSS resources available, I would like to point out 10 that can be very helpful resources in these situations.

Stack Overflow

Stack Overflow is sort of a combination of social media and a forum. It is a niche specific site focused on programming and development (CSS is just one of the topics being discussed). The purpose of Stack Overflow is to ask and provide answers to questions for programmers. Anyone can post a question (you don’t even have to create an account) and then other members will be able to provide answers to your questions. Other users can then vote up or down on the various answers so it’s easy for everyone to identify the best ones.

CSS-Discuss.org

CSS-Discuss is a large and very active mailing list for CSS-related issues. You can either join the list to post and answer questions, you can browse through the archives in search of a particular issue, or you can browse through the wiki and get involved there if you have something to contribute.

CSS Cheat Sheet

The CSS Cheat Sheet is a great reference to have on hand in anticipation of those times when a little extra help might be needed. It is a one-page PDF document that includes all selectors and properties.

CSS Shorthand Cheat Sheet

If you’re looking for help in reducing the size and optimizing your css files, the CSS Shorthand Cheat Sheet is an excellent resource. With this one-page PDF document you’ll be able to create more efficient CSS code with shorthand techniques.

Web Developer Add-On

Chris Pedrick’s Web Developer add-on provides a great deal of functionality for your development in general, and CSS is just one of the specific aspects. Using the toolbar, you can do such things as identify all the styles that affect an element, view the CSS source code, see the sizes of block elements, and disable CSS to see how your pages degrade.

Firebug

Firebug is another add-on that puts a great deal of CSS information and resources at your fingertips. With firebug you can edit, debug and monitor CSS, in addition to HTML and JavaScript in any webpage. For anyone working with CSS, Firebug is a great tool to quickly edit and test your code, particularly when you’re experimenting and you need to see how your changes will impact the site.

CSS-Tricks

CSS-Tricks is a popular blog, which many Vandelay Design readers probably subscribe to. At CSS-Tricks Chris Coyier publishes articles and tutorials that cover all kinds of aspects of CSS. The archives contain plenty of posts that will be helpful to anyone looking to learn more about CSS. In addition to Chris’s articles, CSS-Tricks also includes a forum that is pretty active where you can get help.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Noupe published a post earlier this year with 50 examples of things you can do with CSS. If you’re looking for some new ideas this is a great resource, and if you’re looking for help on a specific issue, there may be a resource here that is just what you need. Included in the post is help for styling lists, working with forms, footers, image replacement, image sprites, other image techniques, text and link effects, navigation, galleries, drop caps, rounded corners, blockquotes, and more.

CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices

This is another helpful post from Noupe that focuses on one of the most common problem areas for working with CSS, layouts. If you’re experiencing issues getting a layout to work the way you want it to, most likely there is something here that is just what you need.

Top Reasons Your CSS Columns are Messed Up

Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used.

Other helpful resources:

Looking to Hire a Designer or Developer?

Post a free job listing to the DesignM.ag job board for freelance, part-time or full-time positions. Your listing will be seen by thousands of talented designers and developers. - Post a job for free.

23 Resources for Clean and Compressed CSS

Vandelay Website Design — Tue, 29 Jan 2008 02:22:48 +0000

There are a number of free online tools that can help you to create and maintain effective CSS coding. These tools include validators, optimizers, compressors and more. Try out a few of these tools and see how they can help you to keep more efficient style sheets.

CSS TIDY

CSS Tidy is an open source CSS parser and optimizer from SourceForge. It is available as an executable file, and there is also an online version. CSS Tidy is often able to achieve a compression ration of 30% or more. In addition to compression, CSS Tidy can also format CSS code for higher browser compatibility.

CLEAN CSS

Clean CSS is another simple online tool that gives you a few options for formatting and optimizing CSS. Clean CSS gives you easy control over how much you want it to do. It is also available in German and French.

CSSCHECK

Insert the URL of your style sheet and CSSCheck will quickly run a report that gives you some feedback on the code. It will give warnings for items that may cause problems.

CSS ANALYZER

The CSS Analyzer from Juicy Studio allows you to validate your CSS code, and it also tests the color contrasts and the units of measurement. Just enter the URL of your style sheet and it will produce the report.

CSS OPTIMIZER

CSS Optimizer is another tool for reducing the file size of style sheets. Unlike some of the other tools, it offers the option to upload a file from your computer in addition to the option of entering a URL.

FLUMPCAKES CSS OPTIMIZER

The CSS Optimizer from Flumpcakes gives you several options and provides the save features as many of the other optimizers on this list.

CSS DRIVE CSS COMPRESSOR

CSS Drive provides a CSS Compressor with options for “Light”, “Normal”, or “Super Compact.” You simply paste your code into the page and it does the work.

CSS SUPERDOUCHE

CSS Superdouche offers less features and options than some of the other tools, but it still functions essentially the same. It works to reduce the size and complexity of the file by eliminating unnecessary elements and organizing the file.

ROBSON CSS COMPRESSOR

Another option for compressing your CSS files, the Robson CSS Compressor offers many of the same features as the other choices listed here, but it is still in development, so “it may not work correctly.”

W3C CSS VALIDATOR

The W3C offers a validator for CSS files. Simply enter the URL and see how your style sheet does.

Other Choices:

Looking to Hire a Designer or Developer?

4 Reasons to Use CSS-Based Navigation

wpcoder — Mon, 11 Jun 2007 01:41:36 +0000

Navigational structure is one of the most crucial aspects of effective website design. Navigational bars/menus are frequently key design elements that help to create the look and feel of a website through color, typography, shape, and sometimes images.

While the appearance of the navigational menu can make or break a design, the usability of the site should not suffer in order to accomplish a specific look. Ideally, the navigation should be attractive and compliment the look of the site rather than overpower the rest of the site and take focus away from the content.

Unfortunately, many websites still use outdated navigational methods that take away from the usability of the website. If images are relied on heavily for navigational purposes the site may be inaccessible to users with disabilities or to users who surf with images turned off. However, that doesn’t mean that navigational menus have to be plain and simple-looking in order to remain accessible.

By using CSS to create a navigational menu you can achieve both accessibility and a professional, attractive appearance.

The benefits of using CSS for navigational menus include:

1. Lightweight Code

The combination of CSS and HTML create navigational menus that are much lighter weight (much less code) than similar navigation menus that would be created with JavaScript or images (CSS can be used in combination with images to retain all the benefits of a CSS menu with less weight than a menu strictly based on images). Lighter weight code is easier for search engines to index and it creates pages that load faster for visitors.

2. Accessibility

CSS-based navigation is accessible and usable for all visitors. If a user is surfing with images and/or CSS turned off, the navigation will be usable as a bulleted list. The small percentage of visitors using older browsers that do not support CSS will also be able to use the navigation.

3. Unlimited Design Options

Using CSS for your navigational bar does not mean that you will be limited in your design. In fact, CSS menus offer as much or more flexibility as other navigational options. When CSS is used with background images just about any look is possible to achieve. (To see some of the variety of CSS-based navigation menus, visit CSS galleries like CSS Vault and CSS Beauty.)

4. Plenty of Scripts Available

If you do not want to create your own CSS-based menu from scratch, there are plenty of free scripts available for use. Using a free script does not necessarily mean that you will have the same navigational menu as hundreds or thousands of other websites. Any menu can be customized and adapted (color, size, font, background image, etc.) to match the look and feel of your website. Some of the best free CSS menus can be found at:

Vandelay Website Design
Exploding Boy
Dynamic Drive
CSS Vault
Listamatic
CSS Showcase
Razvan’s Nerve

Looking to Hire a Designer or Developer?

Why Use CSS-Based Design

wpcoder — Sun, 04 Mar 2007 22:31:46 +0000

The goal is to harness the benefits that make the technology powerful from a design standpoint: less code, increased accessibility, and easier maintenance, to name a few.
Dan Cederholm from Bulletproof Web Design (page vii)

Cascading Style Sheets (CSS) allow for the designer to separate the content from the design. A CSS-based design allows the designer to create a site with much less code than a site with an identical look that has been designed with tables. While tables are appropriate in some situations, a design that primarily uses CSS to control the layout has several advantages:

The decreased amount of code allows for faster downloads.
The decreased amount of code allows search engines to easily access the true content of a page, ideally resulting in higher search engine rankings. Search engines rank pages based on their content. With table-based design the page will contain substantial coding that does not relate to the content. CSS-based pages will have minimal extra markup which makes it easier for the search engines to find the content. If excessive coding prevents the search engines from finding the content, the pages ranking will suffer. In addition, CSS-based design allows the website designer to position the most valuable content ahead of less meaningful content, whereas tables present content in the order that it is displayed on the page. Content higher in the code will generally have more influence on search engine rankings.
CSS-based design is easier to modify than table-based design. If a designer wants to make significant changes to the layout of a page designed with tables, starting over may be the only option. CSS makes it easier to perform routine updates as well as significant layout changes.
CSS-based design allows a website to be more accessible across various browsers, as well as to those with disabilities using screenreaders and other devices.

If you are interested in creating a new website or having your current website re-designed, please see the packages that are available from Vandelay Website Design.

Looking to Hire a Designer or Developer?