By Jeremy Davis

It’s been said that the key to a civilization’s success is mastery of the food system. Unless a group of people can effectively control the basic needs for survival, they will never achieve greatness. Likewise, before CSS skills can be expanded to an advanced level, the basics must become instinct to any CSS coder. Develop these habits and you lay a solid foundation to apply advanced CSS techniques.

1. Use a Reset Stylesheet

This habit (along with a few others) is one frequently mentioned as a CSS best practice. The goal of a reset stylesheet is to reduce inconsistencies among browsers by explicitly setting styles to most of the HTML elements. This ensures that things like font sizes and line heights all render the same on different browsers. Also, the reset clears the default paddings/margins that some browsers have.

Not only does having a reset stylesheet account for browser inconsistencies, it’s good to use them to give each site a known foundation when coding. Keeping the foundation the same for all sites will speed along the development.

The reset from Eric Meyer and the Yahoo reset are the most comment resets used. Futher customizing one of those resets might be needed to accomodate for specific website needs.

2. Use CSS Shorthand

Using shorthand CSS declarations will lead to quicker coding and debugging. It might also save some errors from mistyping multiple declarations.

When a rule has multiple similiar declarations for a single selector, such as

border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;

they can be combined into one line, such as

border: 5px 10px 15px 20px;

The trick to remember which position controls which direction is TRouBLe: Top, Right, Bottom, Left.

The main declarations that use shorthand for are border, margin, padding and background.

Bonus: Hex Shortcut

Six hexidecimal digits used for CSS colors can be condensed down to three if they are grouped in identical pairs.

For example, #FFFFFF can be written #FFF, or #990055 can be written #905, but #F091A4 cannot be shortened since the pairs aren’t identical.

3. Document Your CSS … As You Go

Going back and commenting code is one of those quixotic things that most fool themselves into thinking they will do. Get in the habit of making good commenting practices while writing styles.

To add a comment in CSS it’s as simple as putting /* Your Comment Here */

Things to comment

Stylesheet Header
This comment briefly states what the stylesheet is for, who wrote it and when. A table of contents might also be needed for larger stylesheets.

Code sections
Put a comment header above large portions of code for things like global styles, headers, sidebars, main content and footer to help delineate them.

For example,

/****************************************/
/*             Sidebar                  */
/****************************************/

Problem declarations
Put comments next to declarations that have know issues in certain browsers, such as

input[type=textbox] /* IE6 Problem */ 

Dependent declarations
Put comments next to things that are dependant on other areas. So if there is a fixed height on a declaration that might need to be adjusted if the content changes, put a small comment next to it, stating what conditions must happen before it will need to adjust.

4. Add a Color Legend

When working on smaller CSS files, keeping track of color hex values isn’t too hard. But as stylesheets start getting 2000+ lines it becomes significantly harder to keep track of which value is for which color. Adding a color legend helps ensure that the wrong colors don’t get used.

The best place for the legend is up in the stylesheet header, underneath all of the other documention.

For example,

/*
/* light blue: #4595be
/* dark blue: #367595
/* special link red: #9F1212
********************************/

5. Remember Where Absolutely Positioned Elements are Relative To

Positioning elements absolutely is something that tends to frighten some CSS beginners, but there is one principle to remember with this declaration that solves most of the trouble.

When a selector has a postition: absolute declaration the webpage is treated like a xy grid. By default, the 0,0 position of the grid is at the very top and left position on the webpage. So by moving the absolutely positioned element to the left 10 pixels and from the top 20 pixels, it’s starting from the top left of the webpage, regardless of where the element sits in the HTML.

That is not usually the desired functionality. What usually is desired is to have the element positioned relative to the selector’s parent or another containing element. To do that simply add position: relative to the desired relative container element. Doing that remaps the 0,0 position on the xy grid from the top of the webpage to the top left of the containing element.

The example below demonstrates how the red box gets positioned differenlty depending on whether the blue container has position: relative or not.

Remembering position: relative should ease most frustrations caused by basic absolute positioning.

6. Avoid Using CSS Hacks

Unfortunately for web designers, there are bugs in some browsers, mainly IE6 and IE7, that cause some styles not to display as they are supposed to in accordance with CSS specifications. In order to combate these inconsistencies, some people write erroneous declarations, hacks, that take advantage of these browser flaws in order to do things, such as hide styles from particular browsers

There are many fancifully named hacks for all the equally fancifully named CSS bugs, but using them can cause problems. Not only do hacks clutter the stylesheet with oddball declarations, it also keeps the stylesheet from validating.

Also, hacks tend to introduce more problems overtime as new browsers are released.

Instead, use conditional stylesheets to target specific browsers.

7. Use Margins When Styling Layouts

Although this habit isn’t one often mentioned, it’s one that helps maintain a consistent layout among different browsers without having to add more declarations to get them all in sync.

The main idea is that instead of adding padding to a container element, add margin to the container’s children to get the same result.

So, instead of

#main-content { padding-left: 10px }

add

#main-content { }
#main-content #left-column { margin-left: 10px }

Although there is nothing particularly wrong with using padding, in my years of building websites I have had consistenly fewer cross-browser problems when I stick with styling layouts with margin.

8. Contain Floats

When floating an element, add overflow: hidden to its containing element.

A common example is,

ul {
	overflow: hidden;
}

ul li {
	float: left;
}

If the container didn’t have overflow:hidden issues arise when setting margins or borders to it. This also clears the float so that elements below it can flow properly in the HTML structure.

Some suggest doing the clear in HTML by adding

<div style="clear:both"></div>

below the floated element, but doing that defeats the purpose of separating a webpage’s style and structure.

It’s also more time consuming than adding overflow: hidden.

