Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

Mastering CSS, Part 1: Styling Design Elements

Advertisement

CSS is one of the most important building blocks of modern web design. Standards demand the use of CSS for formatting and styling pages, and with good reason. It’s lighter-weight and capable of much more than older methods like tables.

And CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site.

1. Layout and User Interface Techniques Link

CSS is now the primary language used to create page layouts on modern websites. There are almost limitless possibilities for creating page layouts and user interfaces with CSS, but below are some of the more interesting techniques.

The simplest way to horizontally and vertically center a DIV1
This article covers centering a DIV, both vertically and horizontally, using CSS. While many code snippets out there show how to do this through the use of parent and child DIVs, this particular method uses a single DIV and is much simpler.

The simplest way to horizontally and vertically center a DIV2

New CSS Sticky Footer – 20093
Here’s a sticky footer technique that’s completely cross-browser compatible. It even works in Google Chrome. And it doesn’t require an empty push DIV either.

Simple Page Peel Effect with jQuery and CSS4
This tutorial combines jQuery and CSS to create a page peel effect. Most sites using this effect are Flash-driven, so this is a nice alternative if you’re not crazy about using Flash (or don’t know how).

Simple Page Peel Effect with jQuery and CSS5

Equal height boxes with CSS6
Here’s a basic example of creating equal-height boxes (faux columns) using CSS. It works similarly to cells in a table, but without the messy table bits.

Adaptable view – how do they do it?7
Letting users manually change the way your site appears can greatly improve the site’s usability and the likelihood that users will have positive experience (and come back for more). This tutorial shows you how to implement adaptable viewing techniques for your site.

Adaptable view - how do they do it?8

CSS: The All-Expandable Box9
Here’s a tutorial for creating a CSS box that will expand in all directions to fit the content contained within it, instead of just vertically. It works especially well if users increase the font size but making the entire box larger, instead of just shifting the content around and making the box longer vertically.

Four Methods to Create Equal Height Columns 10
Here’s another tutorial for creating equal-height columns in CSS, this time covering four different techniques. The techniques covered work in all major browsers (even IE6).

Four Methods to Create Equal Height Columns 11

Vertical Centering With CSS12
This post covers a variety of the best techniques for centering CSS elements vertically on a page. It also covers how to create a simple little vertically-centered website using the techniques.

 Vertical Centering With CSS13

CSS vertical center using float and clear14
Here’s another tutorial for creating a vertically-centered CSS box using float and clear. It even works in IE5 for the Mac, just in case.

Cross-Browser Inline-Block15
This tutorial covers how to create an inline-block layout that works with varying levels of content without breaking the layout.

 Cross-Browser Inline-Block16

The CSS “Ah-ha!” Moment17
Here’s a post talking about the “Ah-Ha!” moment most designers have at some point in their careers, where some vital bit of design knowledge suddenly makes perfect sense. In this case, it’s the relationship of CSS boxes within a layout.

The CSS 18

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning 19
This article gives a comprehensive overview of CSS layers, relative and absolute positioning, and Z-Index properties.

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning 20

The CSS Overflow Property 21
Here’s a complete run-down of how the different settings for the CSS overflow property work. It includes visible (the default), hidden, scroll, and auto, with illustrated examples of each.

The CSS Overflow Property 22

Absolute, Relative, Fixed Positioning: How Do They Differ? 23
The differences between absolute, relative, and fixed positioning with CSS can be confusing at times. This article shows the difference between each one and when it’s appropriate to use one or another.

display: inline-block24
Here’s a cross-browser (mostly) compatible method of creating inline blocks in a variety of styles. There are some differences, though, between the vertical alignment interpretation between browsers.

display: inline-block25

2. Navigation and Menu Techniques Link

Good navigation is vital part of any website. Good navigation is both user-friendly and complements the rest of the site’s design elements. Below are some techniques and tips for creating navigation that does both.

Create dropdown menus with CSS only26
A complete tutorial on creating CSS-based dropdown menus that behave like dropdown lists. It’s a short and easy-to-implement method.

