with Lorelle and Brent VanFossen

Category Archives: CSS Tips and Tricks

Cascading Style Sheets (CSS) offers website administors and designers to style and arrange the look of web pages. We’ve watched the evolution of web page design and have kept up with it. We’ve also been on the cutting edge of web page design and layout, including designing some of the first CSS experiments that push graphic elements on a web page to the extreme using tableless design and only CSS.

This series of articles offers tips, tricks, and techniques for CSS and web page design. Not all the styles within these articles work on every web browser, as they tend to push the limits of the browser. You are free to look, learn, and even take any designs within these pages for your site. If you link back to us, that’s nice, but these are here to help you learn and to help us teach web page design and CSS techniques.

If you are new to website and web page design, there is much that will help you here, but also take time to check out more articles in our Web Pages category, especially the topics of Website Development to help you start developing your website, and Web Page Design to help you learn more about designing web pages.

If you are very new to this and you would like to use a software program that is easy-to-use, powerful, customizable, and free, check out our articles on WordPress.

Using CSS to Create a Photo Gallery

I have quite a few examples in my CSS Experiments on showcasing your photographs, as a single image or in a gallery format, and I found a very simple, easy-to-understand explanation of how to use CSS to create a photo gallery from Web Reference. With this article I hope to show you how to produce […]

Clearfix CSS Hack: Solving Stair Stepping Images

While I deal with this and other design issues I had with my site in the article WordPress Tips and Tricks – Template Files, Styles, and Themes, the issue keeps coming up. So I decided we needed to address it specifically. What to do when images start shoving other images round? Generally, we try to […]

CSS Experiments – Web Fonts and Embedded Fonts

CSS Experiments CSS Unleashed – Experiments with CSS Designs CSS Book Recommendations CSS Experiments Playing With CSS Blocks CSS Experiments with CSS Logo Designs CSS Experiments with Background Images and Backgrounds CSS Experiments with Lists, Menus, Tables of Content, and More CSS Experiments – Web Fonts and Embedded Fonts CSS Unleashed – Experiments with Quotations, […]

Views of a Web Page

Web pages aren’t viewed by everyone equally. We’ve taken one of our web pages and passed it through some tests to resize, reshape, mash, smash, shrink, expand, and mess with our design. If you are going to experiment with CSS, or even if you are just designing a simple Theme or web page layout, you […]

CSS Experiments – How They Were Done and More

CSS Experiments CSS Unleashed – Experiments with CSS Designs CSS Book Recommendations CSS Experiments Playing With CSS Blocks CSS Experiments with CSS Logo Designs CSS Experiments with Background Images and Backgrounds CSS Experiments with Lists, Menus, Tables of Content, and More CSS Experiments – Web Fonts and Embedded Fonts CSS Unleashed – Experiments with Quotations, […]

CSS Tips and Tricks – Filters and Transforming Text

Flippin’ Filter Fun: flipv and fliph There are tons of filters you can have fun with with your CSS experiments. Remember, these only work on a few browsers, so test them out before putting them into use. Firefox and older browsers have trouble with these, though Microsoft Internet Explorer’s latest versions display these well. We […]

CSS Tips and Tricks – Backgrounds and Transparencies

We’ve done a lot of different CSS experiments, pushing CSS to its limits with fun and jazzy text, filters, horizontal and vertical flipping, and more, and now it’s time to tackle some fun with more filters. Be sure and check out more of our CSS Experiments to help you expand your imagination with what is […]

Understanding CSS Selectors and Attributes

Word Games – Understanding the CSS Jargon Understanding how CSS and HTML work together is not easy. The idea that it takes two pieces to fit together to make a web page display is a challenge. We’ve broken down the concept into simple terms and definitions, as well as simple examples to help you understand […]

CSS – The Things You Need To Know

While there is a lot of information about code styles and design layouts out on the web and throughout our CSS experiments and examples, some of the smallest details can be difficult to find. One of the little bits I needed to know was about how to layout a style sheet. Where do the spaces […]

CSS Tips and Tricks

While we avoid a lot of whizbang tricks, we have used a few here and there. Most recently, we discovered some useful tricks when designing a “fancy” version of our web page layout. A major part of these we turned into our CSS Experiments. As nature photographers and instructors, Brent likes to teach the following […]

CSS Tips and Tricks – Jazzing Up the Content

We’ve show how to jazz up a web page’s content within a container or box. Now it is time to look at some tips and tricks for jazzing up the content. CSS Text Effects There are a variety of text characteristics you can also add to jazz up your text. First of all, you can […]

CSS Unleashed – Experiments with CSS Designs

99 THINGS YOU DIDN’T KNOW YOU COULD DO WITH CSS * *And How To Do Them Well! We decided to offer up some of our own experiments for you to learn more about CSS and for us to have a little fun, too. The following designs were completely created without tables, using only Cascading Style […]

CSS Unleashed – Variations on a Theme

We’ve been looking at a variety of CSS experimental examples, and now I’d like to take you through a design journey. These ideas come from magazines and advertising material, but they also come from a simple idea that is then played with to create different effects. Play with these effects and you have variations on […]

CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes

CSS containers and boxes can be used to create a wide range of blockquotes, pull-quotes and quotes in general, highlighting a bit of content to attract attention. These can also be used as boxes to highlight tips, advice, or sidebar information with the help of a few bullets in a list. We want to push […]

CSS Unleashed – Experiments Playing With CSS Blocks

CSS Experiments CSS Unleashed – Experiments with CSS Designs CSS Book Recommendations CSS Experiments Playing With CSS Blocks CSS Experiments with CSS Logo Designs CSS Experiments with Background Images and Backgrounds CSS Experiments with Lists, Menus, Tables of Content, and More CSS Experiments – Web Fonts and Embedded Fonts CSS Unleashed – Experiments with Quotations, […]