CSS Quellensammlung

12. September 2006

Wo bleiben die Listen? Bitteschön: Christiane auf der Suche nach den wichtigsten Links zum Thema Cascading Stylesheets. Die Sache ist umfangreich ausgefallen und damit etwas für jede Bookmarksamlung. Hier geht es um internationale, also englischsprachige Seiten. Wer lieber in Deutsch liest, mag sich in dieser früheren Sammlung umtun: Deutschsprachige CSS-, XHTML- und Usability-Tutorials.

CSS Diagrams, Bar Graphs, Star Rater

  • Creating a graph
    Russ Weakley – Creating a graph using percentage background images
    Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph
  • Super simple CSS bars
    Tobias Lütke
  • Dynamic Pie Chart with CSS
    This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
  • CSS Diagrams
    Things to Do With CSS When You’re Bored at Work
  • Star Rater
    Creating a Star Rater using CSS
  • CSS Star Rating
    CSS Star Rating Part Deux

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

CSS Layouts Templates

  • CSS Layouts
    Stu Nicholls – Three columns, CSS frame, „Fixed“, Cross browser….
    All templates are XHTML 1.0 and CSS2
  • css Zen Garden
    list of all Zen Garden designs added to date..980+ layouts
  • Flexi-Floats
    3 Column CSS Layout – Fluid, Multi-Column Stretch – Header, Footer, Fluid Center – Fixed or Fluid widths
  • Layout Gala
    by Alessandro Fulciniti – a collection of 40 CSS layouts based on the same markup and ready for download!
  • Look Ma, No Tables.
    CSS Layout Techniques: for Fun and Profit
  • ThreeColumnLayouts
    css-discuss – Bob Easton
  • Open Source Web Design
    Download and upload free web designs
  • Open Web Design
    Download and upload free web designs
  • Sample CSS Page Layouts
    Here are a range of CSS page layouts, including 2 column and 3 column layouts – free to use and abuse as needed
  • Yet Another Multicolumn Layout
    A multi-column layout


  • ThickBox 2.0
    Cody Lindley – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
  • Lightbox Gone Wild!
    Particletree – Chris Campbell
  • Suckerfish HoverLightbox
    Jonathan Christopher
  • Lightbox JS v2.0
    by Lokesh Dhakar
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers


  • Architecting CSS
    The first step in architecting our CSS is to devise a plan for organizing our files…..
  • CSS Organization
    Tip 1: Flags
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll – Authentic Boredom
  • CSS Advanced Guide
    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 Panic Guide
    This is not a complete resource, this is a fast resource….
  • CSS & Design Galleries
    List of CSS and Design Showcases
  • CSS Table Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Dynamic Drive CSS Library
    Practical CSS codes and examples
  • CSSplay
    Stu Nicholls – Experiments with Cascading Style Sheets
  • CSS tests and experiments
    Floats, Containers, margins, …Centering, Shrink wrapping, Images, Miscellaneous, hacks, inline-block, Layouts, Tables…
  • Stylish
    Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun
  • Professor X
    The Professor X extension for Firefox let’s you see inside a page’s head without viewing the sourcecode
  • X-Ray
    The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
  • CSSViewer
    A simple CSS property viewer.

Tips & Tricks


CSS Tables

CSS (and JS)Tooltips

  • Bubble Tooltips
    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.
  • qTip
    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 Finalized
    JavaScript Fading Tooltips
  • Tooltip.js
    …is the NEXT GENERATION in Tooltips; using the Web 2.0 approach of doing a simple thing, and doing it well.



  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    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 Guide
    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 Guide
    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 Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    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 Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial – CSS selectors
    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.
  • Site in an Hour
    by Andrew Krespanis – Making Simple Work of Complex CSS Layouts
  • Style master css tutorial
    hands on css tutorial – This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    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.
  • Stylesheets
    Cascading style sheets tutorials and style guide

Christiane ist seit vielen Jahren der gute Geist des Magazins. Sie hat zahlreiche Beiträge im Listen-Stil vorbereitet und zusammengestellt, sich um Moderation und E-Mails gekümmert.

