Best CSS Tutorial and Technique Resources

Best CSS Tutorial and Technique Resources
Page content

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.

  • <em><strong>W3C Schools CSS Tutorials</strong></em>
    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.

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.

  • <em><strong>Quick Tutorials</strong></em>
    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.

  • <em><strong>53 CSS-Techniques You Couldn’t Live Without</strong></em>
    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.

  • <em><strong>A List Apart CSS Tutorials</strong></em>
    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.

  • <em><strong>Discover the “Cool” of CSS: 25 Advanced CSS Techniques</strong></em>
    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.