9. Add display: inline To Floated Elements

This habit is one that fixes a IE6 problem called the double-margin bug without having to use a CSS hack. On floated elements, IE6 doubles the margin of the element. So a margin of 10px becomes 20px.

It’s easy to imagine the havoc an error like this can cause to a layout. Some of the floated items either become hidden or they push everything below it down.

Even though IE6 is on its way out and a majority of designers aren’t taking the time to get sites looking perfect in IE6, this is a quick habit to learn to make a site better viewed for those poor people still on IE6.

Just get in the habit of adding

display: inline /* IE6 Problem */

every time something is floated.

10. Get Comfortable with Sprites

Sprites mask the viewable space of a larger image, then when an event occurs, typically a :hover event, the viewable space of the image changes to show another portion of the image.

Not only are sprites more efficient by requiring fewer HTTP calls for images, but they add more polish to website designs. Most often sprites are used to create stylish navigation menus.

Using sprites in a design might take a bit of trial and error to get the hang of it, but it’s such a valuable skill to have that it’s worth the effort required to get the concept down

Further Reading

• The Mystery of CSS Sprites: Techniques, Tools and Tutorials

11. Have a Consistent File Structure

Take the time to create and organize all of the typical files used for a typcial website development project. Create one master template file structure and copy/paste it every time a website needs to be built.

My organization is as follows:

The ‘Website Name’ folder gets renamed to the website name that I’m about to begin work on. That folder contains all of my HTML files for the site, along with the ‘assets’ and ‘styles’ folders.

The ‘assets’ folder typically holds larger document files like PDFs that might need to be downloaded from the site. I also keep editible versions of images I’m using, such as PSDs or Fireworks PNGs, in case I need to modify something.

The ‘styles’ folder is broken into the three subfolders: css, images, javascript.

• css – holds all the css files, such as reset.css, layout.css and main.css
• images – holds all the images for the site
• javascript – holds javascript libraries, plugins and main.js

I use this file structure for most of my webpages and because I’m consistent I know exactly what paths to use when needing to do things, such as put a background image in my CSS.

Some might disagree with my structure, such as having javascript under ‘styles’, but the main point is find a file organization that works for you and get in the habit of consistently using it to make coding faster and more accurate.

12. Indent Your Styles

Adding indentation to a stylesheet can keep complicated stylesheets looking clean and make finding areas of code easier. Add indents to show a parent/child hierarchy.

13. Use Pixels for Font Sizes, Not Ems

This habit is usually a hot button topic with most people having a strong opinion for either fixed font sizes or relative ones.

In hopes to curtail a probably backlack, let me plainly state, “Using a fixed font size, like pixels, leads to fewer CSS frustrations than using a relative font size, such as ems or %.”

In his article Coding Like It’s 1999, Cameron Moll petitions for pixels and says,

The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units

Relative font sizes were a good idea a few years ago so that people with different browser font sizes could have a site’s content adjust to their browser’s font size. But now most browsers can zoom and adjust more intelligently so a relative measurement isn’t neeed for that purpose anymore.

Relative measurement becomes a problem because the font sizes inherit the parent’s measurement as it cascades down.

For example, body { font-size: 62.5% } makes a font-size: 1em declaration equal to 10px.

If #blog-content needs to be 14px, the rule is

#blog-content { font-size: 1.4em; }

Now the if the H3 tag inside of #blog-content needs to be 20 pixels, one might assume

#blog-content { font-size: 1.4em; }
#blog-content h3 { font-size: 2.0em }

would be right, but that’s where the relativity problem occurs. Because that 2.0em is now relative to the 1.4em specified on #blog-content, so it is actually font size of 28px.

Keeping up with relative font sizing can get confusing. Stick to using a fixed unit of measure for font sizes to prevent undue troubles.

14. Limit Pseudo Classes to Anchor Tags

Most modern browsers don’t struggle with this problem, but it is an important one to remember if a website still needs to be viewable on older browsers, such as IE6.

The problem is that older browsers only recognize pseduo classes, like :hover, on the anchor tag element, a.

So something like

#header ul li:hover { background-color: #900 }

won’t work in IE6.

This issue could cause real functionality problems, if things like dropdown menus are to appear based on the li:hover event. People viewing the site on IE6 would never see the dropdown and thus, might have a hard time navigating the site.

A solution is to use jQuery for those types of effects.

15. Avoid Selector Issues

Be sure selectors have enough weight to prevent unwanted cascades.

The way the browser determines what style is to be applied to an element with multiple declarations is determined by its specificity

The more specified a CSS selector is the more weight that rule carries. The rule with the heaviest weight is the one that gets applied to the element

If some rules are being applied as desired, check to see if the problem is with its specificity. It might be as simple of a solution as adding an #id-name to the beginning of the selector.

Use element selectors when possible.

Instead of

main-content .main-header

use

#main-content h1

Be careful when grouping selectors.

Grouping selectors can be a time-saving method when dealing with non-relative declarations, like

.main-content div, .main-content p {
	color: #000;
}

But it can cause trouble when using a relative declaration, such as

.main-content div, .main-content p {
	line-height: 1.3em;
}

Because now all of the text within the div gets a 1.3em line-height applied to it, but now any p elements within a div get an additional 1.3em added to them.

Also, sometimes grouping multiple selectors can add more weight to them than is desired, which in turns causes other desired styles not to take place.

* Write Better HTML

Bonus Tip! A great way to become a better CSS coder is to improve your HTML coding.

Avoid div-itis by wrapping divs around everything. Learn to style the elements with element selectors, such as h1, ul and p.

Use a proper DOCTYPE to avoid sending browsers into quirks mode.

