Skip to main content
CSS is fun and cool and I like it.

Better Blockquotes with CSS

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take control of this element and give it some CSS style!

A popular technique is to put large graphical Quotation marks at the upper left … Read article “Better Blockquotes with CSS”


* { margin: 0; padding: 0; } No Longer Cool

One the techniques I have advocated using for a long time is this:

* {
  margin: 0;
  padding: 0;

This is part of the “CSS Reset” theory which helps keep your designs consistent across browsers, a very good thing. This technique works on all browsers, so I never really considered any negatives. That is, until I read this post by Christian Montoya who points out:

This eliminated all differences in padding and margin across browsers so I was free

Read article “* { margin: 0; padding: 0; } No Longer Cool”

10 Beautiful and Functional BLUE Web Layouts

Sometimes the best way to get inspired to design is to look at other great designs. These designs showcase beauty and function over flashiness. There are some amazing and flashy designs out there where I love the design but the functionality suffers. These aren’t among them.

This post is brought to you by the color BLUE.


Onward Engineering

John Mills
Read article “10 Beautiful and Functional BLUE Web Layouts”


List of Deprecated Attributes Still in Widespread Use

A “deprecated” element is an element the W3C has designated as outdated. These elements should not be used and are generally considered to be “bad code”. If you use a STRICT DOCTYPE, deprecated elements will not pass validation.

The thing is, people still use them. In fact, many of them are in fairly widespread use. Why? Because they still work! Just because they are deprecated doesn’t mean they don’t work, it just means there is a “new” way to do … Read article “List of Deprecated Attributes Still in Widespread Use”


“Real World” Web Design Still Needs to Accomodate 800×600

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

On this site, 800×600 doesn’t even make the top ten. Knowing that, I designed this site to make use of that extra pixel space. Right now it’s at 980 pixels. At first I went a full 1024, but that was causing horizontal scrolling problems because it wasn’t taking into account the 13-15 pixels that get taken by the vertical scroll bar. Doh!

CSS-Tricks … Read article ““Real World” Web Design Still Needs to Accomodate 800×600”


How To Remember The Order of Selectors: LOVE and HATE

I read a comment the other day over on CSS Drive from someone named Slackerbabe that I thought was worth repeating.

Heres a cool way to remember the order of the four selectors, “LVHA (link visited hover active)”,….

Just think ‘LOVE’ (LV) and ‘HATE’ (HA)….

The selectors she is referencing is for anchor elements:

  • a:link
  • a:visited
  • a:hover
  • a:active
Read article “How To Remember The Order of Selectors: LOVE and HATE”

Creating a Nice Textarea

A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS, just like any other element:

textarea#styled {
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;

In this case, the textarea … Read article “Creating a Nice Textarea”


CSS Page Loader Example

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It’s very simple, and it just “fakes” actually loading something. As in, it’s not actually loading anything. You will have to refresh the page to reset it.

If you missed it before, the point is that you can make a DIV that covers the entire screen in white with an animated page loader in … Read article “CSS Page Loader Example”


Resizing YouTube Videos with a simple URL hack

Someone over at Digital Inspiration asked the question:

“How can I send a YouTube Video so that when the person receives it there will not be any other videos in the sidebars that can be opened.”

There is an awesome solution to this problem. You can link to YouTube videos in such a way that the video will take up the entire browser window with nothing else on it. This is also a nice alternative to the viewing videos in … Read article “Resizing YouTube Videos with a simple URL hack”