CSS Unleashed – Experiments Putting It All Together

By Lorelle VanFossen | Published September 1, 2003

NOTE: This article was originally written in 2003 and includes links to articles going back to the early days of HTML and CSS web development. While we’ve done our best to keep some of the information updated, these documents also serve as historical references on the history of web design and web development. Please check the web for updated information if you find an example or technique is not working properly. Or let us know and we’ll look into it. Thanks.

We’ve shown you some of our experiments in CSS designs, playing with text, borders, displaying your photography, pull-quotes and blockquotes, lists and menus, logos, and more. Now we want to show you some of the tips and tricks we learned from doing these experiments and how to turn the inline CSS code into style sheets which complement the HTML tags and streamline the coding process.

CSS Experiments

Before we continue, make sure you are up-to-speed on some of the jargon and techniques behind creating CSS, HTML, and style sheets. Here are a list of articles from within our site to help you understand what we are discussing.

Extracting CSS Inline Code
to Cascading Style Sheets: Starting Simple

To help us with our experiments, we’ve set the styles for our experiments “inline” which means the HTML tags include the style codes such as the paragraph form we used throughout our experiments to highlight the different CSS experiment styles.

We used this CSS style attached to a paragraph tag to give it a distinctive look and segregate the text away from the experiments with CSS. It created a uniform look throughout the experimental examples.

The paragraph includes an top and bottom border and a marble graphic in the top left. To accommodate the graphic, the paragraph’s left padding was pushed to the right 30px. If we had pushed the margin, the borders would have moved with it and we wanted the graphic within the borders, so we changed the padding.

Inline Coding:
<p style=”display: block; position: relative; margin: 25px 0px; border-width: 1px 0 2px 0; border: solid #000099; padding: 10px 5px 10px 30px; color: black; font-size: 80%; background: url(images/core/ball203.gif) left top no-repeat”> We used this CSS style attached to a paragraph tag to give it a distinctive look and segregate the text away from the experiments with CSS.</p>

To change the inline coding to a style sheet with this example, the process was simple. We simply cut the inline style codes and pasted them into a CSS class rule and set this rule within a style tag in the <head> of the page:

HTML Tags:
<p class=”state”> We used this CSS style attached to a paragraph tag to give it a distinctive look and pull the text away from the experiments with CSS.</p>

The HTML is simple and clean and easy to use over and over again throughout the series of experiments.

Extracting CSS Inline Code
to Cascading Style Sheets: Divisions and Classes

5,342

THE NUMBER OF PEOPLE WHO MIGHT VISIT THIS WEB PAGE DAILY BUT ARE UNSURE OF THE PURPOSE OF IT.

Statistics are average and not based on any daily recommended allowances or dietary restrictions, if any.

Let’s look at the CSS design to the right, a slightly more complex design. We used this one in our section experimenting with blockquotes. It’s a pleasing design for highlighting statistics.

The style codes are set inline with four divisions, establishing the three different sections and a wrapper division surrounding all three to establish the overall width and font styles. The inline style codes embedded within the HTML looks like this:

<div style=”font-size: 13px; padding: 4px”> THE NUMBER OF PEOPLE WHO MIGHT VISIT THIS WEB PAGE DAILY BUT ARE UNSURE OF THE PURPOSE OF IT.</div>

<div style=”background: brown; color: white; font-size: 11px; padding: 3px”> Statistics are average and not based on any daily recommended allowances or dietary restrictions, if any.</div>

</div>

To pull the style codes out, we first set up a class selector that designates the group and applies the consistent elements throughout the division. These are found within the first div tag. Let’s call the class “stats”.

Then we add the next three sections as title, paragraph and division.

The above style codes are placed in an attached style sheet or in the <head> of the page and the HTML is simplified to something manageable:

<div class=”stats”>
<div class=”title”> 5,342 </div>
<p> THE NUMBER OF PEOPLE WHO MIGHT VISIT THIS WEB PAGE DAILY BUT ARE UNSURE OF THE PURPOSE OF IT. </p>
<div> Statistics are average and not based on any daily recommended allowances or dietary restrictions, if any. </div>
</div>