Try to code as much HTML as possible before adding any styles. Doing this brings more thought to the overall structure of the webpage and causes syntax problems to be spotted and fixed instead of covering them up with styles.

Further Resources

Here are some articles that further explain some of the basics CSS principles mentioned here.

• 7 Principles of Clean and Optimized CSS Code
• The Mystery of CSS Sprites: Techniques, Tools and Tutorials
• Mastering CSS Coding: Getting Started
• Powerful CSS Techniques for Effective Coding
• 53 CSS Techniques You Couldn’t Live Without

About the author

Jeremy Davis is a recent college graduate working as a designer and front-end developer for a public school system. He (in)frequently blogs about web design, web development and technology on his personal blog. He is also *currently accepting more Twitter followers.

*offer ends soon, act fast.

  

By Tim Wright and TJ Kelly

CSS is the best thing to happen to the web since Tim Berners-Lee. It’s simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and they’ll tell you that the majority of their code headaches are caused and ultimately solved by CSS.

All designers at some point in their career go through the process of encountering a weird display issue, searching for a resolution, and discovering a trick, technique, or hack could have saved them hours of frustration—if they had only known when they started.

We’ve put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, their solutions (along with examples and further resources). I hope this list will help you save some gray hairs. As for me, I think I feel some coming in right now…

Resets & Browser Inconsistencies

Not all browsers are created equal. In fact, every browser is different. What is the default margin, padding, or font-size of a <p> element? You might be surprised at the wide range of values. To handle the differences between browsers, many of us want to level the playing field and start from scratch, by using CSS reset styles.

The early stages of resets, designers dealt with differing margin and padding values, using a global reset:

* { margin: 0; padding: 0; }

But, as more people used and discussed resets, it became clear that resetting only margin & padding wasn’t enough (and, applying the above rule to every element is taxing on the rendering engine). Thanks to the work of Eric Meyer and other CSS pioneers, a better, more complete collection of reset rules was created:

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	line-height: 1;
	color: black;
	background: white;
	}
ol, ul {
	list-style: none;
	}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

As important as it is to note which elements are included in the most popular CSS reset available today .It’s also important to note some of the elements that are deliberately excluded from this list:

• input
• button
• hr

These elements were excluded because their cross-browser differences are so vast that you would have to completely unstyle them to create a "bulletproof" element. They’re so weird, that even then, there’s no guarantee.

Resources for Resets

• Eric Meyer’s Resets and the reasoning behind them
• Smashing article: “Design from Scratch”
• Google BluePrint CSS & Resets
• Yahoo YUI CSS Resets

Box Model — Margin, Padding & Borders

The box model is the basis for all layouts. It governs the dimensions & spacing of the elements on a page. To understand it, we have to understand the difference between block-level elements and inline elements.

Block-level elements, by default, take up the entire width of their containing element and the height of the default line-height. They will stack up underneath each other, top-to-bottom. Therefore, by default, they will take up their own line on a page. Some block-level elements are: <div>, <pre>, <p>, <ul>, <ol>, <li>, etc.

Inline elements are, just as their name implies, in-line. They will stack up next to each other, left-to-right. When given content, they will take up the exact width and height of that content. Given no content, they will collapse down and have no width or height. Some in-line elements are: <img>, <em>, <strong>, <a>, <span>, etc.

All HTML block-level elements have five spacing properties: height, width, margin, padding, and border (inline elements have them too, they just work a bit differently). Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

In the example below, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
  margin:30px;
  border:30px solid yellow;
  padding:30px;
  width:80px;
  height:80px;
}

Extras

1. All of the examples and rules we’re discussed for the width property also apply to height.
2. margin can support negative values. Use them cautiously but they can prove to be very strong design elements.
3. Don’t forget the units with the box model. Only a zero-value (margin:0;) can be written without a unit specified.

Resources for CSS Box Model

• W3C CSS Specifications
• HTMLsource Box Model tutorial by Ross Shannon
• “Beginner’s Guide to Margins and Paddings” at Web Designer Notebook

Dimensions — Width, Height, Min & Max

Now that we understand how to use width and height in unison with the box model, let’s look at some of the flexibility of CSS dimensions. Modern browsers support min- and max-width (and the same for height), allowing us to get creative with dimensions and create flexible layouts.

Width/height specify the space an object should occupy. They can be measured in pixels (10px), ems (10em) and percentages (10%), as well as a few other units. Defining a width or height for an element will force that element to keep those dimensions, regardless of the content inside it. So, if our content is too big for its container, it will be cut off, hiding the bottom of our content (or just look really messed up).

Min-width & min-height

Giving an element a min-width or min-height will set the element to our exact dimension by default. But, since we only provided a minimum dimension, as the content grows, the containing element will allowed to stretch and all of our content will remain visible.

Min-width & min-height can he useful for form elements like <input /> and <textarea>. We can define them with a minimum width/height and let them expand as the user types.

In IE6, "height" acts the same way "min-height" does in modern browsers as a container will grow with content (something to be aware of when using building for IE6).

Max-width & max-height

If we give an element a max-width or max-height, it will collapse down to the size of our content by default. As our content grows, the container will stretch—until it reaches our maximum. Then our remaining content will be cut off or look really weird hanging of the bottom of a content block.

Max-width & max-height can be useful for browsing long lists (if you correctly manage your overflow – create scrolling if the list goes too long).

Using Max & Min width in IE6

Min & Max width are both great tools to have in your design arsenal, but unfortunately they don’t work in IE6, so what do we do? We usually lock down the width of our site instead of creating the ideal fluid layout we want, sacrificing user experience for out of date browsers.

Luckily, we can use a short JavaScript command targetting IE to accomplish a nice fluid layout with max & min widths in IE6:

