Home
Username:
Password:
HTML 4/5 with CSS Tutorials

Style Sheets / When to Use ID or Class




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

It's often hard to decide when you should use a Class Selector for a style and when you should use an ID Selector for a style when styling an element so let me, in this movie, give you some easy ways to think of the differences between IDs and Classes and some tips for their usage. Use a class tag and a Class Selector if the style is used in various places throughout the document. Also use a Class Selector if the style is to be very general. Use an ID tag and an ID Selector if the style's only used once and only once in the document or if the style is specific to a certain area of the document. For example, I would use an ID to style the header div tag on a page, or to style the copyright information on the page, or perhaps to style the Main Menu. I would use a Class Selector and a class style for bold, italic, left-justify, center-justify, red text, blue text, indent 20 pixels and so on. Remember that an ID can only appear once in any HTML document. Once you've used that ID it shouldn't be used again on that page. That's why we'd use it to format my header or my footer because you should only have one header and one footer per page. I'll be demonstrating much more on the use of the various types of Selectors that I've covered in this section, but to summarize it here classes are very flexible. They're very flexible for applying your CSS rules again and again within a page. Use classes to control elements that belong to a group and that also use classes to control elements that belong to a group and also to enhance the behavior and styling of an ID. Don't use classes for main structural elements within a page such as headers and navigation sections. Also, before applying or creating a style class make sure redefining an HTML tag using a Tag Selector wouldn't be better. You don't want to get class-happy and overuse them. I usually use Tag Selectors to style standard styles used throughout the site and classes to style exceptions to these site-style standards. For example, I usually restyle my body tag to Arial 14 point so that my default text is nice and large, black. Then I would have different colored text classes such as blue and red, italic, bold and so on. Use ids to style structural sections or portions of a page. Avoid using ids when there's more than one property or setting required for the CSS rule. Don't use ids for elements that may multiply in the future such as additional images, link styles, or paragraphs. That will conclude then this introduction to Style Sheets. In this section you've learned about Cascading Style Sheets and why you should be using them. You've learned about style syntax and structure, how to write and apply your first basic styles. You've received an introduction to Selectors including the Base Tag Selector, the Class Selector, the ID Selector, Context Selectors and when you want to use the various Selectors, particularly the differences between the usage of ID Selectors and Class Selectors.

Tutorial Information

Course: HTML 4/5 with CSS
Author: James Gonzalez
SKU: 34077
ISBN: 1-935320-93-9
Release Date: 2009-12-31
Duration: 10.5 hrs / 142 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available