Test CSS : Line Height 0

At our last meeting, we talked about the line-height property, and we played with setting it to a value of 0em. Ken Taylor sent me this page on Test CSS : Line Height 0. It is a nice example of using CSS to create a stylish look using nothing more than simple HTML text and CSS. Ken says that this works fine in IE & Firefox, but "2005" is higher in Opera causing it to be a bit off.

Try it yourself in different browsers with different settings.

Homework for February Meeting

We talked about units of measurement at our last two meetings. This page on CSS Units of Measurement will give you a chance to try out different ways of sizing lines and spaces using different sized fonts. Save the file to your computer, open it in any editor, and play with the embedded styles.

Take it a step further and re-size the fonts on your browser to test the results.

Answer to Homework for January

If you were not at the January meeting for our extra credit session, here is my analysis of the question I posed as homework: Answer to Homework for January. Let me know what you think--comments are enabled for this blog.

Generating Nonsense Text

When you are learning CSS (or HTML for that matter), it helps to have some sample text to play with. There are a couple of ways to generate nonsense text.

If you have Microsoft Word, you can open a blank page and type this entry: =rand (x,y), where x is the number of paragraphs you want and y is the number of sentences per paragraph. The result is a series of "The quick brown fox..." sentences. This text can then be copied to your HTML document.

Another solution is at Lorem Ipsum - All the facts - Lipsum generator. This site has a generator for Lorem ipsum text that is already marked up as an HTML page. You can copy its source into your own source and have paragraphs already tagged. Plus the site gives you more information than you could ever ask for about Lorem ipsum.

But when doing a mock-up page for a real site, the better approach is to use sample text that is related to the subject of the site. The page will look more realistic, and the text will not be a distraction.

January 15 Meeting Announcement

Our next meeting will be this Saturday, January 15, at our usual 9-10 hour. See the entry below for a homework assignment and a book raffle as an incentive for you to try your hand at an answer.

At this month's meeting, we will finish up with text formatting and with units of measure. We will then move on to fonts, and in the process, we will start working with classes. These skills will let you start making some really attractive pages just by the flexibility you will have to mix and match styles.

See you Saturday

Homework for January

The workshop homework for the January meeting is to consider and answer this question on usage. I will give my version of the answer (not necessarily an authoritative answer) as extra credit at the January meeting at 8:45. If you do not make it to the meeting in time, I will post my answer here on the site after the meeting.

As an incentive to have you ponder this metaphysical query, I have the following proposition: Anyone who e-mails me a reasonable effort at an answer will be entered in a raffle for a used-but-in-good-shape copy of the first edition of O'Reilly's CSS Pocket Reference. The second edition is now out, but the first is fine as a quick check of basic CSS.

Answers don't have to be right, just a good try. Entries must be received by me by the time I turn off my computer Friday night, January 14. So assume 9:00 to be safe.

I will pick a name Saturday out of all the entries. If you are not present, I will hold the book until February. If you are not present for that meeting, I will raffle it off to all who are in attendance at that time. Seems a fair way to do it.

Give it a try and let me see what you think.

December meeting notes

At our December meeting, we started reviewing the different ways of styling text in a web document. The topic also lead us to discuss units of measurement in CSS. A nice review of the available units is at this DevX article, CSS: Units of Measurement. For a list of the text styles available in CSS 2, go to the W3C site on recommendations for text specifications.

We covered some of the basic styles, and we will pick up in January with a little more on spacing. Take some time in the next couple of weeks to try out the styles we talked about--you can download and play with our basic template page.

I will be posting some homework for the January meeting shortly. In the mean time, let me know if you have any questions.

December Homework Answer

I posted a question as homework for the December meeting. The question had to do with the media attribute that is part of CSS. You can look at the November 21 entry on this site for the full question, but it was basically this: If you look at this page of minutes from a township meeting and print it out (or just look at Print/Preview in your browser), you get a print version of the minutes without graphics or formatting. I asked whether anyone saw a problem with this approach--I load a separate style sheet for printing, thus avoiding having to make a separate printer version of the page.

Here is what I see as the problem: I have hijacked the browser. When people press the print button, they expect to have the page they see come out of the printer. Instead, they see something else that might not be what they want.

The better solution, I think, is to have the print version load when the reader wants it to load. I can still do one page and employ CSS to render a print version, but the reader should have the option of selecting it. The solution would be by scripting or some other technique. I hope to discuss solutions when we get to the media attribute. In the mean time, you might want to check out this article.