Explore the Articles

Learn CSS Selectors, Part 3

This will be the last discussion about CSS selectors in this series. In this article we will discuss the descendant, child and sibling selectors, with numerous code examples. It is the sixth article in rhe series covering CSS.

To understand structured CSS selectors, you need to understand how markup documents like HTML documents are structured. As you know, every HTML document begins with the element . This is called the root element because it's the beginning of the HTML structured elements.

Adding a CSS StyleSheet to your RSS Feed

It's pretty easy to add a CSS stylesheet to your RSS feeds. [I] created one in about 10 minutes for [my] RSS feed. You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. And the good news is you probably already know CSS, so setting one up is trivial...

What's in a name (part 2 - CSS naming conventions)

A great followup of part 1. A must read for any CSS coder. Covers good naming conventions and proposed CSS stacking order for various/common sites built today.

CSS Organization Tip 1: Flags

Do you write and manage large CSS files? Ever get tired of scrolling up and down in search of a specific rule or set of rules? The CSS files I work with for client projects are often quite long, requiring constant scrolling up and down several screen’s worth of text to alter rules or add new ones. While working on a current project, I just made a tiny little addition that makes finding what I want almost immediate.

CSS Framework

In [my] Modular CSS article [I] documented the possibility of breaking down stylesheets into components that could be reused across projects. All well and good. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that's really required to produce this is a set of naming conventions and a flexible base template...

Working with CSS Background Images – Part 4: Using Images to Fake the Appearance of Columns

In this tutorial, you learn how you can fake the appearance of columns in your CSS design. When you design with CSS, each of the divs in your page respond to the amount of content that they contain; this can be problematic when you want to create the appearance of equal-length columns. In this tutorial [I] will show you how you can overcome these problems in a fixed-width design.

Advanced CSS Layouts: Step by Step

The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations.

Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables. Numerous bugs were discovered in Netscape and Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design.

3D CSS Box Model - The easiest way to explain CSS' Box Model core

Having seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements are stacked, I decided to try and fill this hole, and draw a 3D CSS Box Model.

There's also an interactive Flash version to move around and play with!

Working with CSS Background Images – Part 3: Creating Background Images with a Drop Shadow

In this series you will learn how to work with background images and cascading style sheets—CSS. Background images and how to use them is a wide and varying subject. In this series I start at the beginning; to use this tutorial, no prior knowledge is assumed.

In the first two parts of this series, you learned how to set a background image. I reviewed using keywords, multiple keywords, and measurement values for precise positioning. These are the basics of using background images and it is necessary to understand these concepts in order to correctly implement the CSS required for setting your images.

Now that you have gained that knowledge, it’s time to move on to more interesting things. In this, the third tutorial in this series, my aim is to show you how you can dramatically alter the appearance of your pages by using background images. You begin in Macromedia Fireworks where you create the images you need before exporting them to your local site and implementing the images in your design through the power of CSS.

Working with CSS Background Images – Part 2: Precisely Positioning Images

In this series you will learn how to work with background images and cascading style sheets—CSS. Background images and how to use them is a wide and varying subject. In this series I will start at the beginning; no prior knowledge is assumed.

In part one of this series I began by reviewing the keywords you can use with the background-position property. If you are unfamiliar with using background images and CSS, I suggest you read this tutorial from the beginning. Throughout part two, you continue to work with the bgimage.gif you created in part one.

In part two, you learn how to place your background images with greater accuracy. You will also see how you can use multiple keywords in the value of the background-position property, and how the flexibility of the CSS syntax allows you to write the selectors in different ways.