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.
March 14, 2006
March 18 Meeting Announcement
The PACS CSS Workshop will be meeting this Saturday at the usual 9-10 hour.
This month we will finish up styling lists. We will tie up some loose ends and a cover a couple of leftover issues from last month.
After that, I want to get into the DISPLAY property. There are several values that can be used with that property, but we will just work on three of them, inline, block, and that confused fellow called inline-block. We will see how practical that last one really is, but the first two will set us up to do some interesting navigation styles.
If you are using a book to study along with our sessions, read about these topics, and we will do some experimenting to see how the DISPLAY property works.
This month we will finish up styling lists. We will tie up some loose ends and a cover a couple of leftover issues from last month.
After that, I want to get into the DISPLAY property. There are several values that can be used with that property, but we will just work on three of them, inline, block, and that confused fellow called inline-block. We will see how practical that last one really is, but the first two will set us up to do some interesting navigation styles.
If you are using a book to study along with our sessions, read about these topics, and we will do some experimenting to see how the DISPLAY property works.
February 26, 2006
PACS Web Design Archives
Reed Gustow has just done us all a great service by updating the Web Design SIG's archives page. Over the years, Reed has posted notes and links relating to presentations at the SIG's meetings. This new page indexes those postings, making it easy to retrieve meeting notes from as far back as 2003.
Check it out because the page is not only a useful resource, it is a fun place to browse.
Check it out because the page is not only a useful resource, it is a fun place to browse.
February 14, 2006
February 2006 Meeting Report--Styling Lists
At our February meeting, we just about finished styling lists. We began by reviewing unordered lists and then got into the more interesting subject of ordered lists, where CSS gives the web author options that do not exist in HTML. From there we looked briefly at styling definition lists. We used this samples page from last month--it can be downloaded and edited to test out list properties.
We then worked on the descendant selector, which lets you define the properties of an element when it is the child of another element. In our case, we styled nested lists to make sublists with different bullets and numbers. Of course, we took it to the extreme to create some styling straight out of the 90's dot-com boom--all legitimate, but a little ugly. I uploaded this samples page that has nested unordered and ordered lists. Use it to practice descendant selectors and styling sublists.
The next meeting is March 18. We will tie up a couple of loose ends with lists, and then move on to more creative uses of CSS.
We then worked on the descendant selector, which lets you define the properties of an element when it is the child of another element. In our case, we styled nested lists to make sublists with different bullets and numbers. Of course, we took it to the extreme to create some styling straight out of the 90's dot-com boom--all legitimate, but a little ugly. I uploaded this samples page that has nested unordered and ordered lists. Use it to practice descendant selectors and styling sublists.
The next meeting is March 18. We will tie up a couple of loose ends with lists, and then move on to more creative uses of CSS.
February 04, 2006
February 11 Meeting Announcement
The February meeting of the PACS CSS Workshop will be next Saturday, February 11. This date is a week earlier than usual because of the school schedule.
We will continue on the topic we started last month, styling lists. We did a little work with unordered lists, but this month we will get into more interesting topics, like ordered and nested lists. Along the way, we will consider descendant selectors, so that we can do things like create outlines. It will be a lot of fun, and we can then follow up and get into styling navigation links.
This month we also have the usual lineup of sessions for JavaScript and Flash, along with the scheduled return of the HTML Workshop. Plus, Reed Gustow will be presenting at the afternoon Web Design SIG, talking about how to create a contact form for your site.
See you Saturday.
We will continue on the topic we started last month, styling lists. We did a little work with unordered lists, but this month we will get into more interesting topics, like ordered and nested lists. Along the way, we will consider descendant selectors, so that we can do things like create outlines. It will be a lot of fun, and we can then follow up and get into styling navigation links.
This month we also have the usual lineup of sessions for JavaScript and Flash, along with the scheduled return of the HTML Workshop. Plus, Reed Gustow will be presenting at the afternoon Web Design SIG, talking about how to create a contact form for your site.
See you Saturday.
January 30, 2006
Sample Pages Now Indexed
Over the course of the workshop, I have used sample pages to illustrate different CSS topics. My practice has been to upload the samples to this site when I post my meeting report. At this point, though, it is very difficult to find these samples -- you have to go back through the archived meeting notes looking for a particular topic.
To make it easy to locate a sample, I have added to the site an index to the sample pages and a permanent link to this index in the sidebar under the CSS Resources Page link. As we use more sample pages, I will post them and update the index to keep it current.
I encourage you to download a page and edit its source in order to get a real feel for how CSS works.
To make it easy to locate a sample, I have added to the site an index to the sample pages and a permanent link to this index in the sidebar under the CSS Resources Page link. As we use more sample pages, I will post them and update the index to keep it current.
I encourage you to download a page and edit its source in order to get a real feel for how CSS works.
January 28, 2006
Content is now syndicated
I have set up a syndication feed for the site, so that readers can subscribe to the feed and receive updates using any of the usual newsreaders. More information on syndication is available in the notes of the Blogging Introduction meeting we had in January.
Look in the sidebar to the right of the page for the link to subscribe.
The Bloglet e-mail system is still in operation for those who just want an e-mail notification when the site is updated.
Look in the sidebar to the right of the page for the link to subscribe.
The Bloglet e-mail system is still in operation for those who just want an e-mail notification when the site is updated.
January 22, 2006
January 2006 meeting notes
At our January meeting, we finished the subject of pseudo-elements by tying up a couple of loose ends, and we then went on to lists. We reviewed the basics of HTML lists and started showing how to style unordered lists with CSS.
CSS gives us the ability to position the bullets but does not add any new bullet types. The advantage to using CSS is in the efficiency with which you can choose the type of bullet. I posted the sample page that I used, in case anyone wants to download it and play with the options for styling lists. Note that you should also download the little AOL gif if you want to use the image as a bullet.
Next month we will continue with styling lists, and we will incorporate the topic of descendant selectors. You will see how much more control and efficiency you can have with your lists by using CSS. These topics will all lead up to creating some interesting navigation elements for our pages.
Note that the February meeting is on the second Saturday, February 11, not the usual third, due to school scheduling. So make sure you update your calendar program.
CSS gives us the ability to position the bullets but does not add any new bullet types. The advantage to using CSS is in the efficiency with which you can choose the type of bullet. I posted the sample page that I used, in case anyone wants to download it and play with the options for styling lists. Note that you should also download the little AOL gif if you want to use the image as a bullet.
Next month we will continue with styling lists, and we will incorporate the topic of descendant selectors. You will see how much more control and efficiency you can have with your lists by using CSS. These topics will all lead up to creating some interesting navigation elements for our pages.
Note that the February meeting is on the second Saturday, February 11, not the usual third, due to school scheduling. So make sure you update your calendar program.
January 16, 2006
January 21 Meeting Announcement
The next meeting of the PACS CSS Workshop will be this Saturday, January 21, at our usual 9-10 hour.
This month we will briefly tie up a couple of loose ends from the last meeting regarding pseudo-elements. We will then go on to styling lists, a topic that should be pretty interesting since there is good browser support for the different CSS properties. In the process, over the next couple of meetings, we will get into descendant selectors and the display property, and tie everything together to create some interesting navigation menus and bars.
See you Saturday.
This month we will briefly tie up a couple of loose ends from the last meeting regarding pseudo-elements. We will then go on to styling lists, a topic that should be pretty interesting since there is good browser support for the different CSS properties. In the process, over the next couple of meetings, we will get into descendant selectors and the display property, and tie everything together to create some interesting navigation menus and bars.
See you Saturday.
CSS Beauty | CSS Design Showcase
I came across this new website on CSS called CSS Beauty | CSS Design Showcase. It looks like a good collection of CSS news and resources.
If you want to try your skills in a contest with the same idea as css Zen Garden, check the CSS Shuffle page.
If you want to try your skills in a contest with the same idea as css Zen Garden, check the CSS Shuffle page.
Subscribe to:
Posts (Atom)