#page-wrap{
min-width:800px;
max-width:1000px;
width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}

In the above example, you can see that the smallest width for this page is 800px, and the largest is 1000px; not much of a flex, but the concept can be applied to any element.

And if you only wanted to use min-width:

#page-wrap{
min-width:800px;
width:expression(document.body.clientWidth < 800? "800px": "auto" );
} 

Resources for dimensions

• Top 10 CSS Tricks from SitePoint
• Cross Browser Min-height
• Min-width for Internet Explorer
• CSS Dimension Properties

Floats & Clearing

A float will place an element outside the normal flow of elements and moves the element right or left until it reaches the margin or padding of another block-level element. Float and clear are some of the most powerful—and the most misunderstood—properties in CSS. To understand it, we must refer back to block-level vs. inline elements.

Applying float to an element will automatically make it a block-level element. This means two things: 1) by default, all floated elements (even <span> and <strong>) will behave like block-level elements, 2) Giving an element both float:left; and display:block; is redundant and unnecessary. Also, using display:inline on a floated image is actually a very popular method of fixing many cross-browser quirks.

Floating a div to clear a div

Floating a div to clear a div is one of those things you stumble upon with some experimenting and frustration. What basically happens is that you can apply a float to a parent element that contains other floated elements and they will all equalize and clear properly:

HTML

<div class="parent-element">
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
</div><!--/.parent-element-->

CSS

.floating-element   { float:left;width:33%; }
.parent-element     { float:left; }

And, of course you’ll need some content in there to fill out the divs.

There are a lot of clearing techniques you can use to clear floated divs. Some require extra markup, some don’t work in IE 6 and some are great, but don’t apply to every situation. What did I wish I knew about clearing floats when I started? Everything.

Resources for clear and float

• CSS Float Theory
• CSS Float Property
• Clearing Floats
• Using Floats for Layout

Conditional Comments

Back in 2004, when I really got into full-time Web design I used a lot of IE hacks and techniques to patch together sites in an attempt to achieve some level of cross browser compatibility. This can cause very bloated and slow loading style sheets. Everyone was doing it, heck, there were even articles about how to best organize your IE hacks.

Little by little the design community discovered a hidden gem buried within the functionality of the Triton rendering engine (Internet Explorer). You could use IE specific HTML to target specific versions of the browser and then load a special style sheet just to deal with those issues.

<!--[if IE]>
Target all versions of IE
<![endif]-->

<!--[if lte IE 7]>
Target all versions of IE that are less than or equal to "7"
<![endif]-->

<!--[if IE 6]>
Target IE 6
<![endif]-->

Using conditional comments to target IE and cut out your hacks, will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

Resources for Conditional Comments

• Conditional Comments
• How to: CSS Conditional Comments
• About Conditional Comments from Microsoft

Overflow & Zoom

Like many designers, if there’s time to be wasted on a project, it usually gets wasted dealing with IE 6 and some of it’s weirder quirks. This is where overflow and zoom have helped me a great deal.

Overflow

Many-a-times when I’ve encountered a serious layout issue, a simple application of overflow:hidden on the offensive div would solve the problem. It’s difficult to pin point specific issues for this, but it can happen in any browser (I just had it happen in Safari a couple weeks ago) and the overflow property can provide a quick solution to your cross browser woes.

Zoom

To my surprise, the zoom property is not very well know, but a very powerful tool in dealing with cross browser issues; particularly IE 6/7. Zoom is a proprietary IE property that actually does effect the zoom level of a page (if you set the zoom to 2 you’ll see everything get bigger). As a site effect it also triggers hasLayout on the offending element, and fixes a lot of layout issues. Try it out, it actually saves a lot of time.

body { zoom:1; }

Since hasLayout won’t trigger in any other browser, it’s generally thought to be safe to put zoom in your main style sheet, but it you’re doing IE specific work anyway, I’d advise putting it in with the rest of the IE CSS just in case there are any problems in the future, "future proofing".

Resources for Overflow & Zoom

• Web Master World Forum
• The Power of Zoom
• About Overflow from QuirksMode

When CSS isn’t the Answer

Believe it or not, CSS is not always the answer. Especially now when we live on a Web that is in the middle of the biggest browser war to date. Sometimes CSS just doesn’t do everything we want on as many platforms as we need it to.

Spending hours searching for a CSS solution to a non-critical element that can be easily fixed with JavaScript usually just isn’t worth it. Now that we have great libraries like jQuery readily available to us, anyone well versed in CSS can quickly pick up JavaScript. And let me tell you… if I new more about JavaScript when I started it would have saved me a lot of time and frustration.

Conclusion

There are a lot of little idiosyncrasies with CSS that you’ll encounter over time with experience and frustration, but we’re looking for ways to minimize that frustration. The best advice I can give someone in dealing with CSS is the same advice someone gave me when I was in college: go to class. If you read the blogs, keep up with all the information and learn everything you can you’ll save a lot of time when you do encounter the inevitable rendering problem. To be honest, half the battle is knowing what a bug is called so you can Google it.

But of course an article like this always poses the question: What do you YOU wish you knew when you started?

About the Author

Tim Wright is a web designer/developer and blogger. He has been an advocate for Web standards and accessibility since 2004. You can find more of his writing at CSSKarma or follow Tim on Twitter.

TJ Kelly is a web designer/developer from Boston, MA, USA. He specializes in UX/UI design, CSS/jQuery, WordPress, SEO, and Social Media. He’s passionate about W3C Web Standards, accessibility, and usability. Check out his blog and portfolio at www.tjkelly.com and follow TJ on Twitter.

  

By Paul Andrew

