WOW !   We have added a bunch of little extra goodies to our CSS toolboxes this week.  Even gave our styles a little class.

I found it difficult to get all the different experiments into one page without having it look totally ridiculious, so I have tried a variety of things on this page as embedded styles and on the following page as linked styles.  I've thrown in a couple of inline styles as well, just to see what works and what does not.

At first things were sort of bouncing around.   Netscape accepted this, IE accepted that, back and forth and back and forth.   After spotting and cleaning up a couple of my usual typos, I found that Vikki's suggestion to experiment with changing the order of things around worked well.   I found that putting the a:link at the end of the link list and putting background-color BEFORE background-image in the body declarations seemed to make the links and the background image work the way I intended.

I have also been creating a list of resources for my own reference under the button "Notes"  from my main class page.    This page includes list classes and divide ID's.  You can view it by clicking here if you would like.   It is just in the beginning stages and needs more of my bookmarked links added, but it is another example of this week's lessons in action.   Also, speaking of references, has anyone else noticed that the safe and unsafe CSS properties lists have gone *404* ???   There is a note somewhere near the front of the CSS section of Webreview that says they were too expensive to maintain.  BOO! HOO!  Does anyone know of another site that maintains a list like that?   It could be really handy!

This week we have been looking at:

• div tags
• span tags
• class selectors
• id selectors
• combining selector types
• contextual selectors
• line height
• lists
• three-d effects

Whew!  That's enough for now.   The following page shows examples of class selectors and span along with other styles we have learned added via a linked style sheet.

On To The Next Page and The Next Challenge!

 

WAIT! HAD TO TRY THIS ONE!
WAIT! HAD TO TRY THIS ONE!

Quick note of interest re: 3-D Effect:    When I tried adding the recommended background-color attribute to this, it nuked the effect in Netscape.  Soooooooooo, guess who ignored that *warning* and deleted the background-color?? Anyone have it work for them here?

 

Now you can proceed on to the next page :-)