At our October session, we continued reviewing the different properties that are available in CSS for styling fonts. We finished with font-family by working with the values "normal" and "inherit." We then went on to font-size and spent some time testing the different CSS values for sizing fonts. A nice review of the optons is at this website on font-size.
In November, we will finish with font styling and move on to another topc to be determined.
October 15, 2005
October 08, 2005
October 15 Meeting Announcement
The next meeting of the CSS Workshop will take place this Saturday, October 15, at 9 am. We will continue on the topic of fonts, and we should be able to finish at this session. As we work on fonts, we will also look at two values that we have not discussed yet, "inherit" and "normal". They show up in many properties, and using them can make your CSS more efficient.
See you Saturday.
See you Saturday.
September 24, 2005
September Meeting Notes: Inline Boxes
We started our second year of the PACS CSS Workshop in September. The first item was a quick demo of Netscape 8, a browser that was relased this past summer. What is interesting for our purposes is that with a push of a button, the browser will show a page using either the Firefox rendering engine or the Internet Explorer engine. Given the need to check how things look in different browsers, this feature is a real convenience.
I used Netscape 8 to show a problem that I encountered recently with IE. I wanted a page to be a specific width, and I used the width property on the body tag. It worked in Firefox but not in IE. I had to enclose all my content in a div with the specified width, and IE accepted that rule. Just a simple example of how you always have to check!
We quickly reviewed last year's topics and the basic format of a CSS rule. We then continued on the topic of styling boxes by reviewing what we covered in June about block elements and then moving to inline elements.
We used the sample page that is posted here to show that the properties can be styled on inline boxes, but some of the results differ from block elements. We made the point that the line height is not increased by enlarging the top or bottom box styles, and we noted that to prevent overlap, you should change the line-height of the line of an ancestor element, like body.
We then started on fonts by pointing out that CSS does not download fonts, so whatever is on the user's system is what the browser can utilize. As with HTML, it is important to define alternative font faces and to include a generic face. CSS does give users more options in working with fonts. We started demonstrating these options with this sample file, and we will continue on this topic in October.
I encourage you to download the sample files, open them in an editor, and play with the different selectors. I have some notes in there to guide you.
I used Netscape 8 to show a problem that I encountered recently with IE. I wanted a page to be a specific width, and I used the width property on the body tag. It worked in Firefox but not in IE. I had to enclose all my content in a div with the specified width, and IE accepted that rule. Just a simple example of how you always have to check!
We quickly reviewed last year's topics and the basic format of a CSS rule. We then continued on the topic of styling boxes by reviewing what we covered in June about block elements and then moving to inline elements.
We used the sample page that is posted here to show that the properties can be styled on inline boxes, but some of the results differ from block elements. We made the point that the line height is not increased by enlarging the top or bottom box styles, and we noted that to prevent overlap, you should change the line-height of the line of an ancestor element, like body.
We then started on fonts by pointing out that CSS does not download fonts, so whatever is on the user's system is what the browser can utilize. As with HTML, it is important to define alternative font faces and to include a generic face. CSS does give users more options in working with fonts. We started demonstrating these options with this sample file, and we will continue on this topic in October.
I encourage you to download the sample files, open them in an editor, and play with the different selectors. I have some notes in there to guide you.
September 20, 2005
Opera is now free and without banners
Many of us have used the Opera browser because of its innovations and its adherence to standards. If you have avoided Opera because you did not want to pay a registration fee to remove its banner ads, your wait is over. Opera has just released version 8.50 of its browser, and it is now free of banner ads. At Opera.com you can get more information on this browser and download it for your own use.
I find Opera to be a good test platform to see if my code complies with W3C standards. And you might find that Opera is fast and convenient enough to make it your regular browser.
I find Opera to be a good test platform to see if my code complies with W3C standards. And you might find that Opera is fast and convenient enough to make it your regular browser.
September 14, 2005
September 17 Meeting Announcement
The next meeting of the PCS CSS Workshop will be held Saturday, September 17th, at the same time and place as last year, 9-10 am in Room 713.
This month, I want to start by going over a couple of items that I posted on the website over the Summer and then quickly review the subjects we covered last year. I then want to continue with styling boxes. We were in the middle of that subject when we ended in June. I want to cover inline boxes so that we get a complete overview of the subject.
After that, we will move on to fonts, and I am thinking that we should be able to finish that topic at this meeting.
The PACS schedule this year is the most exciting ever for members interested in web design. Right after our workshop, at 10-11, Mike Ehling will conduct the Macromedia Flash Workshop, something we have wanted to do for a long time. Then at 11-12, Frank Stepanski will be running the JavaScript Workshop, another great addition to our lineup. To top off the day, the Web Design SIG at 1-2 starts the year featuring Nick Robalik, founder and President of Digital.Soapbox, speaking on avoiding design errors.
See you Saturday.
This month, I want to start by going over a couple of items that I posted on the website over the Summer and then quickly review the subjects we covered last year. I then want to continue with styling boxes. We were in the middle of that subject when we ended in June. I want to cover inline boxes so that we get a complete overview of the subject.
After that, we will move on to fonts, and I am thinking that we should be able to finish that topic at this meeting.
The PACS schedule this year is the most exciting ever for members interested in web design. Right after our workshop, at 10-11, Mike Ehling will conduct the Macromedia Flash Workshop, something we have wanted to do for a long time. Then at 11-12, Frank Stepanski will be running the JavaScript Workshop, another great addition to our lineup. To top off the day, the Web Design SIG at 1-2 starts the year featuring Nick Robalik, founder and President of Digital.Soapbox, speaking on avoiding design errors.
See you Saturday.
September 12, 2005
BW 50: Carefully Clearing Yahoo's Clutter
Check this article from Business Week called BW 50: Carefully Clearing Yahoo's Clutter. It is an interesting look at web design and useability issues. Be sure to check the interactive graphic that has comments on specific aspects of Yahoo's site.
September 09, 2005
An Event Apart in Philadelphia
Two of the leading thinkers in web design, Eric Meyer and Jeffrey Zeldman, will be in Philadelphia in December for what they call An Event Apart. You might recognize the play on A List Apart, one of the leading sites for cutting edge web design concepts.
This event might be priced out of the range of a lot of us, but if anyone wants a view of the cutting edge, these people will give it to you.
This event might be priced out of the range of a lot of us, but if anyone wants a view of the cutting edge, these people will give it to you.
August 16, 2005
SiteProNews: The 10 Best Resources for CSS
This article at Site Pro News on The 10 Best Resources for CSS is a nice list of quality websites for CSS information. The listing is well annotated, so you can get an idea of which sites might be most useful to you. But note also the comments on how to develop CSS skills. The author lays out a practical game plan for learning.
July 04, 2005
Review of The Zen of CSS Design
Reed just posted my review of a new book, The Zen of CSS Design, at the PACS Web Design Book Reviews page. Many of you might remember that we have looked at the css Zen Garden website in the course of our workshop, and a link to it is on our Resources page. This book compiles some relatively advanced lessons to be learned from the designs submitted to the site.
Not every reviewer that I read on the Amazon site was as enthusiastic, but most gave the book 4 or 5 stars. I hope that we can work in some of this material next year when we get into images and positioning. It is not a beginner's book, but we won't be beginners for long.
Not every reviewer that I read on the Amazon site was as enthusiastic, but most gave the book 4 or 5 stars. I hope that we can work in some of this material next year when we get into images and positioning. It is not a beginner's book, but we won't be beginners for long.
June 12, 2005
June Meeting Notes: Styling Boxes
At our June meeting, we went continued our discussion on the box model by looking at ways to style boxes. At our May meeting, we had talked about height and width. We reviewed that topic and then went through borders, margins, and padding.
I used a couple of sample pages to illustrate the options, and I have uploaded them here with comments in the source. The first page is a sample of the values for the border property. Download this file and play with the source. You will see comments that will help you. Open the file in different browsers to see how they render borders.
The second page is an illustration of using margins or padding. The set off paragaphs look the same until you go to the source and add background color to the content.
At our next meeting, we will finish on this topic by running through the styling of inline elements.
I used a couple of sample pages to illustrate the options, and I have uploaded them here with comments in the source. The first page is a sample of the values for the border property. Download this file and play with the source. You will see comments that will help you. Open the file in different browsers to see how they render borders.
The second page is an illustration of using margins or padding. The set off paragaphs look the same until you go to the source and add background color to the content.
At our next meeting, we will finish on this topic by running through the styling of inline elements.
Subscribe to:
Posts (Atom)