Extracting CSS Inline Code
to Cascading Style Sheets:
Divisions, Classes, and Hierarchy

Feature Articles

How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen
Background Magic Investigating your backgrounds Lorelle and Brent VanFossen
Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen
Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen
Digital Camera Tips and Tricks Techno-age meets tree huggers Lorelle and Brent VanFossen

Let’s deal with a little more complicated design and see how much we can simplify it. This Feature Article example comes from our section on lists and menus, experiments with various ways to handle content outside of a main article, like side bars or lists. The design features a nice top border and title, but inside the container are links that look like text. Our goal is to turn the HTML into a simple list layout.

Let’s start by setting up our desired HTML tags and structure and leave the CSS codes aside for the moment. Our goal is to create a simple HTML structure that is then influenced by the code. Begin with the simplest layout possible.

Feature Articles

How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen
Background Magic Investigating your backgrounds Lorelle and Brent VanFossen
Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen
Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen
Digital Camera Tips and Tricks Techno-age meets tree huggers Lorelle and Brent VanFossen

The streamlined HTML code includes a main container division, a division for the tile, and then the list. Simplifying the content to make this easier to read, the HTML tags look like this:

<div>
<div id=”featurelist”> Feature Articles</div>
<ul class=”title”>
<li> <a href=”pageone.html”> Page One</a> Subtitle <i> author</i> </li>
<li> <a href=”pagetwo.html”> Page Two</a> Subtitle <i> author</i> </li>
<li> <a href=”pagethree.html”> Page Three</a> Subtitle <i> author</i> </li>
<li> <a href=”pagefour.html”> Page Four</a> Subtitle <i> author</i> </li>
<li> <a href=”pagefive.html”> Page Five</a> Subtitle <i> author</i> </li>
</ul>
</div>

Under the main container division called “featurelist”, we have the declarations or characteristics that will apply to the entire block. These include the font style, width of the block, placement or float on the page, and the text alignment code set to right justified.

#featurelist {
display: block; width: 35%; float: right; font-family: Trebuchet MS, Tahoma, Arial, Helvetica, sans-serif; color: black; text-align: right}

For the rest of the CSS design code, let’s take each section one at a time. First, the title. It features a border along the top and one side, and sets the headline font to be a different color from the text.

#featurelist .title {
background: transparent; color: #CC0000; font-size: 20px; padding: 8px; border-width: 1px 1px 0px 0px; border: solid #660066}

So far the process is fairly simple. Now we have to deal with the list features. Each list item features an overall look, and then a look applied to each article title which also serves as links to the articles. This is where CSS hierarchy comes into play as we set up parent containers which change the tags within their containers.

The first selector ( ul) sets the look of the list. The second selector ( a) sets the look of the link to be bold. Since bold, black text looks just like text, we need to add some emphasis to help people recognize that this is a link. We add an anchor hover to change the color of the text when the mouse moves over it. The color of the anchor (link) can be set to anything to look more like a link, but we choose to have this look be subtle.

#featurelist ul {
list-style-image: none; list-style: none; font-size: 14px; padding: 5px}

#featurelist a {
font-weight: bold; color: black; text-decoration: none}

#featurelist a: hover {
color: #990000}

The full style sheet code would look like this:

We hope this helps you use our CSS design examples more easily within your web pages. Yes, this is a reminder that these experimental design codes are open source, free for the taking. If you really love them, a link to our site would be appreciated. If you do something really spectacular with them, or find a bug in the design, please let us know so we can brag or fix.

Experimenting with CSS

We challenge everyone who wants to do their own web page design to learn about Cascading Style Sheets. While CSS is an evolving media and still has its limits, it opens the door beyond design-by-tables to a whole world of possibilities. By doing these experiments and providing the source code behind our own web page designs, we have learned even more about the entire process. It has helped us to streamline and tighten our code by over 30%, creating faster loading and search-engine happier web pages.

