- You are here:
- WebsiteTips Home
- Web Site Resources
- Markup, Code
- CSS
- CSS Tutorials
- Articles, General CSS Tutorials
CSS - Cascading Style Sheets
CSS Tutorials, Articles, and Tips, Page 1
CSS Articles, General CSS Tutorials
The CSS Articles and General CSS Tutorials section below includes annotated links to helpful articles about CSS and general tutorials on CSS.
Within the other CSS Articles and Tutorials pages you'll find tutorials on CSS layouts and positioning, CSS menus, navigation, and styling lists, and tutorials on centering with CSS, style sheets for print, how to use CSS shorthand properties, styling links with CSS, and more.
IE7 CSS Hacks, IE8 CSS Bugs, Bug Fixes, Solutions: Wondering what to expect with CSS and Internet Explorer 8? Want some information about conditional comments? Looking for IE7 CSS hacks? Going nuts with a browser problem with your CSS? Check out Solutions to CSS Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform CSS Issues.
On this page:
Also within CSS Tutorials:
- Layouts with CSS, CSS Positioning
- Lists, Menus, Navigation, and Rollovers with CSS
- CSS Fonts, CSS Typography
- Print-Friendly Web Pages and CSS
- Centering, Links, Scrollbars, Style Switching, Media Types, Selectors, CSS Shorthand
Also within CSS - Cascading Style Sheets:
- CSS - Cascading Style Sheets Home
- W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
- Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser, Cross-Platform CSS Issues (1 page)
- CSS Sites, Resources, and Books (1 page)
- CSS Templates (1 page)
- CSS Tools - Editors, Reference Charts, Validators, and More (1 page)
- CSS Discussion Lists, Newsgroups (1 page)
Articles on CSS
Articles about CSS, the benefits of using style sheets, approaches to CSS, browser considerations.
- Separation: The Web Designer's Dilemma
An insightful article on what it means to separate content from its presentation and why it matters. [Article dated 05/14/2004, by Michael Cohen, for A List Apart.] - Top 10 Reasons to Learn CSS
An interview with Christopher Schmitt. Its ability to control typography and layout throughout a Web site always seemed to make CSS the most efficient, designer-friendly, forward-looking option; however, myths persist about CSS that discourage Web designers from getting to grips with the language. Christopher explains the top 10 reasons why it matters to learn and use CSS. [Article dated 2004, Sessions.edu.] - Whatever for?
An article by Owen Briggs on why standards matter, including CSS. Editor note November 2005: Although written in 2001, it's just as valid right now as it was then. [Article dated 2001, by Owen Briggs, thenoodleincident.com.] - Why use Cascading Style Sheets?
Helpful explanation of the benefits of using CSS. [Article via CSS Discuss Wiki.]
Books on CSS
Recommended by WebsiteTips.com
See more CSS books, read reviews, why we recommend each book
General CSS Tutorials and Tips
The tutorials and tips listed below are more introductory or more general. See also the CSS Articles and Tutorials menu above for more specific CSS techniques, such as handling lists, layouts and positioning, centering, specific CSS elements, and more.
- Adding a Touch of Style
by Dave Raggett, W3C. Introduction to the world of style sheets by an authority. Editor note February 2006: Definitely a bit dated at this point, but still worth checking out. [Article updated 04/08/2002. By Dave Raggett, W3C.] - Converting Existing Content to CSS
For WebsiteTips.com by Shirley Kaiser, SKDesigns. Want to learn some basic CSS to convert your existing<font>
element tags to style sheets? This interactive tutorial will provide you with the basics to get you started designating fonts, colors, hyperlinks, formatting, and using style blocks and external style sheets. [Article dated 10/21/01 by Shirley Kaiser, SKDesigns, for WebsiteTips.com.] - CSS 101: Cascading Style Sheets Beginners Course
Excellent series of online tutorials with assignments and examples to help you learn how to create CSS, from basics into CSS positioning. Helpful explanations. Well done. [Tutorial dated 04/30/2005. Written by Makiko Itoh, as part of her book's Web site, Create Web Magic.] - CSS Advanced Guide
Covers display; page layout; at-rules; pseudo elements, and specificity. Very well done series of tutorials by HTML Dog. See also their CSS Beginner's Guide and CSS Intermediate Guide. [Tutorials dated 2005, by Patrick Griffiths, for HTML Dog.] - The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 1 - Getting Started with CSS
This is one of several chapter excerpts available online from Rachel's fantastic book, The CSS Anthology: 101 Essential Tips, Tricks and Hacks. This particular excerpt covers the basics of getting started, including defining styles, CSS selectors (selector tags, pseudo-class selectors, class selectors, ID selectors, contextual selectors), and touches on CSS properties. [Tutorial dated 11/10/2004, by Rachel Andrew, for SitePoint.] - CSS Basics
Excellent introductory tutorial on the basics of CSS. Begins with the “old” way of styling pages and why CSS is better. It then covers basic CSS syntax, four ways to use/define CSS (Inline, Embedded, Imported, Linked [Editor note: imported and linked are both external style sheets, the preferred method of CSS]), CSS inheritance, CSS comments, and a short FAQ. Easy to follow. This tutorial is one of an entire series of well done tutorials on creating a Web page. [Article/tutorial by Debbie T, debbie T Designs.] - CSS Beginner's Guide
Covers applying CSS; selectors, properties and values; colours; text; margins and padding; borders; putting it all together. Very well done series of tutorials by HTML Dog. See also their CSS Intermediate Guide and CSS Advanced Guide. [Tutorials dated 2005, by Patrick Griffiths, for HTML Dog.] - CSS Crib Sheet
Exceptional list of helpful tips and basics to keep in mind with CSS - order of styling link pseudo-classes (Link
,Visited
,Hover
,Active
), avoid applying padding/border and a specified width, and many more. [Article/tutorial dated 11/19/2003, by Dave Shea, for mezzoblue.com.] - CSS Examples
For CSS1 and CSS2. An excellent reference and resource to see the CSS and the results of dozens of examples of CSS implementation. Backgrounds, text, fonts, borders, margins, padding, lists, dimension, classifications, positioning, pseudo-classes, pseudo-elements. [W3 Schools Web site. Hat tip: css-discuss] - CSS Guide
A multitude of tutorials on CSS, explaining all the basics of CSS. Helpful information here. [Site last updated 12/07/2004. By Tapio Markula.] - CSS Intermediate Guide
This series of tutorials at HTML Dog covers Class and ID selectors; grouping and nesting; pseudo classes; shorthand properties; background images. Like their CSS Beginner's Guide, this series is very well done and explains things well. See also their CSS Advanced Guide. [Tutorials dated 2005, by Patrick Griffiths, for HTML Dog.] - CSS Style Sheets and Tips
NYPL Style Guide. Top-notch Introduction to CSS (with examples), CSS definitions and benefits, tips on authoring, plus extensive resources. Highly recommended! [Styleguide by Carrie Bickner, Jeffrey Zeldman for the New York Public Library.] - The Definitive Post on Gzipping your CSS
Great weblog/blog post on how to compress your CSS files very simply, and includes a couple of different approaches. [Article/tutorial dated 06/14/2004, by fiftyfoureleven.com.] - The
<div>
Tag
Excellent introductory tutorial on how to use the<div>
element to help with page layouts, dividing up your page (header, content, footer, etc.). Easy to follow. This tutorial is one of an entire series on creating a Web page. [Article/tutorial by Debbie T, debbie T Designs.] - Everything you ever wanted to know about Style
by John Allsopp, House of Style. Thorough tutorial about CSS. Great resource. The House of Style Web site is a thorough resource for CSS, too. [Tutorial by John Allsopp, Westciv.] - Introduction to CSS
Well-written introduction to CSS that can help get you started. Covers syntax, how to implement CSS, backgrounds, text, fonts, borders, margins, lists, and more. Kept current. Check all of W3Schools Web site for much more on CSS. [Tutorial by W3 Schools.] - Ten CSS Tricks You May Not Know
Tricks include CSS shorthand, using two CSS classes together, CSS border default, CSS for print, image replacement, a CSS box model hack alternative, center aligning a block element, vertical aligning with CSS, CSS positioning within a container, and a background color running the full length of the screen when desired. [Article dated 09/2004, by Trenton Moss, for webcredible.co.uk.] - Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know
Great tutorial with lots of helpful techniques and approaches, along with cross-browser support info. “With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren't widely supported by the dominant browsers, but some very useful ones are — including newer features from CSS3.” [Article/tutorial dated 04/09/2008, by Tim Wright, for Sitepoint.] - Web Page Development: Best Practices
Great tutorial that overviews doctypes, page layout with CSS, XHTML, avoiding the use of deprecated markup and old, outdated ways of creating Web page markup, accessibility, CSS box model, CSS selectors, JavaScript, and more. Well done. Includes links to more information, resources, W3C specs. [Article dated 2005, by developer.apple.com.] - What is CSS?
A helpful introduction to CSS, including how CSS works, linking stylesheets, units of measure, CSS-P (position), attributes, CSS properties, CSS examples. [Tutorial by Webmonkey.]
Feedback Request: Were you able to find what you were looking for easily? Have any problems? Find a broken link? I welcome feedback so WebsiteTips.com can continue to improve. Thanks!