Ten Tips & Tricks for Writing CSS

Writing Cascading Style Sheets, more commonly known as CSS, is a necessary skill to obtain when creating content for the Web. Desktop screens, mobile screens, even print layouts, depend on the use of CSS to make content come to life. Mastering CSS can make your content stand out among the competition and entice Internet users to keep coming back.

Writing CSS is fairly simple. It’s not as complex as other Web developing platforms like Javascript or HTML5. The way Web browsers handle CSS errors is both a blessing and a curse, depending on the situation. When a Web browser is unable to translate a certain line of code in CSS, it simply ignores that line and continues on to the next. Any application developer would love to have error bypass feature. As with most application languages, any slight slip up in your coding syntax and your application will cease to start. What makes error bypassing cumbersome at times, is the fact that your problems are being ignored, making you responsible for finding and resolving the problems yourself.

The following list of tips and tricks will not only finding and fixing these errors, but will provide assistance in your coding skills to prevent errors from happening in the first place. Let’s get started.

Tip 1: Use a Program Specialized in Creating CSS Files

The beauty of programming languages for the Web, including CSS, is that proprietary software is not required for your code. However, using a plain text editor like Microsoft’s Notepad or Apple’s TextEdit is not the optimal choice when writing CSS. These basic programs are just that: basic. When writing CSS, it is very helpful to have some assistance in letting you know whether or not you have any errors in your code.

Several applications are available—including a few free applications—that will help assist you when writing CSS. Web authoring programs like Adobe Dreamweaver and Apple’s iWeb are rich with features for assisting in writing CSS, as well as several other Web programming languages. These programs apply a color style to your work, check for any syntax errors and notify you of any errors as you are typing. These features save you the trouble of reading through hundreds of lines of code to fix an error before publishing your work. While these features are very handy for a beginner, the programs mentioned are not cheap, and some of the features they provide may not be worth hundreds of dollars they cost.

Most free applications such as Text Wrangler and Notepad++ provide features like color-coding and numbered lines, and both programs are free. Software with color coding features helps to locate errors much faster than plain text, as the color will bleed into the rest of the code to help visualize the missing syntax. Numbered lines come in handy when you are using validation software to check for errors. Finding line 366 to fix an error, without numbered lines, could take a while.

Color-coded CSS vs Plain Text CSS

Tip 2: Test Your Work in All Popular Web Browsers

As easy as CSS is to write, getting it to display identically in every Web browser can be difficult. While there are standards for CSS maintained by the World Wide Web Consortium, or W3C, some Web browsers do not follow it as closely as others. You may need to make a few tweaks to your CSS code to get it to play nicely with all of them.

There are two environments to be aware of when writing CSS for the desktop world: Microsoft’s Internet Explorer and everything else. Internet Explorer renders CSS code differently than Mozilla Firefox, Google Chrome and other popular Web browsers that follow W3C complaint standards more closely.

A great rule of thumb is to view your CSS styling results in Mozilla Firefox as you create it, and once it looks perfect, check your work in Internet Explorer to make any adjustments necessary for your work to look alike in both Web browsing environments. Writing for Mozilla Firefox will ensure that your code is following W3C compliant standards, and will provide a more accurate look across all desktop and mobile Web browsers.

The following Web browsers are the most popular browsers among both Mac and PC users. You will want to download a copy of each browser to test out your code:

Tip 3: Install Firebug and Web Developer Toolbar for Free

Several tools can be added to Mozilla Firefox and Google Chrome to make your programming life easier. The first is a live HTML and CSS editor called Firebug. With Firebug, you can inspect any element you wish on any Web page simply by right-clicking on it. This will bring up Firebug’s editing console with the exact HTML and CSS styling applied to that element. You can also edit these properties. Firebug will edit the page live to show your results. This is a must have tool when fine tuning your CSS styling to make sure it looks identical to what you intended.

Firebug

The second tool you should add to either Firefox or Chrome is called Web Developer. Web Developer offers a complete set of tools to help you with your CSS styling. Some key features include resizing your browser window to any screen resolution you wish, enabling and disabling all CSS to ensure your HTML typography is sufficient for browsers without CSS capabilities and validating your CSS with the standards implemented by the W3C.

Web Developer Toolbar

Tip 4: Be Mindful of Browsers that are Not CSS 3 Compatible

