September 24, 2007

Print Style Sheets - Video Tutorials

All modern browsers support the most common media attributes, which are supplied within the link element to target specific style sheets in a specific situation. For example, to ensure only visitors viewing the web site on a monitor, you add media = "screen" to the link element to call your default style sheet. Underneath that a second link element can be used with media = "print" added to call a print style sheet with only basic styling, such as black text on a plain white background, and all graphics removed.

(read more...)

June 8, 2007

Using CSS for Form Layout

I admit it. I use tables when I need to layout a form. It is just so quick and easy to do. Though as we all know (or should know), tables were only intended to be used for layout of tabular data. So with all the buzz about semantic markup and accessiblity, I thought I'd look into learning how to layout a simple form the right way. After a few hours of head scratching, I finally came up with a form that uses CSS that looks practically the same as one using tables.

(read more...)

March 2, 2007

CSS Block Hover Effect

Have you ever seen a web site that has clickable blocks of text?

Ever wondered how they were done?

Well, I found out how from Christian Watson.

Here is a simple example and the code (.zip).

February 13, 2007

CSS Float - Video Tutorials

I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I'm sure others as well) are floats.

When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it's then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.

(read more...)

January 4, 2007

CSS Basics 101 - Video Tutorials

If you want to build modern web sites, you need to know about Cascading Style Sheets (CSS). CSS gives you the power to style and lay out web sites so they are usable, compact, good looking, well structured, and easy to maintain. The basic purpose of CSS is to allow the designer to define style declarations, and to apply those styles to selected portions of HTML pages using selectors which are references to an element or grop of elements to which the style is applied.

(read more...)