At our March meeting, we finished the topic of styling lists. We covered some loose ends from the February session and then went on to show how familiar properties like margin, padding, and border can be applied to lists or to individual list items. Using descendant selectors, we applied styles to list items depending on whether they were children of ordered lists or undordered lists.
We then played with generated content and showed how that property can be used to add text or images to the beginning or the end of an element using CSS. It is an interesting concept, but we saw that Internet Explorer does not support generated content, so its usefulness is limited right now. If you are interested in playing with this property, download the generated content test page from our samples and open the page in Firefox or Opera. To experiment, add or delete comment tags around the style declarations.
We then started with the display property. The first value we considered was "none," and we showed how it can be used to substitute a graphic for a top level heading so that we could add a logo without affecting the underlying HTML. The sample page is also on the website. Comment out the style declarations to see the underlying HTML. Or, if you have Firefox, you can just open the file and at the top Firefox menu, go to View/Page Style/No Style to toggle the style sheet on and off.
In April, we will continue with the display property. Please make a note: The April meeting will be on April 22, the fourth Saturday of the month, due to the school's schedule. Mark your calendar and join us.
No comments:
Post a Comment