December 12, 2004
December template file
I will be using this file at the December meeting to demonstrate text styling: December template file. Those of you who bring computers to the workshop might want to download this file and use it to follow along Saturday.
November 21, 2004
Homework Assignment for December Meeting
We spoke briefly at the November meeting about the media attribute. CSS allows a designer to create different style sheets for different media that might be used to publish your HTML. Browser support for this attribute is currently limited, but printers are supported. I showed an example where the print version of a page is automatically generated when the user presses the Print button on the browser. Look at this page as an example: Minutes, September 1, 2004 (opens in a new browser window). Check the source, and within the head, you will see these lines:
This technique saves having to create a separate print version. But as I thought about how I had used the technique, I began to think there was a philosophical problem with what I did. Anyone see it? What do you think? Add your comment below or send me an e-mail.
<style type="text/css"The first style sets up the page on your monitor. The second sets up the page when you print it. To see this style in action, you can print the page or just go to your top menu and use Print Preview.
title="Default" media="screen">
@import url(../../CSS/secondaryscreen.css);
</style>
<link rel="stylesheet" type="text/css"
href="../../CSS/secondaryprinter.css" title="Default"
media="print" />
This technique saves having to create a separate print version. But as I thought about how I had used the technique, I began to think there was a philosophical problem with what I did. Anyone see it? What do you think? Add your comment below or send me an e-mail.
November Workshop Notes
At the November meeting, we completed our overview of Cascading Style Sheets.
We pointed out sites that use CSS, not just for appearance but also for user friendliness such as size of text. CSS lets the developer create one HTML page and re-use it for different purposes, such as a print-friendly version. Examples shown were Providence Journal, CSS Zen Garden, and Schuylkill Township's minutes pages.
In our first meetings, we have used CSS to style tags like BODY, P, H1..., ADDRESS, and ACRONYM. We worked generally on setting margins, font styles, colors and alignment. We made the point that if you change the color of text, be sure to set a background color in order to cover the possibility that users might change the default background color of their browsers.
We did some basic formating with margins and line heights. Note generally that horizontal spacing concatenates, that is, it is cumulative-- if your page body has a left margin of 20px, and your paragraphs have left margins of 30px, the paragraphs will be set off from the left by the total of the two settings, 50px.
Vertical spacing works differently--it collapses. If you have a heading tag that has a bottom margin of 20px and your text has a top margin of 30px, the spacing between the two will collapse to the largest size, 30px.
Note also that you can use negative numbers and move elements outside of their normal box. You can thus have overhanging indents or text that overlaps the text above or below it.
In the coming months, we will be delving into individual topics and covering in more depth the topics we reviewed in our initial meetings.
We pointed out sites that use CSS, not just for appearance but also for user friendliness such as size of text. CSS lets the developer create one HTML page and re-use it for different purposes, such as a print-friendly version. Examples shown were Providence Journal, CSS Zen Garden, and Schuylkill Township's minutes pages.
In our first meetings, we have used CSS to style tags like BODY, P, H1..., ADDRESS, and ACRONYM. We worked generally on setting margins, font styles, colors and alignment. We made the point that if you change the color of text, be sure to set a background color in order to cover the possibility that users might change the default background color of their browsers.
We did some basic formating with margins and line heights. Note generally that horizontal spacing concatenates, that is, it is cumulative-- if your page body has a left margin of 20px, and your paragraphs have left margins of 30px, the paragraphs will be set off from the left by the total of the two settings, 50px.
Vertical spacing works differently--it collapses. If you have a heading tag that has a bottom margin of 20px and your text has a top margin of 30px, the spacing between the two will collapse to the largest size, 30px.
Note also that you can use negative numbers and move elements outside of their normal box. You can thus have overhanging indents or text that overlaps the text above or below it.
In the coming months, we will be delving into individual topics and covering in more depth the topics we reviewed in our initial meetings.
November 17, 2004
November Meeting Announcement
We will be holding our regular meeting of the CSS Workshop this Saturday, November 20, from 9-10 in room 713.
PACS has been diligently trying to make sure that we have a live internet connection, and I am hoping for the best. If we do, I will run through some online examples of CSS in action--they will give us some goals to work toward during the course of our workshop. I will then continue with our general overview of CSS. I hope to finish that overview this month, and we will then be ready to drill into specific topics in more detail.
I have revamped the website for our group, and it is now located at http://jadavey.net/PACS_CSS/. I am going to try out the blog format this year for a couple of reasons, besides general curiosity. For one thing, there are so many online resources about CSS that I want an easy way to get the information out to the group. Blogging can also facilitate interactivity among our members. And blogging software is an interesting combination of database driven web development and CSS formatting. I hope to get into that as we go along and as I figure it out a little better.
As I mentioned last month, I want to encourage all of you to have at least two browsers installed on your computers. Mozilla Firefox is a great free one available at http://www.mozilla.org/products/firefox/. Saturday, I will show you something I just discovered about Firefox and CSS.
And I would also like to discuss whether we want to begin our meetings at 8:30. I like the free exchanges that we have at our meetings, but I also want to make sure that we are making progress. Your input will be requested.
See you Saturday.
PACS has been diligently trying to make sure that we have a live internet connection, and I am hoping for the best. If we do, I will run through some online examples of CSS in action--they will give us some goals to work toward during the course of our workshop. I will then continue with our general overview of CSS. I hope to finish that overview this month, and we will then be ready to drill into specific topics in more detail.
I have revamped the website for our group, and it is now located at http://jadavey.net/PACS_CSS/. I am going to try out the blog format this year for a couple of reasons, besides general curiosity. For one thing, there are so many online resources about CSS that I want an easy way to get the information out to the group. Blogging can also facilitate interactivity among our members. And blogging software is an interesting combination of database driven web development and CSS formatting. I hope to get into that as we go along and as I figure it out a little better.
As I mentioned last month, I want to encourage all of you to have at least two browsers installed on your computers. Mozilla Firefox is a great free one available at http://www.mozilla.org/products/firefox/. Saturday, I will show you something I just discovered about Firefox and CSS.
And I would also like to discuss whether we want to begin our meetings at 8:30. I like the free exchanges that we have at our meetings, but I also want to make sure that we are making progress. Your input will be requested.
See you Saturday.
Subscribe to:
Posts (Atom)