Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1. A copy of the license is included in the section entitled “GNU Free Documentation License”
- Introduction
- Introduction in Cascading Style Sheets
- A simple web page
- We are going to use a CSS-free review of E.R. Eddison’s Mistress of Mistresses as an example. Open the file “mistress.html” in your browser. As it stands, it is a perfectly readable page, but it does not draw the reader’s attention as it should. The headlines do not stand out from the body, and the recommendations lie lifeless on the left of the page along with everything else.
- Margins and padding
- For our first trick, we’ll add a nice margin on the left and right so that our text is not flush left and crowded. Use a text editor to create a style sheet called “reviews.css” in the same folder as your new web page. In that style sheet, add the following CSS:
- Basic CSS syntax
- Style sheet syntax is fairly simple: the name of the HTML tag you wish to modify, a space, an opening curly bracket, and then a list of modifiers and a closing curly bracket.
- Advanced CSS syntax
- You’ve learned how to add a style sheet to a web page, how to apply styles to HTML elements, how to create classes of HTML elements, and how to target elements that are parts of other elements.
- Pseudo-elements
- Pseudo-elements in Cascading Style Sheets
- Precise positioning
- In the resources folder, there’s an HTML file called “menu.html”. Open this up in your text editor and look at it: it’s a simple list of movie reviews and book reviews. For a review site, it would be nice to let visitors navigate around our recent reviews.
- Printing styles
- Often, you’ll want different styles for printing than for display on a computer screen. There are many different places your page can “display”, and you can have different styles for each of them.
- CSS: Final tips
- Final tips in Cascading Style Sheets
- More Information
- The most useful book I’ve seen for HTML is HTML & XHTML: The Definitive Guide, from O’Reilly. Nowadays I tend to use the web more often, however. Some of the web pages I’ve used while writing this tutorial are the w3schools HTML and XHTML pages.
- CSS (full HTML)
- HTML version of Cascading Style Sheets
- CSS (full PDF) (3.6 MB)
- PDF version of Cascading Style Sheets
- CSS (full RTF) (4.7 MB)
- RTF version of Cascading Style Sheets
- ZIP Resources for Cascading Style Sheets (13.7 MB)
- Resources for Cascading Style Sheets, including samples and document graphics.
More CSS
- MacHeist bundle: Taskpaper, CSSEdit, and Awaken
- MacHeist is running a bundle of several applications for $49. It includes Taskpaper, CSSEdit, Awaken, and several other games and utilities.
- Style Sheets and HTML, Part Two
- This second half of the style sheet draft tutorial covers adjacent elements, pseudo-elements, and floating elements.
- Cascading style sheets and HTML
- You can use style sheets to simplify your web pages, making them readable across a wide variety of browsers and situations, without sacrificing presentation quality.
- Webmaster in a Nutshell
- Without doubt the best reference work for webmasters that you’ll find. It contains the “reference” part of most of O’Reilly’s web-relevant nutshell books. You can find references for HTML 3.2, the CGI standard, JavaScript, Cascading Style Sheets, PHP, the HTTP 1.1 protocol, and configuration statements and server-side includes for the Apache/NCSA webservers.
- Cascading Style Sheets: The Definitive Guide
- Cascading style sheets really kick ass. Once you start using them, you’ll find it hard to imagine what you did without them.
Related Pages
- Tutorials
- Your Children
- AppleScript Basics
- Breaking In to Mac OS X
- Carnival of HTML
- CSS
- Easy Web Design
- Education
- History of the Internet
- HTTP headers
- JavaScript for Beginners
- MySQL for Other Applications
- Negative Space Spaced Out
- Perls Before Swine
- Persistence of Text
- PHP: Hot Pages
- PowerShift
- PyTown
- Recommended Reading
- Simple Photorealism
- Software Select
- Evaluating Information
- Gender Neutral Instructions
