CSS: Techniques, Tutorials, Layouts


Since web-development is a quite dynamic field nowadays, new techniques are being developed and updated all the time. A primary example are CSS-related techniques, which emerge almost every day and offer more possibilities for fellows web-developers. We keep an eye on the recent developments and collect new ideas and methods for our readers. A “fresh” round-up of the “fresh” CSS techniques, tutorials and layouts. Links checked: May/17 2008.

You might be willing to check out our newer articles:

CSS Diagrams, Bar Graphs, Star Rater

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

CSS Layouts Templates


CSS Lists, Navigation, Menus, Rollovers


Tips & Tricks


CSS Tables

CSS (and JS)Tooltips

  • Bubble Tooltips103
    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
  • qTip104
    qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!
  • Sweet Titles Finalized105
    JavaScript Fading Tooltips



  • Advanced CSS Layouts: Step by Step119
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS Basics.com120
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide121
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Intermediate Guide122
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Advanced Guide123
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Demonstrations and Tutorials124
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit125
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial126
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial127
    CSS Tutorial von w3schools.com
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial129
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • Learn CSS Positioning in Ten Steps130
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial131
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial – CSS selectors132
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour133
    by Andrew Krespanis – Making Simple Work of Complex CSS Layouts
  • Style master css tutorial134
    hands on css tutorial – This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials135
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets136
    Cascading style sheets tutorials and style guide

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    Excellent list. Love the CSS graphs. Thanks!

  2. 2

    wow..amazing .

  3. 3

    just enjoying your site, thanks

  4. 4

    Great collection of resources. Thanks for sharing dude.

  5. 5

    Take a look at my website for only great portfolio & web deisn inspiration : webdesign-inspiration.com

    And thanks for the cool links :)

  6. 6

    Rob - Web Page Tools

    March 16, 2007 10:59 pm

    I have a web page on choosing colors and with a color scheme tool and also the color names and numbers for use in your html and css files.

    Good selection on css resources will have to go through the list see what i can use.


  7. 7


    given CSS based menus (without using javascript) are not working on IE-6. please suggest.


  8. 8

    Fantastic site! Only had a quick dip into the tutorials … the graph idea is brilliant – so simple. Thank you.

  9. 9

    As you suggest, the world of CSS is moving so rapidly that I think roundups like this one are very important for the average designer, since they allow us to keep up. In a larger sense, though, I think the development of CSS is one of the great success stories of the web. For one, it demonstrates the creative side of programming, the opportunity to make something that is distinctive and creative. Code doesn’t often seem sexy, but CSS can certainly utilize code to make something sexy. Additionally, though, as it develops, it seems to do so through the innovations of average everyday users, who seem genuinely interested in making the web a better place rather than simply programming for money or glory. This is the kind of cooperation that Web 2.0 is meant to emulate.

  10. 10


  11. 11

    nice tutorials….its very useful for css beginers….keep it up…post more tutorials…

  12. 12

    wonderful Tutorials, good training ground for css beginners.

    Bookmarked on my browser !! :)

  13. 13

    very top of article some text that should be a link?
    # Star Rater
    Example 1
    # CSS Ratings Selector
    Using a list item to create a star rater
    # Star Rater
    Example 3

  14. 14

    very good!

  15. 15

    Awesome collections!! Thanks for your hardwork.. Great..

  16. 16

    Nice and practical info. Let me sign up to your web site. Thnx. keep up the nice perform

  17. 17
  18. 18

    thanx for ur help…


↑ Back to top