If you want to do some experimenting with CSS, here are some tips to help you get started.

Start your designs with divisions ( <div> ) and spans.
Keep the CSS coding inline within the divisions and spans. This allows faster tweaking to get the code results “right”.
If necessary, use style tags ( <style> ) next to the experimental design as you work on it. As this technique does not meet web standards, remove the final style codes and place them in the <head> or an attached style sheet to comply with web standards.
When you are satisfied with your design, separate the CSS styles from the HTML and turn the divisions and spans into HMTL tags by assigning IDs and classes.
Learn about CSS hierarchy and CSS shorthand so you can streamline the styles and HTML tags even more.

We believe in the “learn-as-you-play” method and creating these CSS design experiments taught us a ton about CSS, HTML, and web page design. Here are a few techniques we learned along the way.

Positioning: Positioning in CSS can be absolute or relative. It involves the use of basic directions (clockwise in order): top, right, bottom, left. Dependent upon your design requirements, the measurements for these positions can be set as absolute pixels ( left: 50px), relative percentages ( left: 25%), or relative to the screen resolution and base font-size ( left: 5em). Play around with these to see which work best for your experimental CSS design and how they work within your content.
Fonts: Fonts can be set by using traditional font point sizes, but these are generally frowned upon. The preferred font size style is to set a base font as a point, em, or pixel size and then refer to all other font sizes as percentages of the default base font (default at 12px/1em and heading would be 110% or 1.1em). While working with our experiments, we decided to set all of our fonts with pixels so they would stay “fixed” in place as we experiment. Unlike font sizes using percentages or em, pixel sizes do not change with the browser font size specifications, therefore the design elements are fixed in place. Once a CSS design experiment is set, we can then change the font sizes to a percentage or em to maintain a more accessible web page design.
Understanding Breaking Points: As with all experiments, there comes a time when a CSS design may break on the page. Dependent upon absolute and relative positioning, or a combination of both, flexed and shoved together with various screen widths, sometimes the design code will break. Lines will wrap down, layouts will shift around, and things will become a bit scrambled. Be patient and learn how the positioning layers work within the CSS box model relative to the screen space, specifically the linear sequence (top, middle, bottom), framing sequence (outside, inside), and 3D stacking (front, middle, back). The better you understand the CSS Box Model, the easier the design process will be when it comes to positioning.
Understanding The Difference Between Margins And Padding: As you better understand the CSS Box Model and CSS positioning, you will also come to better understand the differences between margins and padding. Simply put, margins are the space outside of the container in relationship to the containers around it. Padding is the space between the edge of the container and the inside content. Together, these two create the space and positioning of your content within and without its framing container.
Width and Height: Width and height play important roles in CSS positioning. They affect the containers around them and the content within them. Height is required when using special effects such as CSS filters, but it is not necessarily required for most containers as the content within will push the container to its required height. Width, however, plays a critical role in how wide the container is and how it fits within the puzzle of your overall web page design as well within as your design element. Working with photographs, setting the width to 1% resizes the container’s frame to the width of the image, if the margin and padding immediately around the image and the image itself are set to zero. Both width and height can be set as absolute measurements in pixels or em, or in relative measurements using percentages. The choice is yours dependent upon your design and your web page design goals.
White-space: Web page designs can be designed to be literally cemented to the page or “fixed” in place using absolute positioning. Even these can “break” when the page width narrows or widens beyond the CSS structure and positioning limits. To keep containers from wrapping or “breaking”, you can add the CSS property called “white-space”. If white-space is set for normal (default), the container will wrap down to the next line when the page is too narrow, or show space between the containers when the page is too wide. Setting the property values for white-space to nowrap forces a division or span to not wrap to the next line and forces the container to stay where it is, inline with its positioning. It doesn’t work in all conditions but it does help inline division containers stay together.
Take Old Browsers Into Consideration: I got so enthused about these innovative designs, I pushed the CSS and HTML into the latest and best updated versions, using codes recognized by only the latest web page browsers. In testing these pages, I discovered that Netscape and older browsers didn’t recognize some of the shorthand, especially those associated with borders. While I don’t want to spend a lot of time forcing these experiments to be visible in every browser since some of the designs feature code not available or recognized by older browsers, I needed to make a few changes so they are a bit more backwards compatible. As you design your CSS experiments, consider your audience and how far into the past you should go to make sure your experiments are visible to as many people as possible. To “really” experiment with filters and newer techniques, use the lastest update of your web page browser software.

As you design, start with a basic understanding of CSS rules and positioning. Then let your imagination go. Play with shapes, colors, and sizes. Start with something simple and then push it to its limits.

Inspiration for these designs came from magazines since few sites offer much in the way of design help beyond the very basic structures and layouts. Design inspiration can come from anywhere: newspapers, advertising flyers and brochures, company materials, posters, television, and books. While few websites offer specific CSS experiments like ours, web page designers are coming up with their own designs which can be copied and modified to suit your own design needs. Go exploring and see what you can find.

To help you with some of the techniques we used and others available on the web, we’ve provided you with a list of sites we found helpful in creating these CSS experiments. We even experimented with our list of links!

Experiments with CSS – Links and Resources

This article was posted in CSS Tips and Tricks, Photography, Technology and tagged css, css designs, css experiments, css tests, css unleashed, design, web design, web development. Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

3 Trackbacks

By Taking Your Camera on the Road » CSS Unleashed - Experiments with CSS Logo Designs on September 2, 2006 at 23:19

[…] We’ve played with blocks and a wide variety of CSS experiments designs. Now let’s apply these techniques to creating business and web page logos. Your website should have a logo, whether it is your company logo or one specific to the web page. Our company is called VanFossen Productions, but our sebsite is called “Taking Your Camera on the Road”. We’ve created a graphic logo for the site, and below we’ve made a few attempts to reproduce it with CSS as part of our CSS experiments. A pure CSS logo loads faster and saves bandwidth. But there are some limits. Unless you use embedded fonts, a technique limited to only a few web browsers, fonts are limited to a select few fonts available on most people’s computers. With a limited selection of fonts, the logo designs must concentrate on the graphic display of the content rather than the typographics. That still leaves the field wide open to a powerful imagination and a wide variety of CSS experiments in design. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]
By Taking Your Camera on the Road » CSS Unleashed - Experiments with Background Images and Backgrounds on September 2, 2006 at 23:28

[…] The background element in CSS offers a wide range of possibilities including embedded background images, content over backgrounds, and backgrounds as art. As you play with your CSS experiments with backgrounds and background images, it’s important to understand how they work, where they work, and how to control their appearance. Let’s start with a few CSS experiments in placement. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]
By Taking Your Camera on the Road » CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More on September 2, 2006 at 23:32

[…] There are many ways of arranging content. Articles often feature tip boxes, pull-quotes, blockquotes, lists, tables of contents, and menu items helping people get the information they need within and without of the scope of the article. These can also include step-by-step instructions pulled from the article to help take people through the process. We decided to experiment with a few of these content handling designs to find ways of moving beyond the pull-quote or blockquote to actually presenting bits and pieces of information in an interesting and eye catching fashion with CSS as part of our CSS experiments. In general, the HTML is simple, but the design elements can be sophisticated. As mentioned before, these are CSS experiments, so test them thoroughly within your own design to make sure they work. Most of these content handling designs begin with a list. It’s what you do with the list that makes the design interesting and part of our CSS experiments. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

CSS Unleashed – Experiments Putting It All Together

Extracting CSS Inline Code to Cascading Style Sheets: Starting Simple

Extracting CSS Inline Code to Cascading Style Sheets: Divisions and Classes

Extracting CSS Inline Code to Cascading Style Sheets: Divisions, Classes, and Hierarchy