Learning CSS and how to use it effectively can be a reasonably easy thing to do for a beginning web developer. In the hands of a seasoned professional, CSS can be stretched and pushed it to its limits where it can seem complicated and yet perfect at the same time.

Being able to adapt to new ideas and different techniques, as well as seeking new solutions to old problems is part and parcel of being a web designer. And with the speed at which CSS development is constantly moving, keeping up with new developments can be challenging.

In this article, we’ll bring you up to date with the latest in CSS development through a collection of fresh CSS tutorials, techniques, and resources. We hope this extensive list will teach you something new, or else remind you of some methods you haven’t used for a while.

Menus, Buttons and Forms

Create a Button with Hover and Active States using CSS Sprites
Some designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it, or are just lazy. It’s a simple effect that improves usability by giving the user feedback as to what they’ve clicked on, and can add depth to a design.

CSS Absolute Positioning: Create A Fancy Link Block
Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block.

Simply-Buttons v2
Cross-browser, custom HTML <button> elements with inactive, active, and hover states.

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this post you will learn how to create a flexible vertically-positioned sliding panel that simulates a drawer effect. Normally, this technique would be used for a horizontally-positioned sliding panel that would push everything else down, but with this technique, the panel overlays the content.

Style a List with One Pixel
Using a one-pixel background image in CSS (repeat-x for a horizontal line, repeat-y for vertical, and repeat for a fill color) you’ll learn how to style a depth-chart looking unordered list.

Pushing Your Buttons With Practical CSS3
“Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.”

Multi-level Multi-column Multi Menus with pure CSS
Have you ever successfully built a multi-level, multi-column, multi-menu, light-weight, and cross browser menu or navigation with pure CSS and without JavaScript? This tutorial will teach you how.

Elegant Drop Menu with CSS only
If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution.

Create a Beautiful Dropdown Blogroll Without JavaScript
This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6.

Build a Simple Button with CSS Image Sprites
In this tutorial you’ll learn how to create a simple button using CSS sprites. The tutorial covers creation of the image in Photoshop and finishes with the coded example.

CSS3 Hover Tabs without JavaScript
Using some new CSS3 techniques you’ll learn how to create a basic tabbed content area that changes on hover using pure CSS

Use Pure CSS To Style a Web Form Dynamically
Form elements are normally styled by changing the border color or background color properties via CSS. This tutorial shows you how to style text field and textarea elements of varying widths with rounded-corner background images.

Horizontal Sub-nav with CSS & jQuery
In this tutorial, Soh Tanaka teaches you how to create an elegant horizontal sub-nav using CSS and a little jQuery for IE6 compatibility.

CSS3 Speech Bubble
Learn how to create a speech bubble with HTML and CSS3.

Create Nice Scalable CSS Based Breadcrumbs
This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list.

Fluid Searchbox
Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. In this tutorial you’ll learn how to create rounded corners using vendor-specific CSS3 techniques supported by Firefox and Safari.

Web Page Layout Techniques

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
This in-depth screencast tutorial is the third part of a series that demonstrates how to create an iPhone app web site. This tutorial demonstrates the final step: converting the Photoshop design into HTML and CSS.

How to Code a Clean Portfolio Design with jQuery Slider
This tutorial will teach you how to slice and code a web page from a Photoshop design, plus teach you how to implement a jQuery image slider.

Minimal and Modern Layout: PSD to XHTML/CSS Conversion
This is the second part of a two-part series of creating a minimal and modern website layout in Photoshop. The part focuses on converting the design to styled markup.

Create YouTube-like adaptable view using CSS and jQuery
Have you ever noticed the "change view" feature on YouTube that allows you to switch between normal and wide mode and thus expand/shrink the movie area? In this tutorial you’ll learn how to duplicate this feature using CSS and jQuery.

How to distribute elements horizontally using CSS
This article shows you how to resolve the problem of extra margin settings on first and last children that are distributed horizontally within a main container using CSS.

Sticky (Fixed) SideNav Layout with CSS
This tutorial teaches you how to build a frame-like fixed sidebar navigation menu that stays in place when the page is scrolled.

CSS: Design Out Of The Box
In this informative post, the author discusses a number of example website designs that break away from typical columned and boxed layout. The article includes a number of tips and best practices that can help designers accomplish a similar style.

5 Simple, But Useful CSS Properties
Another article from Web Designer Wall, this time discussing five well-supported, practical, but rarely-used, CSS properties

25 Incredibly Useful CSS Tricks You Should Know
This article describes 25 useful CSS tips and techniques to help you design great web interfaces.

11 Classic CSS Techniques Made Simple with CSS3
You shouldn't limit yourself to old techniques when there's a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll learn eleven different effects that can be achieved quite easily with CSS3 but would normally be quite time-consuming with standard CSS methods.

5 Rules To Write More Readable CSS Files
This article describes five practical rules that can help you write well-structured and more readable CSS files.

Text and Typography

6 Ways To Improve Your Web Typography
Because of the many options available, not to mention cross-browser differences, improving typography on the web is not always simple. In this post you’ll learn six different ways to improve typography on your web projects.

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

Images, Galleries and Sprites

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article is a summary of 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. Because the images aren’t literally cropped, the method is termed “Faux Image Cropping”.

Use CSS to build a map with hoverable regions
In this article you will learn how to how to build a map with hoverable regions, using CSS and a single image.

Date Display Technique with Sprites
This article on CSS-Tricks demonstrates how to display the date on WordPress blog posts using image sprites — the same method that’s used on the Learning jQuery website.

Building Faster Websites with CSS Sprites
In this tutorial you’ll learn how to take advantage of CSS sprites to greatly increase your website’s speed.

