Michael Doyle | Blog » CSS

CSS – The Four Bubbles Model

Michael Doyle — Sat, 10 Oct 2009 16:07:13 +0000

Woorkup has an interesting css coding methodology, it's a top down model which has 4 stages.

The first stage resets HTML elementes
The second stage defines the main css elements (#header, #container, etc.)
The third stage defines custom classes (.right_align, .border, etc.)
The fourth stage deals with redundant coding; removal and optimising

I definitely give my thumbs up to this method. The article goes into greater detail and is located:

http://woorkup.com/2009/10/09/a-methodic-approach-to-css-coding-four-bubbles-model/

Web Development – Developing from a PS design

Design – Web Page Headers

Michael Doyle — Tue, 21 Jul 2009 17:48:08 +0000

I'm begining to redesign my portfolio. I'm basing it on the 960 grid system. I've placed an notice on my site which has the basic color scheme of things at the moment. The typography needs further work, but I'll leave it for the moment.

I'll be pixel obsessing for a while. First thing's first, I found a good article on the size of headers in web pages:

http://desizntech.info/2009/03/how-improtant-the-header-is/

CSS – Styling Forms

Michael Doyle — Wed, 10 Jun 2009 14:50:03 +0000

Found a great resource listing different articles and tutorials on how to style HTML forms using CSS. http://socialcmsbuzz.com/40-css-web-form-style-tutorials-for-web-developers-14082008/ Related posts:Web Development – Developing from a PS design Web Design – Creating the Web 2.0 Look Web Testing – Fixing Layout Problems in IE Related posts:

Web Development – Developing from a PS design

Michael Doyle — Tue, 09 Jun 2009 15:00:55 +0000

I mentioned previously that sixrevisions.com gave a good tutorial on how to create the Web 2.0 look in photoshop. They've now followed up on that article with a tutorial on how to code it in CSS and XHTML.

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

One concern about this tutorial is the heavy reliance on images for the design rather than CSS.

CSS – Improving Typography

Michael Doyle — Fri, 15 May 2009 17:15:38 +0000

AisleOne have a great article on how to improve typography on the web using a simple few steps. http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ Related posts:Web Design – Typography Design – Web Page Headers Web Testing – Fixing Layout Problems in IE Related posts:

CSS – 20 Helpful Websites

Michael Doyle — Thu, 30 Apr 2009 23:10:38 +0000

A list of 20 websites to master CSS Related posts:CSS – Improving Typography Web Design – Inspiration CSS – CSS Reset Related posts:

CSS – CSS Reset

Michael Doyle — Thu, 30 Apr 2009 16:59:07 +0000

There are many hacks to get past cross-browser compatibility problems. I've run into way too many of them, even though I regularly check sites in both IE and FF. One of the reasons for the problems is that some browsers add padding and margin sizes to certain elements. To remove this Yahoo has a utility called Reset CSS. IT removes all added borders, margins, everything to level the playing field so you can precisely define how you want elements defined without anything added by a browser.

UPDATE: After reading some of the comments and advise on resetting, a lot of people have highly recommended Eric Meyer's CSS Reset stylesheet.

CSS – Web Text Visualizers

Michael Doyle — Thu, 30 Apr 2009 16:28:36 +0000

CSS Font and Text Style Wizard is a handy online tool that shows you the different font attributes in CSS and shows how they affect text.
Typetester is a similar tool, but with further functionality.

CSS – CSS Sprites

Michael Doyle — Tue, 28 Apr 2009 20:27:50 +0000

I remember when I used to do the old javascript onMouseOver and onMouseOut to get those amazing image rollover buttons to work. That was back when I had a 56k connection, and normally I rolled over a button and waited for it to load to see it's rollover state. Those days are long gone thanks to CSS sprites.
Basically, say you have one rollover button and want to have 3 states for it, normal, hover and active. You create 1 image file with each of these images in the one file. Then you specify (in CSS) what co-ordinates of the image to go to based on the mouse state.
So you have one image file loaded when the page is accessed, only one http request and less resource usage.
Here's the smashing magazine article explaining everything you need to know.