CSS - Cascading Style Sheets

CSS Tutorials, Articles, and Tips, Page 6

Centering, Links, Scrollbars, Style Switching, Media Types, Selectors, CSS Shorthand

The CSS Articles and Tutorials section below has links to helpful CSS tutorials on centering, style sheets for print, coloring scrollbars with CSS, how to use CSS shorthand properties, and more.

Within the other CSS Articles and Tutorials pages you'll find CSS articles and general CSS tutorials, tutorials on CSS layouts and positioning, CSS menus, navigation, and styling lists, 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.

Visit VisiBone, our CSS section sponsor

Centering with CSS

Learn how to manage centering using CSS via the following helpful tutorials. They each include the CSS with explanations and tips. Most also include links to more resources.

CSS Centering: Auto-width Margins
Helpful CSS and explanation for how to vertically center with CSS. [Tutorial by bluerobot.com.]
Centering Block Elements
This tutorial provides information on how to center block-level elements with a few different approaches. Includes links to resources, more information. Great source, and updated regularly with new information. [Article via css-discuss Wiki.]
Vertical & Horizontal Centering 2
Helpful information about using Bluerobot.com's auto-centering CSS approach, including cross-browser, cross-platform tips. [Tutorial dated 2003, by Jon Hicks, Hicks Design.]
Center with CSS
Since the HTML CENTER attribute does not have an identical counterpart in CSS, this tutorial provides directions how to center block-level elements, images, centering a table, more. [Tutorial via All My FAQs Wiki. Credits: Link via css-discuss.]

top ‘On this page’ menu

Styling Links with CSS

How do I get HOVER to work on my links?
Helpful basics about CSS and the HOVER CSS pseudo-class. Includes links to more resources and helpful tips. [FAQ by All My FAQs Wiki: CSS FAQs.]
Link Specificity
How to create hyperlinks with CSS, troubleshooting, terrific explanation of specificity and CSS. Good examples, easy to understand. [Tutorial dated 07/23/2003 by Eric Meyer, meyerweb.com.]
Simple, accessible external links
Accessible, user-friendly approaches to creating external links that let the user know they're going to an external source. [Article/tutorial dated 12/05/2005, by Russ Weakley Max Design.]
Simple, accessible “more” links
Discussion of various approaches to handling “More” links, such as on a homepage with an introductory paragraph that links to “more” details, “more” information, etc. Russ Weakley and others have come up with possibilities to create these links in an accessible, user-friendly way that keeps text content concise while also providing helpful information. [Article/tutorial dated 07/25/2005, by Russ Weakley Max Design.]

Scrollbars and CSS

Coloring Your Scrollbars with CSS
For WebsiteTips.com by Shirley Kaiser, SKDesigns. Learn how to easily change the scrollbar colors for forms and browser windows with a few snippets of CSS. This tutorial explains how with visual samples, instruction, the code, browsers, and standards issues. [Tutorial by Shirley Kaiser, SKDesigns, for WebsiteTips.com]

top ‘On this page’ menu

Style Switching and CSS

As you may already know, style switching features typically include a combination of CSS and scripting, such as JavaScript (client-side) or PHP (server-side). The links below and the cross-links to WebsiteTips.com's sections on style switching with JavaScript or style switching with PHP provide tutorials, scripts, and resources to help in why style switching features exist, your decision of which approach to take if you choose to add this feature, and how to implement this feature, too.

Stuff and Nonsense: Strategies for CSS Switching
Helpful tutorial, including the markup and scripts, for adding a style switching feature to your site using either JavaScript and CSS or PHP and CSS. This tutorial is an excerpt from chapter 8 of Professional CSS, by Christopher Schmitt, Mark Trammell, Ethan Marcotte, Todd Dominey, Dunstan Orchard. [Tutorial is an excerpt from chapter 8 of Professional CSS, by Christopher Schmitt, Mark Trammell, Ethan Marcotte, Todd Dominey, Dunstan Orchard. Via Digital Web.]

Media Types and CSS

Tutorials on @media rules for all devices, aural (for speech synthesizers), Braille, embossed (for paged Braille printers), handheld, print, projection (for projected presentations), screen (for color computer screens), TTY (for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities), and TV.

Media Types
by Rachel Andrew. Tutorial on the media types for CSS, what each is for, how they're used, recommendations, and testing pages she's working on, too. Helpful tutorial, good info. [Article dated Fall, 2001, by Rachel Andrew, edgeofmyseat.com]
Media Types and Their Uses
Thorough tutorial on media types and how to use them, with plenty of examples, downloadable files. [Tutorial by Stephanie Sullivan, for Community MX.]

top ‘On this page’ menu

Selectors and CSS

CSS 2.1 Selectors, Part 1
As the author states, learning how to use the full range of CSS selectors available in CSS 2.1 properly can actually help you keep your HTML a lot cleaner by minimizing unnecessary use of the class attribute and the need for adding extraneous div and span elements to the markup. Great tutorial, and the first of a series. [Article/tutorial dated 09/26/2005, by Roger Johansson, for 456 Berea Street.]
CSS 2.1 Selectors, Part 2
Part 2 of this series explains combinators, descendant selectors, child selectors, adjacent sibling selectors, attribute selectors, and helpful examples along the way. [Article/tutorial dated 10/10/2005, by Roger Johansson, for 456 Berea Street.]
CSS 2.1 Selectors, Part 3
Part 3 of this series explains pseudo-classes and pseudo-elements, including :first-child, :link, :visited, :hover, :active, :focus, :lang, :first-line, first-letter, :before, :after, helpful examples along the way, and roadblocks with Internet Explorer 6. [Article/tutorial dated 10/24/2005, by Roger Johansson, for 456 Berea Street.]
CSS: A Tribute to Selectors
Helpful basics about CSS attribute selectors. See also the comments and Internet Explorer 6 issues. [Article/tutorial dated 02/20/2005, by Andy Clarke, Stuff and Nonsense And All That Malarkey.]
Selectutorial - CSS selectors
Fantastic tutorials that cover the structure of rules, the document tree, types of selectors and their uses, and a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. [Tutorial series by Max Design.]

top ‘On this page’ menu

Shorthand Properties for CSS

You can reduce your CSS file sizes and make your CSS more efficient by taking advantage of CSS shorthand properties. Here are some helpful tutorials and tips on how to use them effectively.

CSS Shorthand Guide
Very well done, thorough tutorial with explanations, examples, and tips along the way on how to use CSS shorthand properties. [Tutorial dated 10/23/2005, by Dustin Diaz, Web Standards with Imagination.]
CSS Shorthand Properties - An Introduction
Helpful introductory tutorial on how to use CSS shorthand properties for fonts, backgrounds, lists, margins and padding, and borders. Includes examples. Well done. [Tutorial dated 11/2004 by Trenton Moss, for webcredible.co.uk.]
Efficient CSS with Shorthand Properties
Excellent tutorial on how to use CSS shorthand to help make your style sheets leaner, more efficient, and reduce file size. [Article dated 02/21/2005. By Roger Johansson, 456bereastreet.com.]
Introduction to CSS Shorthand Properties
Helpful tutorial and tips about using CSS shorthand properties. The tutorial also covers browser compatibility and links to further resources. Well done. Regularly updated as needed. [Article updated 09/01/2004 by Ove A. Klykken, domedia.org]