With a well-designed web site, we want to ensure we are using (X)HTML to indicate the structure of the document only. If we want content delineated by certain tags to look a certain, non-default way, we can modify the default appearance of tagged content by assigning new attributes to a tag in a style sheet.
Styles can be applied to a web page either using an internal style modifier or an external stylesheet. Both methods have advantages and disadvantages, though as a rule you want to use external stylesheets whenever possible. Their use saves bandwidth, loading/processing time, and storage space. Creating a stylesheet is easy — create a plain ASCII text file containing the desired style information, and save with the file extension .css.
Cascading Style Sheets, properly used to their full effect, get a little complex, so we are breaking their information down into several parts. If you didn’t go through the CSS tutorials at HTMLDog while you were working on HTML (I know a lot of you did), go back first and do so.
- Part I (this document) — Principles and Concepts Underlying CSS
- Part II — Using CSS for Styling Your HTML
- Part III — Position and Layout with CSS
- Part IV — Handling Browser Idiosyncracies
Readings on Cascading Style Sheet Principles
- Introduction to CSS (video tutorial)
- The Document Object Model
- What is this CSS thing, anyway? (simple explanation of the “cascade”)
- Understanding the CSS Box Model and
- CSS Box Model Tutorial
- 12 Lessons for Those Afraid of CSS and Standards
- Write a well structured CSS file without becoming crazy
- The CSS ZenGarden — (my favorite CSS site)