Create dropdown menus with CSS only27

Simple scalable CSS based breadcrumbs 28
Using breadcrumbs on your site can make it easier for your visitors to navigate. And this tutorial shows a method for creating scalable breadcrumbs using CSS.

Simple scalable CSS based breadcrumbs 29

Horizontal Sub-nav with CSS and jQuery 30
Here’s a complete tutorial on creating a horizontal navigation submenu using purely CSS (in most cases, anyway). If you want it to work in IE6, you’ll need to implement some jQuery, too.

Horizontal Sub-nav with CSS and jQuery 31

CSS Step Menu32
Creating a stepped menu (also referred to as a “wizard menu”) can be tricky, especially when it has to change the number of steps depending on what it’s being used for. Here’s an example of one with information on how to create your own.

 CSS Step Menu33

The Tabbed Breadcrumb Navigation34
A comprehensive tutorial on creating breadcrumb navigation formatted as tabs.

The Tabbed Breadcrumb Navigation35

Apple’s Navigation bar using only CSS
This tutorial shows how to create an Apple-like navigation bar using only CSS and HTML (with no images).

 Apple's Navigation bar using only CSS

Sitemap Celebration36
Here’s a sitemap style that’s cross-browser compatible (even back to IE5 for the Mac) and based on nested lists.

Sitemap Celebration37

Nice CSS menu with feed reader icons list38
Create a menu of feed reader icons using CSS. It could easily be adapted to other types of menus.

Nice CSS menu with feed reader icons list39

Multi-level Menus with jQuery and CSS40
Here’s a collection of techniques for creating multi-level menus in pure CSS and CSS/JS. In addition to basic techniques, it also covers more advanced and creative examples.

 Multi-level Menus with jQuery and CSS41

3. Image Styles and Galleries Link

Styling of images is an oft-overlooked element of page design. The techniques and tips featured below should help you remedy that situation on any of the sites you’ve designed.

Centering images with CSS 42
Some basic information on centering images using CSS instead of deprecated HTML.

Add a Custom “Trendy” Border Around Blog Images With CSS and JavaScript43
A complete rundown of how to create a variety of border styles around the images on your blog using both JavaScript and CSS.

Add a Custom Trendy Border Around Blog Images With CSS and JavaScript44

Sexy Music Album Overlays 45
A great tutorial for adding a bit more style to any image gallery, though it uses an album cover gallery as an example.

Sexy Music Album Overlays 46

Create CSS pin balloons with ease47
This is an awesome technique for adding pin balloons or speech bubbles to an image or map that expand on rollover from an anchor point.

Create CSS pin balloons with ease48

Create an Image Rotator with Description (CSS/jQuery)49
A great tutorial on how to create an image rotator/gallery using CSS and jQuery. It creates a clean UI for displaying a portfolio or general image gallery.

 Create an Image Rotator with Description (CSS/jQuery)50

5 Popular CSS Speech Bubbles51
A collection of five different techniques for creating speech bubbles using CSS (some of them using only CSS).

5 Popular CSS Speech Bubbles52

How to Make a Threadless Style T-Shirt Gallery53
A tutorial for creating an image gallery similar to the one on the Threadless54 website, with a caption or overlay on top of an image or thumbnail, among other features.

How to Make a Threadless Style T-Shirt Gallery55

CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)56
Here’s a method for swapping special print- and screen-optimized images into your pages depending on the stylesheet being used.

CSS image replacement for... images?  It makes sense for print. (Ask the CSS Guy)57

Beautiful new CSS: box-shadow58 (in German)

Beautiful new CSS: box-shadow59

4. Typography Techniques Link

CSS really excels at typography styling. Everything from font type to weight to color is defined using CSS. Here are a number of tutorials to help you create better web typography.

Truetype, Font Variants and Antialiasing60
A great article on some issues with using Truetype fonts and how they sometimes don’t show up as you had hoped (or planned).

  Truetype, Font Variants and Antialiasing61

Styling Ordered Lists with CSS 62
A tutorial for creating a very appealing ordered list with CSS.

