COIN 74 Assignment 1 - Foothill College Fall 2006

COIN 74 - Assignment Nine
SOURCE: Robert Cormia's Foothill College online text, Fall 2006

COIN 74 - Lesson 9 Homework

This assignment has several tasks.

There is a lot of homework to do for Lesson 9, and you'll submit your homework to both the forums (for discussion) and as pasted text in ETUDES, for me to read. In addition you'll create some embedded (internal) styles including at least 3 redefined HTML tags, 5 classes, and 1 contextual selector tag. Export these styles to an external style sheet. Remove the internal styles. Link the external style sheet and attach the classes you created. Include this in your final project.

Have fun experimenting with the different values in the CSS Definition Window. Make changes and hit the Apply button so you can see the changes reflected in your document window without having to close the CSS Definition Window. Explore and enjoy the features of CSS.

Read the rest of this lesson (just a bit more). Then go to the appropriate FORUMS discussion: HOMEWORK>Lesson 9 - CSS and discuss your experiences and findings about CSS.
Topics to select for discussion:

Accessibility and CSS.
Why not use inline styles?
The difference between the order of styles (the location) and specificity.
The [i]!important[/i] style modifier.
Inheritance.
Explain the categories in the CSS Style Definition Window:
Type, Background, Block, Box, Border, List, Positioning, Extensions
What is the float?
How would you use a Box containter?
Any other topics you discovered in your exploration to the links in the lesson.

In addition, do the following :

Find a site that uses CSS-P for layout. Find unique layouts such as column layouts or a table layout without using any table tags.
Reply to two classmates posts to discuss their findings. Select classmates who don't yet have any response to their post.

Tips on Using Styles in DW 8

More About CSS and Font Families

After the color, the font is probably the most basic property of a page.
Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy. The table on this site shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones:
http://www.w3.org/Style/Examples/007/fonts.html#font-family

Khristine Annwn Page discusses more about fonts in Macromedia Dreamweaaver MX 2004 Training from the Source. She states that the text on a Mac is 3/4 of the text on Windows due to the "fundamental difference in screen resolution" between the Operating Systems. "Small text that is readable on a Windows computer can be completely illegivle on a Macintosh..." She suggests using ems as the recommended unit of measure for text, rather than points or pixels. Ems are also the only accessible unit of measurement for fonts. Ems are relative sizing and are scalable units of measurement. For reference, 1.2 em = 20% greater than 1 em.

Read more about the "em" at bigbaer.com's css_fontsize site: http://www.bigbaer.com/css_tutorials/css_font_size.htm

Read more about the font size options in the Font Size dropdown menu of the CSS Styles Definition Window at Web Developer's Virtual Library (WDVL) at: http://wdvl.com/Authoring/Style/Sheets/Fonts/font-size.html

In the following lesson, Lesson 10, you will learn more about CSS Positioning and Layers. In preparation for Lesson 10, and to review and learn more information about CSS, please review the following links as part of this week's homework.

Remember that some browsers give users the option of using their own style sheets . This is useful for users with disabilities who may have their own style sheet which enlarges text, removes backgrounds, and streamlines the readbility of web pages.

For a lesson in beauty and CSS, check the zen garden: http://www.csszengarden.com/

Excellent list of tutorial for CSS are at websitetips.com: http://www.websitetips.com/css/#tutorials including links to Jeffrey Zeldman's A List Apart .

http://www.mako4css.com/csstwo.htm - CSS and Netscape 4.xx Issues

http://www.mezzoblue.com/zengarden/alldesigns/ - a list of CSS designs from around the world applied to the SAME TEXT. It took me a while to figure it out. I thought I was surfing through various pages until it dawned on me the CONTENT on every page is the SAME and the images and style are different.

http://www.w3.org/StyleSheets/Core/preview - not necessarily a "bookmarker" but one that helps convey the power of CSS

http://www.w3.org/StyleSheets/Core/ - "The W3C Core Styles offer authors an easy way to start using style sheets without becoming designers. By adding a link in the head of your documents, a CSS browser will fetch the style sheet of your choice from W3C's server when it encounters your document. A non-CSS browser will display the HTML document like it always did."

Check Chris Cassell's CSS Tests for Designers which are designed to test css properties in semi-real applications, so that designers can actually see them in action in multiple browsers. Currently, the tests are of box properties: borders, padding, and margin. Netscape 4 users beware! Many of these tests will not only display incorrectly, they also may crash your browser.

Setting Custom Fonts for Form Selection Elements

<form action="whatever.asp" method="post">
<select name="Test" size="1"
style="font-family:arial,helvetica,sans-serif;background-color:#000055;color:#ffffff;font-size:0.6em;">
<option value="1" SELECTED>Hello</option>
<option value="2">Goodbye</option>
<option value="3">Penny</option>
<option value="4">Lane</option>
</select>
<input type="text" name="walrus"
style="font-family:arial,helvetica,sans-serif;background-color:#000055;color:#ffffff;font-size:0.6em;">
<input type="submit" value="Select"
style="background-color:#808080;color:#ffffff;font-size:0.6em;">
</form>

This treatment of form elements would be more effective if you create different classes in a stylesheet to use for your entire site rather than use inline styles for a specific page.

The advent of Cascading Style Sheets has created some pretty large advances in typographic control for Web designers. Gone are many of the limitations of standard HTML tags for formatting text. Some of the formatting choices for type using CSS styles unavailable with standard HTML markup include:

Line heights (leading)
Paragraph spacing
Specific point sizes for type
Decoration (underline, line-through, blink, etc.)
Weight (degree of boldness)

While CSS styles go a long way toward controlling overall appearance of type on a page, there still is one piece of the puzzle missing. While you can use any font installed on your computer when designing your page, unless the viewer has that font installed on their computer, the text will not appear as you designed it.

In order for a viewer to see a font you used on your page, if they do not have it installed on their own computer, the font information must be contained in a font definition file that is placed on the same web server as the pages containing the fonts. When the viewer downloads the page, the font definition file is also downloaded and is used only while the viewer is viewing the page.

In order to create a font definition file, you can use a commercial tool or application. However, once you create the font definition file, you need to do some browser-specific coding to get the file to work correctly. In addition, you need to be aware of browsers and Operating Systems which do not yet support this capability.