Pin Me

The 5 Best Resources for CSS Tutorials

written by: Cheryl Conley•edited by: Michele McDonough•updated: 6/30/2011

Learning the syntax and techniques of CSS can be confusing. Throw in the different browser implementations and flavors of CSS and it becomes more complicated. This article can help. It identifies the five best resources for beginner and advanced CSS tutorials.

  • slide 1 of 2

    The 5 Best Beginner CSS Tutorial Resources

    These CSS tutorials are for beginning site designers and those that need to refresh their knowledge. Some of the tutorials are full courses. Others are comprehensive guides to tags, selectors, and their available properties.

    • Cascading Style Sheets: An Interactive Tutorial for Beginners
      This is an 11-chapter, interactive CSS tutorial produced by Davesite.com. Although it covers the CSS1 specification, it still provides a good foundation. The tutorials utilize illustrations and code samples to help explain CSS concepts. The site also has tutorials for HTML and Javascript.

    • CSS Beginner Tutorial
      The purpose of HTMLdog.com CSS tutorial is "to teach the bare essentials." The site has an intermediate and advanced component for further study.

    • W3C Schools CSS Tutorials
      This is a comprehensive CSS guide comes from the World Wide Web Consortium (W3C). The W3C is the official developer of web standards and guidelines. The tutorial details all aspects of CSS, has many code examples and gives a quiz. A HTML Developer Certification exam is available for a fee of $75. The exam tests knowledge of HTML, XHTML, and CSS.

    • Echoecho.com CSS Tutorials
      According to the site's owner, this tutorial "has been laid out so that it can be used both as a future reference and as an ongoing tutorial." It covers selector types and their use, adding layers to pages, browser compatibility, and much more. Quizzes are given to test comprehension.

    • CSS Guide
      This is complete web development course. It covers everything from XHTML basics to browser compatibilities to how to set up dynamic menus. Practice exercises are given.
  • slide 2 of 2

    The 5 Best Advanced CSS Tutorial Resources

    These CSS tutorials include workarounds, creative elements, and advanced techniques. Some code may not be compatible with all browsers.

    • Quick Tutorials
      Westciv.com has a collection of CSS tutorials that demonstrate how to add style to CSS layouts. Included techniques are: text flow around images, styling links, customized bullets, and many others. A hands-on tutorial and complete CSS guide are also available.

    • 53 CSS-Techniques You Couldn’t Live Without
      Smashing Magazine has compiled a list of the ultimate 53 CSS techniques. These tutorials include but are not limited to the following: tabs, bar graphs, collapsible tables, image replacement buttons, forms techniques, submit button customization, display for print layouts, and integration with PHP.

    • A List Apart CSS Tutorials
      Performing a search on CSS tutorials and checking include discussions brings up 37 advanced CSS how-to topics. They include variable opacity with PNG images, fluid grids, creating custom corners and borders, and horizontal drop-down menus.

    • Discover the “Cool" of CSS: 25 Advanced CSS Techniques
      Desizn Tech presents 25 advanced CSS techniques. The CSS tutorials include how to create a dashboard, creative text, transparency effects, an accordion layout, and much more.

    • 40 Advanced CSS Layout Tutorials
      Iyiz.com has compiled a list of 40 articles about advanced CSS layout techniques. These tutorials cover horizontally scrolling sites, 3-column designs, 2-column designs, how to design layouts from scratch, and everything in between.