Perfect Full Page Background Image
Another technique from CSS-Tricks, this time demonstrating how to implement a full-page background image that fills the entire page, will scale the image as needed, retain image proportions, does not cause scrollbars, and is cross-browser compatible.

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Learn how to build an Apple-like slideshow gallery, similar to what Apple uses to showcase their products.

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be created by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. In this tutorial you’ll learn how to build a Polaroid photo gallery with a re-stacking hover effect using pure CSS.

Editable CSS3 Image Gallery
A screencast from CSS-Tricks that demonstrates how to create a fancy image gallery with some HTML5, CSS3, and jQuery. Works best in a WebKit browser.

Turn Your Images Into Polaroids with CSS3
In the first part of this tutorial you’ll create a grid of images that’s linked to a Flickr account. In the second part, you’ll spice it up by giving the images a pure CSS Polaroid effect.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is a comprehensive discussion of the technique of CSS image sprites, by Chris Coyier. The article has been recently updated to include more up-to-date information and methods.

Fresh CSS Frameworks

CSScaffold Framework
CSScaffold is a a new type of CSS Framework, built with PHP, that helps speed up your development time by doing the hard work for you. Its power lies in its ability to extend CSS and generate CSS found in other CSS frameworks.

xCSS – Object Oriented CSS Framework
xCSS is a lightweight framework, still in beta, that allows you to take advantage of an object-oriented workflow, which means a dramatic cut-down in development time through the use of variables and other handy features.

eCSStender.org
eCSStender is a JavaScript library that lets you write CSS without having to use browser-specific properties and hacks. Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, and custom font faces, all of which work in IE6.

Cross Browser Hacks, Fixes and Guides

Render alternate layouts in IE6 with only CSS
Although this may not be something you would do on a client project, this article shows you how to create an alternate layout IE6 users using CSS and a conditional comment.

Definitive Guide to Taming the IE6 Beast
A useful collection of IE6 hacks and fixes that will, as the title implies, help you tame the beast that is IE6.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
The author of this article 'has scoured the web' for resources and fixes for IE6 and put them all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6 on a regular basis.

ie6fixer
ie6fixer is a tool specifically designed to ease the pain of the IE6 CSS debugger. The tool was conceived to decrease the monkey work when starting an ie6 CSS fix file by applying a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It should fix 40-60% of all IE6 issues and problems, with just one click, outputting rough CSS that can be placed in a separate section and can be used as a solid start for debugging IE6 issues.

Useful CSS Resources

CSSG Collection: Free Comment Styles
Designing the dreaded comments section of a web page can be a pain. To help you with this, CSS Globe is giving away a collection of comment styles that you can use on your own projects to save you a lot of time and agony.

CSS 3 Cheat Sheet (PDF)
This printable CSS 3 Cheat Sheet (PDF), first published on SM in July 2009, offers a complete listing of all the properties, selector types, and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes.

Cascading Style Sheet Level 2 Visual Cheat Sheet
This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find, at a glance, everything you’re looking for.

CSS Specificity – Cheat Sheet
A common difficulty with CSS is determining what CSS rule will be applied on the page. This cheat sheet can help you better understand CSS specificity.

Best Web-Frameworks – Find and compare PHP, Ruby, Python, Java, JS and CSS Frameworks
This useful resource helps you compare almost all CSS, PHP, Ruby, Python, Java and JavaScript frameworks, so you can make the right choice for your project.

Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
This Visual Cheat Sheet will help you understand CSS behavior in the three commonly-used versions of Internet Explorer. It includes information on @rules, element selectors, attribute selectors, pseudo-classes, border and layout properties, and more.

SlickMap CSS – A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

CSS Basics
CSS Basics is divided into 18 chapters, covering all aspects of CSS, from CSS classes and IDs to the more difficult pseudo elements and positioning. CSS basics covers a wide range of information so it’s valuable for those learning the basics of CSS as well as experienced CSS developers. Each chapter is downloadable and printable and you also have the option to download the entire series in a single PDF file.

Further Reading

HTML, CSS, and Web Development Practices: Past, Present, and Future

CSS Best Practices for Modern Designs

Guidelines for Writing Accessible CSS

CSS Selectors – A Guide To The Common & The Rare

5 CSS3 Design Enhancements That You Can Use Today

Trick Out Your CSS With Server Side Code

About the author

Paul Andrew is a freelance web designer. He is chief admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(ll)

  

By Justin Johnson

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of Javascript). These features can help developers build new sites and applications as well as integrate new content into existing applications.

Unordered/Ordered Lists

Unorderd lists are recommened to be used with a list of items where order is irrelevant. With unordered lists (and all lists actually) the W3C discourage authors from using lists purely as a means of indenting text. This is a stylistic issue and is properly handled by style sheets.
Ordered lists on the other hand are encouraged to be used when order matters for the list elements, example: A cooking recipe or turn-by-turn directions. For the examples in this article it is possible to substitute an ol for a ul or vice-versa. That choice is left to your discretion.

In it’s simplest form an ordered list or unordered list (referred to going forward interchangably as ‘a list’) would contain similar markup to the following:

<!-- an unordered list example -->
<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

<!-- an ordered list example -->
<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

Examining the box model for a list reveals the following:

In short both ul’s and ol’s are considered block level elements, as are each one of their child li tags. As such we can apply margin and padding to both items on all four sides. In regards to the bullet point for ul’s (or the numeral for ol’s) a left margin will move both the bullet/numeral to the right as well as the text, while padding while increase the space between the bullet/numeral and the content of the li.

The Basics of Styling Lists

Styling a list to be used as it is intended, a list, is a fairly straightforward task. To replace the bullets in an ol with a sample graphic icon you could do something like the following:

HTML

<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

CSS

