style master css tutorial
Where to now?
What do you know?
Before you race off because the school bell has rung and your bus leaves in five minutes, take a few moments to consolidate what you've learned. You began with little or no knowledge of style sheets. I hope you feel you have come a long way.
Now you know
- what a style sheet is and how it weaves its magic to style a web page
- how to create a style sheet and an appropriate valid XHTML 1.0 document and link this document to the style sheet
- all about the building blocks of any style sheet: rules, selectors, properties and values
- how to create the most important selectors: type, class, link, id, descendent and group
- all the properties you need to control basic text appearance
- how to customize the appearance of links
- how to use static and absolute positioning to create a page layout
- all the background image properties
- all the techniques you need to turn a string of links into a navbar
And you've put all this together to create a very stylish looking site using only CSS and XHTML 1.0. Not bad for a single tutorial, is it? You are definitely ready to strike out on your own and create a site using web standards.
On top of all this you've learned your way around Style Master. As you learn more you'll find that Style Master grows with you. At first you'll probably want to do most things using the editors. But as you get more confident you'll start using the hand-coding features, especially Code Completer. Whenever you learn a new aspect of CSS, maybe a selector or a property, Style Master will be there to help you through those first few times. Being able to work confident that Style Master will only let you create valid CSS will leave your mind free to do what you're really here to do: create stylish accessible standards based web pages.
What don't you know?
What you'll want to do with CSS is open ended, so you're bound to come across gaps in your knowledge sooner or later. Just to give you some warning, here are some specifics that we didn't look into in this tutorial. Further down the page you'll find the resources you'll need when you come up against these problems.
- all the different ways of creating multi column layouts - though the two column layout we created here is a very good starting point
- using the
floatproperty in CSS layout - using CSS to style forms
- all the tricky CSS hacks you need to overcome Internet Explorer's niggling inconsistent support
But Wait, There's More
You want to learn more? Here's a list of handy references and places you might go.
Invaluable references from the W3C
You'll need to bookmark all of the following from the people responsible for CSS and other web standards.
- CSS Level 2, Revision 1 Specification. The Mothership: all the selectors, all the properties, all the values.
- HTML 4.01 Specification. If you're going to use CSS, you have to write standards based HTML
- Validate your CSS, early and often.
- Validate your HTML, even earlier and even more often.
Westciv resources
Reading and working from specifications isn't everyone's cup of tea, so we wrote The Complete CSS Guide, a comprehensive reference to cascading style sheets, written in a much more accessible style and featuring browser support information for every aspect of CSS. This link will take you to the "lite" version available for free at our site. The full version of the guide is available for purchase and download for just $24.99, or comes as a bonus download when you purchase Style Master. It also comes as part of many of the Westciv self-paced course bundles.
This guide is in fact part of our very own collection of CSS learning resources. Other CSS resources to be found here include
- browser compatibility tables
- other CSS tutorials and articles
- Redemption through standards - our web standards blog
- extensive links to other CSS resources
Resources, tips and tricks, blogs, inspiration
You won't learn all of CSS and standards based web development in a day or a week or a month of doing courses and tutorials, though doing a few of these is a very good way to get up to speed on a particular topic. Keeping up to date by subscribing to some blogs and checking out the sites below from time to time while you work away at your own projects is the only way to go.
mezzoblue from Dave Shea includes an excellent blog and resources such as the CSS Crib Sheet. It's also home to that perennial (ouch!) source of awe and inspiration, the csszengarden.
The Daily Report from Jeffrey Zeldman and the good people at A List Apart: lots of resources, but you'll particularly appreciate the neat tutorials and articles showing you how to do tricky little CSS acrobatics.
The Web Standards Project Buzz - all the latest news in the world of web standards. Lost of links to excellent resources.
456 Berea Street - an excellent blog with new links daily to news, tutorials and commentary relevant to developing with web standards.
More advanced positioning information
As the name would imply, Position is Everything is a well organized site with info about creating the various CSS layouts and the important browser bug workarounds.
The Floatutorial is the best way I have seen to start at the beginning, go to end and stop, and learn all about the mysterious float property.
Russ Weakley's Colored boxes tutorial gives you a great methodology for building CSS layouts.
BrainJar has excellent coverage of exactly how the CSS2 positioning model works. Not strictly speaking a tutorial with exercises, but will give you the comprehensive understanding of static, absolute and relative positioning, as well as float, that you'll need to master CSS page layout.
the Style Master Layout Wizard lets you create all the CSS and HTML for 1, 2 and 3 column CSS layouts without worrying about a jot of code. Download the demo.
Books
There are lots of books available at Amazon on CSS and standards based web development. The following are the best of the latest.
- HTML Utopia: Designing Without Tables Using CSS
- The CSS Anthology
- Eric Meyer on CSS: Mastering the Language of Web Design
- Designing with Web Standards by Jeffrey Zeldman
- Cascading Style Sheets - The Designer's Edge by Molly Holzschlag
- The Zen of CSS Web Design by Molly Holzschlag and Dave Shea
- Web Standards Solution by Dan Cederholm
Courses
Westciv has a series of standards based web development courses, available for purchase and download online. The courses work through real world hands-on web development projects, with extensive explanations, code examples, exercises and snapshots of how the site should look.
The courses include
all of which are available in very competitively priced bundles together with our software.
Newsgroups and mailing lists
The Style Master Community is a forum where you can post about the issues that arise in developing standards based sites with Style Master.
The Web Standards Group Discussion List is another place to keep up to date with your fellow developers experiences, and maybe share a few of your own.
The newsgroup which will almost always solve your problem, is
news://comp.infosystems.www.authoring.stylesheets
Do try to be specific if you post, and provide URLs and examples whenever possible.
Thanks
Thanks for taking the time to use these materials. If you have something to say please let us know. And most of all, good luck in mastering style sheets.
Maxine Sherrin