Styling Ordered Lists with CSS 63

Beautiful fonts with @font-face 64
The basics of using @font-face for inserting truetype fonts within your designs.

Beautiful fonts with @font-face 65

Forgotten possibilities of :first-letter in CSS66 (in Russian)

 First-letter67

8 Definitive Web Font Stacks 68
A collection of eight CSS font stacks that are based on the format of exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), and generic. These are grouped depending on the impression they’re likely to give visitors.

8 Definitive Web Font Stacks 69

Mike’s Experiments – CSS: Perspective Text70
An interesting example of creating text with a perspective effect (so the bottom of a block of text looks closer than the top).

Mike's Experiments - CSS: Perspective Text71

Fonts for web design: a primer72
A great guide to typography aimed specifically at web designers that includes an overview of the types of fonts, their appropriate uses, and the use of specialist typefaces for web design.

Fonts for web design: a primer73

CSS text-shadow Fun: Realtime Lighting Demo 74
A really neat example of using the text-shadow property combined with JavaScript to create a lighting demo.

CSS text-shadow Fun: Realtime Lighting Demo 75

Rendering Quotes With CSS76
A guide to using quotation marks in CSS, including how to create standard quotes for different countries.

Rendering Quotes With CSS77

Six Ways to Style Blockquotes78
A tutorial of different methods for styling the blockquote XHTML tag with CSS.

Six Ways to Style Blockquotes79

Make OL list start from number different than 1 using CSS80
A simple tutorial for starting an ordered list number from any number you want.

 Make OL list start from number different than 1 using CSS81

Use CSS to Override Default Text Selection Color 82
Choose any color you want to become the text highlight color on your sites with this method.

CSS Drop Cap Effect 83
A drop cap can set your site apart, especially if it’s a magazine or book website (or otherwise related to the literary trades). Here’s a CSS method for creating them.

Icons, buttons and links are another overlooked element on many pages. But they can also make a huge impact on your overall design. Below are some resources for styling better ones.

Add Progressive Icons to Your Site Using :after pseudo-element84
This tutorial shows how to use descriptive icons for your links, mainly to show the type of file being linked to (such as a PDF or ZIP archive).

Add Progressive Icons to Your Site Using :after pseudo-element85

Super Awesome Buttons with CSS3 and RGBA86
A tutorial for creating great buttons using CSS3 and alpha-blending techniques.

 Super Awesome Buttons with CSS3 and RGBA87

Scalable CSS Buttons Using PNG and Background Colors88
A tutorial for creating buttons scalable both horizontally and vertically using PNG images. The technique degrades gracefully, so even users in IE6 will still see the button (just without the PNG).

Scalable CSS Buttons Using PNG and Background Colors89

Add File Type Icons next to your links with CSS90
Another tutorial for adding file type icons to your links.

 Web-kreation -   Add File Type Icons next to your links with CSS91

22 CSS Button Styling Tutorials and Techniques 92
Here’s a comprehensive resource list covering more than 20 techniques for creating buttons of all shapes and sizes with CSS.

CSS Tricks’ Link Nudge93
A tutorial for creating links that nudge sideways when they’re hovered over.

CSS Tricks' Link Nudge94

Sanscons 95
This is an icon set that can be recolored using just CSS.

  Sanscons 96

