In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts.
Cascading Style Sheets (CSS) is used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document.
Cascading Style Sheets offer significant advantages compared to the other option available – table-layouts. First of all CSS provides us with a strict separation between layout, design of the page, and the information, presented on the page. This means that the layout of all pages in a website can be changed at one by editing style definitions in one .css-file that all the web pages refer to. The separation of layout and information also means that loading different .css files with the same content pages one can completely change the aspect of the site, making it perfectly suitable for immediate user needs fx. screen, printing or mobile devices.
Although almost all modern browsers have good CSS support, older browsers are at a disadvantage. However, on older browsers a CSS-based layout still proves to be usable by displaying navigation and content at the beginning of the page.
Using CSS can also avoid most of the accessibility issues raised by table-layout cells that can make it really hard for people that relay on text browsers, screen readers and speech output browsers to access information.
While CSS may offer many advantages and gives the developer very high level of control of the layout it is still quite hard to implement correctly from bottom up and without having experience and good tool support. Direct reuse or modification of existing CSS solutions to fit the exact needs for your site may be a good start and it is really the intention of this article to give you a good overview of what is possible with CSS and what is available freely to get you started quickly!
Table-layouts are quite simple to implement and they are in particular easy to work with in WYSIWYG editors. That is probably why we see tables being used on close to 9 out of 10 website on the Internet today (guesstimate).
Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Even though table-layouts have been around almost from the beginning of the Browser Era the most common browsers today just can’t agree on how to interpret and present tables. Known problems are gaps that should not be there, weird positioning of cells or even thicker rows or columns than intended etc. Guess most readers are ready to learn more about CSS now? Take a look at this post if you need more details to be convinced!
CSS has been around for some time and over the last few years web-developers have written many articles about CSS and developed many useful techniques. We believe that by using proven techniques and solutions you can save a significant amount of time and at the same time get a much more appealing and flexible look and feel on you website or blog. Of course this requires that you are able to what you need in time. Below you’ll find a list of techniques we ourselves really couldn’t live without. They are essential and they indeed make our life easier. Hope you find them as useful as we do!
UPDATE Mar. 21st: Take a lool at some of our other popular articles. If you’re looking for High Quality Free Fonts to use in your designs or Tools, Techniques and Inspiration you may find what you need in the articles listed below.
CSS code is embedded in the page and can be found by viewing the page souce code
Use CSS to show nice looking bar graphs based on just div and span tags
Thechniques that help you create various types of Pullqoutes.
How to Create a Block Hover Effect for a List of Links
Want layouts that still work if a user increases their browser’s text size? Resize images in order to stay in proportion with the content.
If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.
Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off.
Let’s see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.
Visitors browsing at slow connections have to wait until large images load and they don’t have a clue something is missing — they see an empty block of space between two blocks of text. Image preloader will solve this issue.
A picture’s worth a thousand words, right? So spice up those plain old text links with Link
his PHP script checks to see if the user allows cookies. If so, a function is provided to change to an alternate CSS
Form-styling solution that is both accessible and portable
With faux absolute positioning, we can align every item to a predefined position on the grid.
Here are three techniques for incorporating data visualization into standards-based navigation patterns.
Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.
How to produce a single, semantically logical ordered list that wraps into vertical columns.
Image Replacement is a method of using an image to replace text and content, specifically header information, titles, headings, and visual content, while preserving the “readability” of the page.
CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.
The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.
This document describes some of the issues concerning the use of CSS to reformat Web documents for printing
Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.
This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.
How to insert the value of an anchor’s href attribute, in-line, after the text, slightly smaller and flanked by parentheses for printing web pages
There are two divs, “content” and “footnotes”. “Content” holds the content, “footnotes” is empty. The footnotes are added in-line in span tags (with
class="footnote") within the content.
StyleMap uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an embedded definition list. The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.
The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself.