CSS: Techniques, Tutorials, Layouts

Advertisement

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

Lightboxes

CSS Lists, Navigation, Menus, Rollovers

Miscellaneous

Tips & Tricks

Slideshows

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

Articles

Tutorials

  • 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
  • CSS TUTORIAL128
    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

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
  2. 2 http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
  3. 3 http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
  4. 4 http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
  5. 5 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
  6. 6 http://blog.leetsoft.com/2006/8/22/super-simple-css-bars
  7. 7 http://www.maxdesign.com.au/presentation/percentage/
  8. 8 http://www.maxdesign.com.au/presentation/percentage/
  9. 9 http://petewilliamsagency.com/css/examples/pie/
  10. 10 http://www.surfare.net/%7Etoolman/temp/diagram.html
  11. 11 http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
  12. 12 http://komodomedia.com/blog/index.php/2006/01/09/css-star-rating-part-deux/
  13. 13 http://clagnut.com/blog/241/
  14. 14 http://www.alistapart.com/articles/prettyaccessibleforms
  15. 15 http://www.alistapart.com/articles/prettyaccessibleforms
  16. 16 http://www.456bereastreet.com/archive/200409/styling_form_controls/
  17. 17 http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
  18. 18 http://jeffhowden.com/code/css/forms/
  19. 19 http://www.formassembly.com/form-garden.php
  20. 20 http://www.cssreboot.com/
  21. 21 http://icant.co.uk/csstablegallery/index.php
  22. 22 http://icant.co.uk/csstablegallery/index.php
  23. 23 http://www.designmeltdown.com/
  24. 24 http://blog.html.it/layoutgala/
  25. 25 http://www.cssliquid.com
  26. 26 http://www.netzfruehling.de/
  27. 27 http://www.oswd.org
  28. 28 http://tom.ma/screenblog/
  29. 29 http://www.unmatchedstyle.com/gallery/
  30. 30 http://www.webcreme.com
  31. 31 http://www.frankmanno.com/ideas/css-imagemap/
  32. 32 http://mikecherim.com/experiments/css_map_pop.php
  33. 33 http://www.andyrutledge.com/cssslides.html
  34. 34 http://www.cssplay.co.uk/menu/gallery4.html
  35. 35 http://sonspring.com/journal/hoverbox-image-gallery
  36. 36 http://www.cssplay.co.uk/menu/gallery3l.html
  37. 37 http://www.cssplay.co.uk/layouts/index.html
  38. 38 http://intensivstation.ch/en/templates/
  39. 39 http://www.mezzoblue.com/zengarden/alldesigns/
  40. 40 http://www.tanfa.co.uk/css/layouts/flexi-floats-3col.asp
  41. 41 http://blog.html.it/layoutgala/
  42. 42 http://glish.com/css/
  43. 43 http://css-discuss.incutio.com/?page=ThreeColumnLayouts
  44. 44 http://www.oswd.org/
  45. 45 http://openwebdesign.org/browse.php
  46. 46 http://maxdesign.com.au/presentation/page_layouts/
  47. 47 http://www.yaml.de/
  48. 48 http://jquery.com/demo/thickbox/
  49. 49 http://particletree.com/features/lightbox-gone-wild/
  50. 50 http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/
  51. 51 http://www.huddletogether.com/projects/lightbox2/
  52. 52 http://www.eight.nl/files/leightbox/
  53. 53 http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
  54. 54 http://odyniec.net/articles/turning-lists-into-trees/
  55. 55 http://tutorials.alsacreations.com/modelesmenus/
  56. 56 http://icant.co.uk/articles/flexible-css-menu/
  57. 57 http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/
  58. 58 http://e-lusion.com/design/menu/#1
  59. 59 http://www.twinhelix.com/dhtml/fsmenu/
  60. 60 http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/
  61. 61 http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/
  62. 62 http://www.webmaster-toolkit.com/css-menu-generator.shtml
  63. 63 http://www.highdots.com/css-list/index.php
  64. 64 http://www.brainjar.com/css/tabs/
  65. 65 http://www.sgclark.com/sandbox/minislide/
  66. 66 http://www.maxdesign.com.au/presentation/folder-metaphor/
  67. 67 http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html
  68. 68 http://www.htmldog.com/articles/suckerfish/dropdowns/example/
  69. 69 http://wellstyled.com/css-nopreload-rollovers.html
  70. 70 http://www.cssplay.co.uk/menus/drop_variation.html
  71. 71 http://www.digital-web.com/articles/architecting_css/
  72. 72 http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
  73. 73 http://www.cameronmoll.com/archives/001211.html
  74. 74 http://www.htmldog.com/guides/cssadvanced/
  75. 75 http://www.thenoodleincident.com/tutorials/css/index.html
  76. 76 http://www.drweb.de/weblog/weblog/?p=517
  77. 77 http://icant.co.uk/csstablegallery/index.php
  78. 78 http://www.dynamicdrive.com/style/
  79. 79 http://www.cssplay.co.uk/index.html
  80. 80 http://www.brunildo.org/test/
  81. 81 https://addons.mozilla.org/firefox/2108/
  82. 82 https://addons.mozilla.org/firefox/2104/
  83. 83 http://www.communitymx.com/content/article.cfm?cid=0536D&print=true
  84. 84 http://web-graphics.com/mtarchive/001589.php
  85. 85 http://rafael.adm.br/css_browser_selector/
  86. 86 http://centricle.com/ref/css/filters/
  87. 87 http://www.maratz.com/blog/archives/2005/05/02/image-preloader/
  88. 88 http://lab.arc90.com/2006/07/link_thumbnail.php
  89. 89 http://meyerweb.com/eric/css/edge/popups/demo.html
  90. 90 http://mikecherim.com/experiments/css_smart_corners.php
  91. 91 http://tools.sitepoint.com/spanky/
  92. 92 http://www.vertexwerks.com/tests/sidebox/
  93. 93 http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
  94. 94 http://www.alistapart.com/articles/cssmaps
  95. 95 http://www.user-archiv.de/projekt_css_schieberegler/
  96. 96 http://www.brainjar.com/css/cards/
  97. 97 http://meyerweb.com/eric/tools/s5/s5-intro.html
  98. 98 http://www.w3.org/Talks/Tools/Slidy/
  99. 99 http://www.s5easy.com/
  100. 100 http://icant.co.uk/csstablegallery/index.php
  101. 101 http://validweb.nl/artikelen/javascript/better-zebra-tables/
  102. 102 http://www.imaputz.com/cssStuff/bigFourVersion.html
  103. 103 http://web-graphics.com/mtarchive/001717.php
  104. 104 http://solardreamstudios.com/learn/css/qtip/
  105. 105 http://www.dustindiaz.com/sweet-titles-finalized
  106. 106 http://www.onlinetools.org/articles/cssguides.html
  107. 107 http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/
  108. 108 http://www.positioniseverything.net/articles/ie7-dehacker.html
  109. 109 http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58
  110. 110 http://juicystudio.com/article/div-mania.php
  111. 111 http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/
  112. 112 http://www.alistapart.com/articles/footers/
  113. 113 http://www.themaninblue.com/writing/perspective/2005/08/29/
  114. 114 http://www.positioniseverything.net/articles/onetruelayout/
  115. 115 http://www.robertnyman.com/2005/07/05/is-image-replacement-really-worth-it/
  116. 116 http://builder.com.com/5100-6371_14-6105783.html
  117. 117 http://www.elementary-group-standards.com/css/the-most-common-css-markup-errors.html
  118. 118 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  119. 119 http://www.webreference.com/authoring/style/sheets/layout/advanced/
  120. 120 http://www.cssbasics.com/
  121. 121 http://htmldog.com/guides/cssbeginner/
  122. 122 http://htmldog.com/guides/cssintermediate/
  123. 123 http://htmldog.com/guides/cssadvanced/
  124. 124 http://www.domedia.org/oveklykken/articles.php
  125. 125 http://glish.com/css/
  126. 126 http://www.seoconsultants.com/css/menus/tutorial/
  127. 127 http://www.w3schools.com/css/default.asp
  128. 128 http://www.echoecho.com/css.htm
  129. 129 http://css.maxdesign.com.au/floatutorial/
  130. 130 http://www.barelyfitz.com/screencast/html-training/css/positioning/
  131. 131 http://css.maxdesign.com.au/listutorial/
  132. 132 http://css.maxdesign.com.au/selectutorial/index.htm
  133. 133 http://leftjustified.net/site-in-an-hour/
  134. 134 http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
  135. 135 http://www.westciv.com/style_master/house/tutorials/index.html
  136. 136 http://www.yourhtmlsource.com/stylesheets/

↑ Back to topShare on Twitter

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

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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.

    Rob

  7. 7

    hi,

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

    Regards
    Kamaldeep

  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

    thanks..

  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