Footnotes Link

  1. 1 http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div
  2. 2 http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div
  3. 3 http://www.cssstickyfooter.com//
  4. 4 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
  5. 5 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
  6. 6 http://www.456bereastreet.com/lab/equal_height/
  7. 7 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
  8. 8 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
  9. 9 http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
  10. 10 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
  11. 11 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
  12. 12 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  13. 13 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  14. 14 http://d-graff.de/fricca/center.html
  15. 15 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  16. 16 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  17. 17 http://css-tricks.com/the-css-ah-ha-moment/
  18. 18 http://css-tricks.com/the-css-ah-ha-moment/
  19. 19 http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
  20. 20 http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
  21. 21 http://css-tricks.com/the-css-overflow-property/
  22. 22 http://css-tricks.com/the-css-overflow-property/
  23. 23 http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  24. 24 http://www.brunildo.org/test/inline-block.html
  25. 25 http://www.brunildo.org/test/inline-block.html
  26. 26 http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx
  27. 27 http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx
  28. 28 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
  29. 29 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
  30. 30 http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
  31. 31 http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
  32. 32 http://codylindley.com/CSS/325/css-step-menu
  33. 33 http://codylindley.com/CSS/325/css-step-menu
  34. 34 http://www.teehanlax.com/blog/?p=211
  35. 35 http://www.teehanlax.com/blog/?p=211
  36. 36 http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html#now-here
  37. 37 http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html#now-here
  38. 38 http://woork.blogspot.com/2008/06/nice-css-menu-with-feed-reader-icons.html
  39. 39 http://woork.blogspot.com/2008/06/nice-css-menu-with-feed-reader-icons.html
  40. 40 http://blog.themeforest.net/resources/multilevel-menus-with-jquery-and-css/
  41. 41 http://blog.themeforest.net/resources/multilevel-menus-with-jquery-and-css/
  42. 42 http://www.devlounge.net/code/centering-images-with-css
  43. 43 http://www.impressivewebs.com/add-a-custom-trendy-border-around-blog-images-with-css-javascript/
  44. 44 http://www.impressivewebs.com/add-a-custom-trendy-border-around-blog-images-with-css-javascript/
  45. 45 http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/
  46. 46 http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/
  47. 47 http://www.jankoatwarpspeed.com/post/2009/04/19/Create-CSS-pin-balloons-with-ease.aspx
  48. 48 http://www.jankoatwarpspeed.com/post/2009/04/19/Create-CSS-pin-balloons-with-ease.aspx
  49. 49 http://designm.ag/tutorials/image-rotator-css-jquery/
  50. 50 http://designm.ag/tutorials/image-rotator-css-jquery/
  51. 51 http://www.cssjuice.com/5-popular-css-speech-bubbles/
  52. 52 http://www.cssjuice.com/5-popular-css-speech-bubbles/
  53. 53 http://buildinternet.com/2009/06/how-to-make-a-threadless-style-t-shirt-gallery/
  54. 54 http://threadless.com
  55. 55 http://buildinternet.com/2009/06/how-to-make-a-threadless-style-t-shirt-gallery/
  56. 56 http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html
  57. 57 http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html
  58. 58 http://www.peterkroener.de/schoenes-neues-css-box-shadow/
  59. 59 http://www.peterkroener.de/schoenes-neues-css-box-shadow/
  60. 60 http://www.sitepoint.com/blogs/2009/06/08/truetype-font-variants-and-antialiasing/
  61. 61 http://www.sitepoint.com/blogs/2009/06/08/truetype-font-variants-and-antialiasing/
  62. 62 http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
  63. 63 http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
  64. 64 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  65. 65 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  66. 66 http://rotorweb.ru/tipografika/zabytye-vozmozhnosti-first-letter.html
  67. 67 http://rotorweb.ru/tipografika/zabytye-vozmozhnosti-first-letter.html
  68. 68 http://www.sitepoint.com/article/eight-definitive-font-stacks/
  69. 69 http://www.sitepoint.com/article/eight-definitive-font-stacks/
  70. 70 http://green-beast.com/experiments/css_perspective_text.php#n30
  71. 71 http://green-beast.com/experiments/css_perspective_text.php#n30
  72. 72 http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/
  73. 73 http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/
  74. 74 http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html
  75. 75 http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html
  76. 76 http://monc.se/kitchen/129/rendering-quotes-with-css#respond
  77. 77 http://monc.se/kitchen/129/rendering-quotes-with-css#respond
  78. 78 http://www.cssnewbie.com/six-ways-style-blockquotes/
  79. 79 http://www.cssnewbie.com/six-ways-style-blockquotes/
  80. 80 http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
  81. 81 http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
  82. 82 http://css.dzone.com/news/overriding-default-text-select
  83. 83 http://tinsology.net/2009/06/css-drop-cap-effect/
  84. 84 http://www.myinkblog.com/2009/07/17/add-progressive-icons-to-your-site-using-after-pseudo-element/
  85. 85 http://www.myinkblog.com/2009/07/17/add-progressive-icons-to-your-site-using-after-pseudo-element/
  86. 86 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  87. 87 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  88. 88 http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors
  89. 89 http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors
  90. 90 http://web-kreation.com/index.php/html-css/add-file-type-icons-next-to-your-links-with-css/
  91. 91 http://web-kreation.com/index.php/html-css/add-file-type-icons-next-to-your-links-with-css/
  92. 92 http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
  93. 93 http://remysharp.com/2009/01/05/css-tricks-link-nudge/
  94. 94 http://remysharp.com/2009/01/05/css-tricks-link-nudge/
  95. 95 http://somerandomdude.com/projects/sanscons/
  96. 96 http://somerandomdude.com/projects/sanscons/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertisement
  1. 1

    Awesome! Thank you very much.

    4
  2. 2

    Fab, have bookmarked this for future use.

    0
  3. 3

    Great stuff, very usable

    Keep it up!

    0
  4. 4

    Very helpful… Thks!!!

    0
  5. 5

    Christian Schilling

    August 3, 2009 2:16 am

    I think the css sticky footer was here long before New CSS Sticky Footer
    on http://www.cssstickyfooter.com/, at least I dont see any real differences between the markup/css and the old way (footer stick alt) from about 2005 (http://www.themaninblue.com/writing/perspective/2005/08/29/).

    Am I something missing?

    0
  6. 6

    Wonderful & deep tutorial! I’ll come back here often, sure! Thanks for share it!

    0
  7. 7

    Very helpful.

    0
  8. 8

    This is definitely great & useful post :) Thanks !

    0
  9. 9

    A useful collection of tutorials. Thanks.

    0
  10. 10

    Top of the ROCK!

    0
  11. 11

    I guess it’s an interesting article… but I can’t open the link…
    Can anyone help?..

    0
  12. 12

    Great post, useful and interesting – all you could ever ask for really!

    The Future of Mobile Web Design?

    -1
  13. 13

    Very important article !!! Exactly what I was looking for. Many thanks!

    -1
  14. 14

    Great article. Loved it!

    -1
  15. 15

    What a nice article…

    -1
  16. 16

    Useful compendium. Thanks.

    -1
  17. 17

    In the first paragraph under section 1, I think “There are almost limited possibilities” should be “limitless possibilities.

    -1
  18. 18

    Bradford Sherrill

    August 3, 2009 4:34 am

    Great read!

    -1
  19. 19

    Nice article! I’m really looking forward to more articles like this :)

    -1
  20. 20

    Awesome…. looking forward to more articles like this….

    -1
  21. 21

    I loved the ‘Ah-ha’ moments one. My most recent Ah-ha moment was when I worked out that any page element can be styled without naming. In some way I already knew this, but had never thought about the possibilities. You could have a beautiful and well styled webpage with just about no div or span tags at all.

    -1
  22. 22

    Thank you very much.
    It’s really helpful to overlook, what you as a webdesigner of the next generation have to know. I’m really looking forward to take some hours and to read all that stuff.

    SmashingMagazine – kinda like a tollfree school for webdesigners. :D

    -1
  23. 23

    Very useful article! thanks for sharing! :)

    -1
  24. 24

    love it, thanks

    -1
  25. 25

    Floris Fiedeldij Dop

    August 3, 2009 6:29 am

    I seriously enjoy these articles, for html5, css3, and other web elements. Keep this good stuff coming.

    -1
  26. 26

    Thank you for this.

    -1
  27. 27

    awesome stuff.. thanks SM!

    -1
  28. 28

    Thought I have seem most of these tutorials it’s great to see there finally being shown praise.

    -1
  29. 29

    Very very usefull! Thank you again!

    0
  30. 30

    Good stuff.

    0

↑ Back to top