ul li{
	list-style:none; /* removes the default bullet */
	background: url(../images/icon-for-li.gif) no-repeat left center;
	/*adds a background image to the li*/
	padding-left: 10px
	/* this would be the width of the background image, plus a little more to space things out properly */
	}

Basic styling to the numbers of an ordered list is just as straightforward. Consider the following list and CSS.

<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

CSS

With the CSS we will change the font of the ol to change the font of the numerals, then we’ll target the a tags inside our li’s to change their font in order to give them
a different visual representation than the numerals.

ol{
	font-family: Georgia, "Times New Roman", serif;
	color: #ccc;
	font-size: 16px;
}
ol li a{
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
}

More Advanced Uses for List

Accessible-Image Tab Rollovers

While this is an older article, published in 2003, the information contained in it is very valuable. Dan Cedarholm of SimpleBits explains how to create an image based navigation with rollovers using only CSS, HTML and images. If you haven’t read this article before it’s definately worth reading. The code below is a summarized version, but Dan offer’s a full explanation of the code on his site SimpleBits

CSS

<ul id="nav">
<li id="thome"><a href="#">Home</li>
<li id="tservices"><a href="#">Our Services</li>
<li id="tabout"><a href="#">About Us</li>
&lt/ul>

HTML

#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(home.gif) top left no-repeat;
}
#tservices a  {
width: 40px;
background: url(services.gif) top left no-repeat;
}
#tabout a  {
width: 40px;
background: url(about.gif) top left no-repeat;
}

Examples

Note that some of these examples use a modified version of this technique in which one large image (aka an image sprite) is used instead of individual graphics for each nav item.

Pat Rogers Harley Davidson

Fast Company

NBC

ToysR’Us

CSS “Sliding Doors”

While the above method is great if you know what your navigation items are going to be, it doesn’t present a problem if you’re using a content management or blogging system like WordPress that allows you to create and rename pages at will. The following technique has been around for a while but is just as useful, if not more useful than the previous technique. Douglas Bowman wrote an article for A List Apart in 2003 titled: Sliding Doors of CSS

This technique uses two background images that can tile horizontally to encompass a long page title or shrink horizontally to encompass a short page title. Our HTML markup for the list is very similar to the above technique. Our main changes will center around how we style the list with CSS.

<div id="header">
<ul>
<li><a href="#">Home</li>
<li id="current"><a href="#">Services</li>
<li><a href="#">About Us</li>
</ul>
</div>

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

Examples

ESPN

EnGadget

NetTuts

TigerDirect

Content Scrollers
One trend that is becoming increasingly more and more popular is the concept of content scrollers or sliders. These block level elements cycle through (or are toggled via user interaction) a predetermined set of content which can be any web content. This used to be a technique that was reserved soley for Flash, however, with the advent of Javascript libraries such as jQuery, mooTools, and Prototype it is now possible to do this strictly with HTML/Javascript/CSS. Our code snippet below is an example using jQuery and a jQuery plugin called jCarousel Lite.

HTML

<button class="prev">Prev</button>
<button class="next">Next</button>

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

        $(function() {
            $(".anyClass").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });
    

Examples of this technique can be found below. Note that not all of the examples below use jCarousel Lite, but they do portray a similar technique/effect.

Ordered Lists: A Side Note

While ol and ul can technically be considered interchangable, an ol was designed to be used for items where order is important. One great example of this could be a list of links that shows a user where they have been, otherwise known as “breadcrumbs”. In the following list you’ll find some step by step tutorials for building CSS breadcrumbs.

Resources for CSS BreadCrumbs

• Simple CSS Breadcrumbs using a background image
• Simple Scalabe CSS Based Breadcrumbs

Lists & CSS Resources

The following resources discuss technique and theory in greater detail in regards to CSS and HTML lists.

• A List Apart: CSS Design: Taming Lists
• CSS Tabs & Navigation Showcase
• CSS Menu Builder
• Easy Slider jQuery Plugin

About the author

Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.

  

We will start a new set of posts that will demonstrate different way of creating and styling various design elements. Today our focus will be on “Post Headings“, how to style and markup this important block that comes before any post.

Usually “Post Headings” consists of 5 essential elements:

• 1- Post Title
• 2- Publishing Date
• 3- Author Name
• 4- Post Category ot Tags
• 5- Number of Comments

What we are going to do is play around with these 5 puzzle pieces to get 5 different and pretty “Post Headings” for your blog posts. All the headings mentioned here actually need only couple of lines of CSS.

Take a look at the demo

Artistic Post Heading

The HTML will look like this:

<div id="block4">
    <div class="title-wrap">
    <h1><a href="#" >7 Steps for Systematizing The Design & Build Process%u2026</a></h1>
    <h5><span>Sep 21, 2009</span> | Comments <a href="3" >67</a> | by Cameron</h5>
    </div>
</div>

and the CSS:

#block4 {
    background:url(images/bg.jpg);
	border:3px solid #542437;
	font-family:Georgia,"Times New Roman",Times,serif;
        margin:20px 0px;
	padding:20px;
	z-index:5;
}
#block4 h1 {
	font-size:190%;
	letter-spacing:0px;
	line-height:42px;
	margin:0 0 10px;
	text-align:center;
	text-transform:uppercase;
}

#block4 h1 a{
	color:#542437
}

#block4 h5 a{
	color:#542437
}

#block4 h5 {
	border-bottom:1px solid #4C4C4C;
	border-top:1px solid #4C4C4C;
	color:#6A6969;
	font-size:13px;
	font-weight:100;
	letter-spacing:3px;
	line-height:21px;
	padding:5px 0;
	text-transform:uppercase;
}
#block4 .title-wrap{
	background:url(images/trans_bg.png);
	padding:10px;
	border:1px dashed #542437;
}