The new features in CSS 3 make it easier to create visual effects, such as shadows and rounded corners, without having to create them as images. This will save you time when creating such effects and will also keep your Web page repository less cluttered with image files for yoCSS 3 Buttonsur users to download. However, CSS 3 is not fully compatible for all of the seven popular Web browsers previously mentioned. Opera 10.0 and lower, for example, cannot implement features such as rounded corners and using images for borders. Internet Explorer versions 8 and older are incompatible with CSS 3 altogether.

This does not mean that you shouldn’t use CSS 3 features. One of the great features with CSS is that any time a Web browser does not understand a line of code you have written it simply ignores that line and continues on through the list. With that in mind, you want to check your work in all Web browsers to see how it is being displayed. There may be features, such as rounded corners for buttons, that look fine whether or not the Web browser rounds the corners or keeps them rectangular. But there may be times when the absence of CSS 3 compatibility creates serious flaws in your Web page’s layout or readability, so you should be aware of which browsers can support these features and which ones cannot.

Tip 5: Save Your CSS as a Separate File

While it can be convenient to write your CSS in <style> tags in the HTML code of your Web page, it is highly recommended that you save your CSS styles in a separate file with a “.css” file suffix and reference that file in your HTML instead. Housing your CSS code within your HTML prevents you from using that CSS on other Web pages.

By saving your CSS files separately, you can reference that file to any Web page you choose on your website. In addition, making changes to your CSS requires one edit instead of multiple edits for each page. Say you decide that you want all of your links to be in green text instead of blue text, for example. Edit the CSS code in your separate “.css” file once and the changes will apply instantly across your entire website.

Tip 6: Create Your Desktop Screen CSS before Your Print CSS

Within your HTML files, you can specify which CSS files you would like to display for desktop screens, mobile screens and printed materials. If you do not specify each of these, your Web browser will use your screen CSS reference file by default.

Because of this, it is best practice to create your desktop screen CSS first and then duplicate the file to make edits for the other CSS types.

More often than not, creating a print CSS file consists of removing properties that you have implemented in your screen CSS file. Properties such as background images and colors, borders, advertisements and navigation menus should be removed from your print CSS file. You want to simplify your print style so that it prints neatly on a page and does not use lots of ink. The easiest way to make these changes is to save a copy of your default CSS and rename it to “print.css.” Now you can simply remove the unwanted properties your “print.css” file to quickly optimize your Web pages for printing. This method of creating print CSS files is much faster and more efficient than starting an entirely new CSS file from scratch and copying code from your default CSS file.

Tip 7: Make Friends with White Space

One of the great advantages of writing CSS is that you can fully embrace the space bar. Barring a few exceptions, you can add as many spaces as you need in order to make sure your code is fully legible. Other programmers will thank you for making such neat and organized code, should they ever need to go in and make edits for you. Which of the following would you rather read when adding a new CSS property?

Using white space in code

Some would argue that you need to minimize your use of white space to keep your CSS files’ sizes as low as possible. While this may be great practice for other languages such as Javascript or PHP, CSS files typically are not as large, and the amount of file size you will be saving is minimal. So go ahead and put that space bar to work.

Tip 8: Help Others Read your CSS by Using Comments

CSS allows you another way to make friends with your fellow Web developers, and that is by giving you a way to add comments to your CSS files. This is a great way of organizing your CSS code and communicating to other developers where the code is being used on pages and what it is used for.

Code Comments

The example above shows how adding comments can help you, and other Web developers, quickly locate properties for elements on your Web page. If this snippet of code was buried among hundreds of lines of code in your CSS file, finding the properties for your navigation links without helpful comments could take quite a while.

Tip 9: Manually Code your CSS for Great Practice

One of the many features used in premium Web development applications like Adobe Dreamweaver is the ability to select the CSS properties you would like to use and have the application generate the code. While this option is convenient, it takes away from your practice in reading and understanding CSS code. In situations where your premium application is not available and you need to make a change in a hurry, having the practice of entering your code manually will come in handy and help reduce the amount of time it takes to research and fix your coding errors.

Tip 10: Use the Internet as a Reference Guide for Code Snippets

The most important part of learning CSS is using the correct syntax—when to use a period instead of a hash mark, when to use colons and semicolons and so on. Once you have mastered the syntax rules of CSS, you can search online for any CSS property you would like to implement into your work.

Your main resource for finding information on CSS is a familiar one: Google. Figuring out how to adjust the visual styles of your work is as simple as searching for it. If you would like to know how to add rounded corners to your navigation menu, simply ask Google, “How do I create rounded corners in CSS?” You will typically find the answer among the first few search results.

If you are looking for a more structured repository for CSS programming, check out http://www.w3schools.com. This website is dedicated to tips and techniques for not only CSS, but for a wide range of Web developing languages, such as HTML5, Javascript and PHP. W3schools.com also includes quizzes to test your knowledge in CSS and a live editor to try your code out before adding it to your CSS file. You can take a linear route of training by using their step-by-step tutorials, or simply searching the site for a particular question if you are just looking for something specific. Either way, w3schools.com is a great resource for sharpening your CSS skills and nearly any other Web developing skill you seek to master.

Additional Tips, Courtesy of CSS Expert Rose Cox

Rose Cox, a Web developer at ARUP Laboratories in Salt Lake City, has more than 10 years of CSS developing experience. I had the opportunity to ask her for some CSS advice and she was kind enough to offer the following tips, which I will paraphrase below.

Embrace Search and Replace

Using the search and replace feature found in most of the applications mentioned can save you hours of time fixing errors in your code. For example, say you have been using the padding property to align and space the elements of your Web page, and you now realize that using the margin property would be more appropriate. You could go through hundreds of lines of code and swap out the word “padding” with “margin” one at a time, or you could accomplish the same task in seconds using search and replace. Simply open the search and replace dialog box, tell it to replace all instances of the word “padding” with the word “margin,” and click the “Replace All” button. Within seconds, every instance of the padding property will now be updated to the margin property.

Use search and replace with caution, however, as lacking detail in search and replace can make your code an even bigger mess. Note that the previous example will also change properties such as “padding-left” and “padding-bottom” to “margin-left” and “margin-bottom.” If you meant to only change the “padding” property, you will have a lot of unwanted property changes to revert back to. To avoid this problem when using search and replace, search for “padding:” and replace it with “margin:” instead. This will trick the application to ignore any instance of a padding property with a hyphenated name.

Simplify Internet Explorer Troubleshooting with IE Tester

IE Tester is an Internet Explorer emulator, where you can run copies of Internet Explorer 5 through 9 all in one convenient program. This is a great way to consolidate your Web browser installations, since Internet Explorer is just one of five platforms recommended to install for testing your work. IE Tester includes a handy feature where it will automatically open one URL in all versions of Internet Explorer, displayed in a tabular format much like the tabbed browsing feature found in Mozilla Firefox and Google Chrome.

Download IE Tester

Create a Repository of Your Own Code

Resolving layout and other styling issues in CSS can be tedious at times, so when you do find the answers to your problems, make a permanent note of the code for future reference. A personal repository of your own CSS styles can save you the time and effort of manually typing the same snippets of code over and over. Your repository document can be anything from a plain text file with pasted code snippets to detailed Word documents with organized styles and resolutions—the choice is yours!

Having a code repository handy gives you the ability to copy and paste your favorite and most commonly used code snippets into any future project. You can set up your own template to reset all CSS styles implemented by default in each Web browser, and use that template each time you start a new project by simply copying and pasting the code from your repository. This will save you hours of time manually coding each new site, and prevent any syntax errors along the way so that you can feel confident that the code you have added is already tested and verified to work properly.

It’s Time to Go Forth and Put Your New CSS Skills to Work

Mastering the art of CSS styling is a necessity when creating Web content. Creating appropriate and visually appealing Web pages can put you a step ahead of the competition. Like any other skill, programming for the Web cannot be mastered over night. It takes practice—hours of practice.

You are now equipped with the tools necessary to venture into the world of styling for the Web! Using the tips and tricks provided will help you fine-tune your CSS styling skills, save them for later and assist you in learning new CSS skills for future projects. Most of all, you can accomplish everything in this article for free. Whether you are new to the world of CSS or a seasoned veteran, the resources provided here will help you continue to grow your knowledge of this skill and prepare you for making a mark in the digital world.

CSS References

Blessing, K. (n.d.). Avoiding CSS Hacks for Internet Explorer. 24 Ways. Retrieved July 1, 2012, from http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer

CSS3 Previews (n.d.). CSS3.info. Retrieved July 1, 2012, from http://www.css3.info/preview/

CSS Properties (n.d.). W3 Schools. Retrieved July 1, 2012, from http://www.w3schools.com/cssref/default.asp

Kalski, L. (n.d.). 70 Must See CSS3 Tips, Tricks And Tutorials. Stylish Web Designer. Retrieved July 1, 2012, from http://stylishwebdesigner.com/70-must-see-css3-tips-tricks-and-tutorials/

Smashing Editorial (2012, June 21). Powerful New CSS- and Javascript Techniques. Smashing Magazine. Retrieved July 1, 2012, from http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s