Martha's COIN 74 Week 9

Martha's COIN 74 Week 9 Exercises

Day Six - Cascading Style Sheets

SOURCE: Robert D. Cormia's online text
my comments in blue

You can also create a New Style Sheet from scratch. I recommend that you only link to one style sheet. Some older browsers don't display multiple style sheets properly. Instead of linking to multiple style sheets, you can open the style sheet and combine styles into one .css file by copying and pasting styles.

An external style sheet is the same as a linked style sheet. You can see the link in the HEAD of the document. Dreamweaver inserts it for you. For the dw-lessons.css sheet above, my source code looks like this:

So what's Cascading about Style Sheets?

Cascading refers a specific style taking precedence over a general style. The physically closest style to the text it is modifying takes precedence over any other styles that effect it. This is used to avoid conflicting styles.

Styles on specific text override styles on an entire paragraph. Styles on a paragraph override styles applied to the entire body of the document. Cascading refers to how local styles take precedence over page styles which take precedence over global styles.

1stsitefree.com says this about Cascading Styles Sheets:

"Why are they called Cascading Style Sheets? Because, if you use multiple styles to control the appearance of your Web page, a browser will follow the rules of CSS according to the following precedence:

1. External Style Sheet.
2. Internal Style Sheet (inside your <head> and </head> tags).
3. Inline Style Sheet (inside your HTML Tags).
4. Thus, an Inline Style Sheet (inside your HTML Tags) has the highest priority and will override all others."

http://www.1stsitefree.com/css-intro.htm

CSS is a huge web technology. I have a list of references for you to explore at the end of this lesson. For now, I just want to focus on a few ways to use CSS in this Intro to DW course. We will not be able to cover all the features of CSS in the scope of this course. The ultimate authority on CSS is the World Wide Web Consortium. Check the w3.org site for the most recent information on CSS, browser compatibilities, work arounds, and Web Standards.
http://www.w3.org/Style/CSS/

It's possible that more than one rule is applied to an element. In this case, rules of Specificity will determine which style is the most specific to the element. Specifity is the rule that resolves conflicts and generally goes like this:

"Some selectors are more specific than others. For example, the class and ID selectors are more specific than simple HTML element selectors. When two rules select the same element and the properties contradict one another, the rule with the more specific selector takes precedence. Specificity for selectors is a little involved. Without going into the full detail, most situations can be resolved with the following rules.

1. ID selectors are more specific than other selectors
2. Class selectors are more specific than HTML element selectors, and other selectors such as contextual, pseudo class and pseudo element selectors.
3. Contextual selectors, and other selectors involving more than one HTML element selector are more specific than a single element selector (and for two multiple element selectors, the one with more elements is more specific than the one with fewer.)"

CSS Tips

To create linked text without underline, use the Type Category, Decoration set to none.

Make your bg image scroll by using the Background Category Attachment field. Try it and let us know what you selected from the drop down menu and which browsers show the feature.

Remember to upload your external style sheet to the server along with all your linked documents.

Styles applied to table tags may give inconsistent results across browsers.

Using CSS font color shortcuts for fonts that have double digits:
Often you'll find that the colors you use have matching pairs of digits for each of the red, green, and blue components. If you specify only three hex digits for the color, CSS will automatically expand it to a full 6-digit color value. Thus,

#FFF -> #FFFFFF -> White
#000 -> #000000 -> Black
#FFE -> #FFFFEE -> Light Tan
#0CF -> #00CCFF -> Sky Blue

You get the idea. Remember -- this shortcut only works in CSS and will shave off a few extra bytes off your page sizes. If you try typing 3-digit color values in HTML, you'll get unpredictable results.

To make a colored scrollbar, put this style tag before the BODY tag in your source code. (not compatible with all browsers). Works in IE4>. Obviously, this would look best if the background color of my page were the same color as the scroll bar or at a better blend.

Martha's Colored Scroll Bar doesn't work! Why not? Write Me

<head>
<title>Scrollbar Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style> BODY {
scrollbar-base-color : #336666;
scrollbar-arrow-color : #ff9900;
}</style>
<body bgcolor="#336666" text="#FFFFFF" link="#000000" vlink="#000000">

The DIV tag forces a line break after the closing /DIV tag.

Uses can set their browsers to ignore style sheets and apply their own settings.

You can define an image to be used as a bullet in the List Category. This image can be an animated gif images. Bullet images are not supported by NN4 but bullet types such as disc, circle, square, decimal, lower and uppercase numerals, lower and uppercase alphabet is supported.

These two sites provide info on browser compatibility:
http://hotwired.lycos.com/webmonkey/reference/browser_chart/
http://westciv.com.au/style_master/academy/browser_support/

I've applied a style to this document only to set my <A> link Decoration to none and the color to gray.

The three methods of applying styles are:

Inline Style Attribute - used in a specific HTML tag locally, this style takes precedence over the other 2.

Internal or Embedded Styles - defined inside the HTML file but not inside the specific HTML tag. Usually placed in the HEAD section of the document. Useful in redefining HTML tags. Dreamweaver will put the style code and then list the styles. The code for the scrollbar above is an example of Internal Styles. Often you'll see the style tag defined by the type as follows:

<style type="text/css">

</style>

Using Layers for CSS-P. The P stands for Positioning.

Inheritance

Certain tags cannot be used without other tags. The TD tag is a component of the TABLE tag. If you apply a style to the TABLE tag, the TD tag will inherit the style of their container TABLE tag.