Workshop


In this lesson, you learned about cascading style sheets, the wonderful supplement to HTML that makes formatting your pages less painful. Throughout the rest of this book, I'll be using cascading style sheets where appropriate, so please review this workshop material before continuing.

Q&A

Q

My CSS isn't working like I'd expect. What should I do?

A

CSS probably doesn't seem that clear in the first place, and things can only get messier when you actually start applying styles to your pages. You should be sure to test your pages in every browser you can find, and don't be afraid to experiment. Just because something seems like it should work doesn't mean it will. The W3C also provides a CSS Validator (http://jigsaw.w3.org/css-validator/) that you can use to make sure that your CSS syntax is correct. You should probably use it all the time, but even if you don't, it can still help out if you get stuck.

Q

Are there naming rules for classes and IDs?

A

Yes, there are. A name must start with a letter, and can contain only letters, numbers, or dashes (-). Some browsers may not enforce these rules, but to be safe, you should adhere to them.

Q

What are the relevant CSS standards?

A

There are two CSS recommendations from the W3C: CSS1 and CSS2. Most modern browsers support a large part of CSS1 and some of CSS2, specifically the sections on positioning elements that I discussed today. You can find out more at http://www.w3.org/Style/CSS/. If you're curious about how well your browser supports CSS or the effect that properties have in real browsers, you can check out the CSS test suites at http://www.w3.org/Style/CSS/Test/.

Quiz

1.

Why can't absolute units be used reliably in CSS?

2.

True or False: Including style sheets on your page requires features provided by a web server.

3.

How do the absolute and relative positioning schemes differ?

4.

Is the margin or padding of an element inside the border?

5.

How do you lay out your page so that elements positioned statically appear above elements that are positioned absolutely?

Quiz Answers

1.

Absolute units have problems in CSS because there's no way to know exactly what sort of display medium the user has. An inch on one monitor may be completely different than an inch on another.

2.

The answer is false; you can use the <link> tag to load external style sheets without involving the web server in any way.

3.

The relative positioning scheme places elements relative to the previous element on the page, whereas the absolute positioning scheme places the element exactly where you tell it to on the page.

4.

The padding of an element is inside the border of an element, and the margin is outside.

5.

This is a trick question. You cannot put statically positioned elements above absolutely positioned elements. However, if you change the statically positioned elements so that they use the relative positioning scheme, you can alter their stacking layer using the z-index property.

Exercises

1.

If you've already created some web pages, go back and try to figure out how you could apply CSS to them.

2.

Take a look at some of your favorite websites and think about how the webmasters could achieve the effects on their sites using CSS.

3.

Adapt today's sample page so that it has three columns of content instead of two.




Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net