Traditional Post Heading

The HTML will look like this:

<div id="block1">
        <h2>Simplicity in Good Web Design</h2>
        <p>
            by <em> <a title="" href="http://www.noupe.com" >Noura Yehia</a> |
            <a href="" class="comments">Comments</a> |
            <a href="" class="cat">Category Name</a>|
            <a href="">Sep 10</a></em>
        </p>
</div>

and the CSS:

#block1 {
	background:#D5E4E8 none repeat scroll 0 0;
	border:3px solid #B5CAD0;
	margin:20px 0px;
	padding:20px;
}
#block1 h2{
	font-family:Georgia,"Times New Roman",Times,serif;
	font-weight:normal;
	text-shadow:0 0 1px #000;
	color:#444444;
	font-size:2em;
	padding:2px 0 0;
	text-transform:capitalize;
	line-height:1.2em;
	margin:0 0 10px;
}
#block1 p em {
	color:#999999;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-style:italic;
	letter-spacing:0.2em;
	margin:10px 0 20px;
	text-transform:none;
	padding-bottom:10px;
}
#block1 a{
color: #F50077;
text-decoration:none;
}
#block1 a:hover{
text-decoration:underline
}

#block1 .comments{
	background:url(images/comments.png) no-repeat;
	padding:0 0 0 25px
}
#block1 .cat{
	background:url(images/folder.png) no-repeat;
	padding:0 0 5px 30px;
}

Lines Post Heading

The HTML will look like this:

<div id="block2">
<div class="date-stamp">
				<div class="day">4th</div>
				<div class="month">Mar/09</div>
			</div>

<h2>7 Rules for Mixing Multiple Fonts in Good Web Design</h2>
<p class="details"><span class="type">Full-Time</span> <em>at</em> Magnet Media, Inc. (ZIO Pro) <em>(Manhattan, NY)</em></p>
</div>

and the CSS:

#block2{
	border:3px solid #A8635A;
	color:#fff;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
}

#block2 h2{
	background:#ECD078;
	color:#542437;
	font-size:160%;
	font-style:normal;
	font-weight:bold;
	letter-spacing:-1px;
	line-height:115%;
	margin-top:5px;
	padding:0;
}
#block2 p.details{
	background:#542437
}
#block2 .date-stamp {
	background:#FFF;
	border:1px solid #ECD078;
	color:#542437;
	float:left;
	font-style:italic;
	height:62px;
	margin:0 10px;
	overflow:hidden;
	padding:0;
	width:72px;
}
#block2 .day {
	font-size:22px;
	font-weight:normal;
	padding:7px 0 0;
	text-align:center;
}
#block2 .month {
	font-size:11px;
	padding:2px 0 0;
	text-align:center;
	text-transform:uppercase;
}

Fancy Post Heading

The HTML will look like this:

<div id="block3">
    <p class="date">Sep <span>10</span></p>
    <h1>CSS: Design Out Of The Box</h1>
    <p class="tags"><span>Tagged in:</span>
    <a href="#" >CSS</a>,
    <a href="#">Design Trends</a>,
     <a href="#" >inspiration</a></p>
</div>

and the CSS:

#block3 {
	background:#92FF2C;
	border:3px solid #F50077;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
	position:relative;
	z-index:5;
}

#block3 .date {
	background:#F50077 none repeat scroll 0 0;
	color:#92FF2C;
	font-size:130%;
	height:40px;
	left:-55px;
	line-height:30%;
	padding:20px 0 5px;
	position:absolute;
	text-align:center;
	text-transform:uppercase;
	top:0;
	width:54px;
}
#block3 .date span {
	display:block;
	font-size:170%;
	font-style:italic;
	font-variant:normal;
	letter-spacing:-1px;
	line-height:90%;
}
#block3 .tags {
	text-transform:capitalize;
}
#block3 .tags a{
	color:#F50077;
	font-weight:bold;
}
#block3 h1, h2 {
	color:#2B2B2B;
	font-size:190%;
	font-weight:bold;
	letter-spacing:-1px;
	line-height:100%;
	margin-left:-2px;
	padding:0 0 8px;
}

Colorful Post Heading

The HTML will look like this:

<div id="block5">
    <div class="date_block">
        <div class="day">4th/Mar</div>
        <div class="comments">10 Comments</div>
    </div>
    <div style="padding: 10px;">
        <h2><a href="#">Creating a Great Portfolio Site</a></h2>
        <span class="author">by <a href="#"><span>Noura Yehia</span></a>, Posted in <a href="#">Tips and Tricks</a></span>
    </div>
</div>

and the CSS:

#block5 {
	background:#27453A;
	border:3px solid #D95B43;
	color:#ECD078;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin:20px 0px;
	padding:20px;
}

#block5 .date_block {
	border-left:1px solid #D95B43;
	display:block;
	float:right;
	font-style:italic;
	height:50px;
	margin:0 10px;
	padding:10px 20px;
	width:90px;
}

#block5 .day {
	font-size:22px;
	font-weight:normal;
	padding:0 0 20px;
	text-align:center;
}
#block5 .comments {
	background:transparent url(images/comments.png) no-repeat scroll 0 5px;
	font-size:11px;
	padding:2px 0 0 20px;
	text-align:center;
}

#block5 h2{
	border-bottom:1px solid #D95B43;
	font-size:24px;
	font-weight:normal;
	letter-spacing:-1px;
	line-height:26px;
}
#block5 h2 a {
	border:medium none;
	color:#468E76;
	text-decoration:none;
}
#block5 .author a {
	color:#D95B43;
	font-weight:bold;
	text-decoration:none;
}