31 Kommentare zu „CSS Quellensammlung
  1. Peter Djordjevic am 12. September 2006 um 15:15

    wow, jede menge arbeit für euch gewesen. Danke. Und viel „lesestoff“ für alle.

  2. mk81 am 12. September 2006 um 16:43


  3. Andreas am 12. September 2006 um 17:21

    Aber eine der wichtigsten Quellen fehlt: – gerade für Leute ohne Englischkenntnisse wohl die beste Quelle.

  4. Marco am 12. September 2006 um 17:23

    Ich bin begeistert. Danke!

    Gruss Marco

  5. Codezeilenkrieger am 12. September 2006 um 22:21

    DANKE – Wer täglich mit CSS zu tun hat wird den einen oder anderen Link zu schätzen wissen-klasse Arbeit!!

  6. links for 2006-09-13 « Benx Blog am 13. September 2006 um 08:26

    […] » CSS Quellensammlung CSS – Dr. Web Weblog (tags: css tutorial tips) […]

  7. Christoph am 13. September 2006 um 08:30

    Und noch eine weitere Seite, die fehlt,

    @Andreas, bei, „CSS 4 you – die deutsche Seite für Cascading Stylesheets (CSS)“ ist mir nicht ganz klar, wieso man

    a) einen solchen Domainnamen wählt f. eine „deutsche Seite“,
    b) einen (englischen) Titel wie „The finest in Stylesheets“ nimmt und
    c) die Seite mit Wörtern wie „Downloads“, „User-interface“, etc. spickt.

    Never mind, nur ´n Gedanke.



  8. Andy am 13. September 2006 um 11:07

    Danke! Sehr feine Liste.

  9. th am 16. September 2006 um 10:22

    Sehr gut!
    Hab alleine viel Zeit nur mit Rumstöbern verbracht.

  10. » Quellensammlung CSS — cne _LOG Archiv am 16. September 2006 um 13:31

    […] Dr. Web bietet eine sehr umfangreiche Linksammlung zum Thema CSS, in der jeder fündig werden sollte: CSS Quellensammlung CSS Tags: CSS, Links « Mikroformate per CSS auszeichnen […]

  11. CSS Quellensammlung « Word Up! am 16. September 2006 um 21:47

    […] CSS Quellensammlung by Dr. Web […]

  12. Nerdcore - A Blog about very cool Stuff. Und so. am 18. September 2006 um 00:19

    […] CSS Quellensammlung Umfangreiche (aber hallo!) Linksammlung zu CSS (tags: css tutorial webdesign) […]

  13. » CSS Quellensammlung :: am 19. September 2006 um 19:26

    […] Link zur Liste […]

  14. […] CSS (Cascading Stylesheets) Quellsammlung […]

  15. robert am 20. September 2006 um 11:31

    und zack, auch diese (wie vorher schon die ältere) unter die Favoriten gepackt… Mercy!

  16. […] CSS Quellensammlung Sehr umfangreiche Linkliste zum Thema CSS. Von Dr. Web. (tags: css WebDesign links) […]

  17. […] Dr Web CSS Resources will keep you busy for the rest of the day. […]

  18. links for 2006-09-18 » synapsenschnappsen am 26. September 2006 um 21:29

    […] » CSS Quellensammlung CSS – Dr. Web Weblog (tags: ToolTipps Linkverzeichnisse webdesign) […]

  19. links for 2006-09-13 » Missis Notizblock am 18. Februar 2007 um 23:52

    […] CSS Quellensammlung hybsche linkliste (tags: css) […]

  20. […] CSS Quellensammlung […]

  21. […] folgendem Link befindet sich eine grosse CSS […]

  22. › Dr. Liste am 31. Mai 2007 um 00:16

    […] Erkenntnis, die 2te: Statt drweb‘s berühmte Sammlungen zu Cheat Sheets, AJAX, CSS und irgendwas2.0 jeweils zu meinen zu schieben, fortan die Google-Suche benutzen […]

  23. […] gibt es ja wie Sand am Meer. Allerdings sind die meisten davon in englischer Sprache und deutschsprachige Webseiten fallen dort […]

  24. […] folgendem Link befindet sich eine grosse CSS […]

  25. […] altmodischem, tabellenbasiertem HTML gestrickt werden müssen, während im Internet schon längst tabellenloses Design zum guten Ton […]

  26. Designer Community Web Designers am 24. Februar 2008 um 21:53

    Principles of web Design: Content, Accessibility, Presentation….

    Designing good websites is not simply a case of throwing a load of funky graphics at the screen, there are 3 main areas to consider, here I give a brief overview of these key areas and explain why they are so important….

  27. sandrar am 10. September 2009 um 22:40

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  28. Dayanand am 5. Juli 2010 um 11:35


    CSS gallery is most important and useful to the website designer and thanks for your hard work.

    Deep from Software Development Company :

    Our Services :

    • Website Designing
    • Web Development
    • PHP Development

  29. inspire am 15. August 2012 um 23:23


    ist zwar schon ein sehr alter Beitrag. Aber die Seiten sind ja immer noch aktuell :). Und da hätte ich auch eine für die Liste:
    Hier findet man Website-Inspirationen.


Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!