Web Developer Plus » CSS

Tips to Write Better CSS Code

Satbir — Wed, 04 Nov 2009 07:34:46 +0000

CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code.

1. Don’t Use Global Reset

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good

*{ margin:0; padding:0; }

Better

html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.
For example, using the below lines of code within your tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.
Not Good

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

Not Good

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.
Not Good

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Better

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.
Here is a sample organization that you may use:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Generic Classes
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Make CSS Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
	Each Style on new line
	---------------------*/
div{
	background-color:#3399cc;
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	All Styles on one line
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments

Comments can be used to separate different sections of CSS code

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div{
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Use External Stylesheets

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.
Not Good

OR

Better

12. Split CSS into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.

15 Ways to Improve CSS Techniques Using jQuery

Satbir — Tue, 20 Oct 2009 01:36:37 +0000

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques.

1. Custom Styled Radio Buttons and Checkboxes

It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them:

Custom Designed Checkbox and Radio Buttons

Radio Button and Checkbox replacement.

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the equalHeights plugin. With this plugin, you can make equal height columns with just a single line of code.

$("someselector").equalHeights();

3. Styling Select Elements


	Username
		
	
	


p label{
	width:100px;
	float:left;
	margin-right:10px;
	text-align:right;
}

23. Set a Consistent Base Font Size
Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.
body{ font-size:62.5%; }

24. Highlight Acronym and Abbr Tags
acronym and abbr tags provide useful information to users, browsers and search engines about acronyms and abbreviations, but most of the browsers except Firefox do not highlight them. Here’s the CSS trick to highlight acronym and abbr tags within your web page.
acronym, abbr{
	border-bottom:1px dotted #333;
	cursor:help;
}

25. CSS Reset by Eric Meyer
This piece of CSS code resets all the browser default styles preventing any browser inconsistencies in your CSS styles.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Related posts:

21 Amazing CSS Techniques You Should Know
15 Ways to Improve CSS Techniques Using jQuery
CSS Tooltip Box Without Images



21 Amazing CSS Techniques You Should Know
Satbir — Thu, 30 Jul 2009 08:16:51 +0000
Cascading Style Sheets(CSS) is one of the building blocks of modern web design without which websites would have been ugly just like they were a decade ago. With time, the quality of CSS tutorials out there on the web has increased considerably. Here are 21 amazing CSS Techniques that you might not have thought could be done by CSS.
1. Cross Browser CSS SlideShow

Amazing demonstration of how to create a cross browser image gallery  using just CSS.
2. CSS Based Image Maps

This tutorial demonstrates a crazy way to create an image map using just CSS.
3. No JavaScript LightBox Using CSS

Create a lighbox using just CSS with no JavaScript required.
4. Image Replacement for Buttons

Replace the submit buttons with images using CSS, degrades back to submit button if CSS is disabled.
5. Animated Navigation Menu using CSS

Amazing tutorial on how to create an animated navigation menu using just CSS.
6. Tree Like Navigation Using CSS

Create a tree like navigation from nested lists of links. Very useful for creating sitemaps.
7. CSS Gradient Text Effect

Create eye-catching titles with nice gradient effect using just CSS.
8. CSS Menu List Design

Very easy to understand tutorial on how to create a menu list using either CSS border-style or background-image property.
9. Creating Liquid Layouts With Negative Margins

Amazing way to create a liquid layout using negative margins
10. Making Your Footer Stay Put With CSS
This might occur to you some time when a content page has not enough content to fill the page, so footer also moves up due to this. This tutorial shows you how to deal with this and make footer stay at bottom even when content is not enough.
11. Simple, Scalable CSS Based BreadCrumbs

Create a nice scalable breadcrumb navigation
12. Snazzy Pullquotes for Your Blog

Make the blockquotes in your content or blog posts standout from rest of content. Very useful to highlight major points in long content pages.
13. CSS Stacked Bar Graphs

Display graphs on your website using just CSS without any JavaScript or other heavy plugins.
14. How To Create a Block Hover Effect For List of Links

15. Multi-Column Lists

This article shows all possible ways you can use to stack up an unordered list into multiple columns.
16. Date Display Technique with Sprites

If you have ever visited Learning jQuery then you might have noticed the awesome date display next to each blog post. This tutorial will show you how to achieve that using CSS Sprites.
17. Date Badges and Comment Bubbles for your Blog

Display date and comments on your blog posts in a nice way that takes less space.
18. How To Build a CSS Image Viewer The Clever Way

Create a nice image viewer using CSS that will work even if user has disabled flash and JavaScript in the browser.
19. Creating a CSS Image Preloader
Use the CSS background-image property to preload images without any javascript required.
20. Fade Out The Bottom of Pages

This tutorial shows you how to make page content fade away into the bottom of the page just like the fortuito.us blog.
21.  Creative and Cool Uses of the CSS Border Property

This article shows you how the CSS Border property can be used to achieve some cool effects. You’ll be surprised to know how cool the CSS Border property is.
Related posts:

15 Ways to Improve CSS Techniques Using jQuery
30+ Fresh & Amazing jQuery Plugins & Tutorials
25 Amazing & Free Flash Based Image Galleries



CSS Tooltip Box Without Images
Satbir — Mon, 09 Mar 2009 14:34:55 +0000


The tooltip boxes you see on many websites are though created using background images but there’s another way out using just CSS  without requiring any background images. To create the tooltip box, create one outer div that encapsulates the information and the pointer div.
Here’s the html code you need to use:

Tooltip content goes here...





Now we need to absolutely or relatively position the tooltip div so that we can control the position of pointers in the div. The pointer div acts as outer body of pointer and inner-pointer acts as inner body. Both these div are sizeless but have border. The transparent border property is used to form the pointer shapes.
You can match the border-color of inner pointer to that of tooltip div background color and pointer div to that of border color to get a uniform look of the pointer.
Here’s the CSS to use:


You can play with different border style and positioning of the pointer div to control the look of your tooltip box.

Without any use of images, these tooltip boxes will be easy on bandwidth and will load faster.
No related posts.


Text Shadow Property in CSS3
Satbir — Sat, 07 Mar 2009 15:03:57 +0000
With CSS3, creating nice looking titles or headers won’t require Photoshop as it includes a nice text-shadow property to create text-shadows with just a single line of code. To apply text shadow onto an element, add this CSS property in its style definition.
text-shadow: 3px 3px 4px #999;
The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.
For example,
This text will show a drop shadow in Safari, Opera or other supported browsers.
Here first two values are offset of shadow from original text corresponding to right and top offset respectively while third numeric value is the amount of blur radius that causes pixels of the shadow text to stretch by the specified amount.
Positive values for right and top offset will position your shadow to right and bottom while negative values will change it accordingly. 
 
You can play with offset and blur values to create really nice looking text effects just with CSS. If you have been using this property for a while and created some really nice looking effects, let us know in comments below.
No related posts.