Week 9 Reading Notes

W3 School Cascading Style Sheet Tutorial

*CSS is used to control the style and layout of multiple Web pages all at once.

Very interesting! I’m excited to see how this works, but a little nervous since HTML and website authoring are totally new to me.

*It is amazing how CSS is used to control so many elements of a webpage – background colors, images, fonts, links, etc.

*This is a very cool tool to use to practice HTML and CSS. It's easy to see your changes since they are displayed immediately!

CSS tutorial: starting with HTML + CSS

*I’m still so amazing that you can save a plain text document with the extension .html, then click on it and view it as a Webpage. To someone who is totally new to HTML, this is pretty cool.

*Important to use separate files for HTML and CSS – this makes it easier to use the same style in multiple webpages.

In HTML, hyperlinks are created with <a> elements, so to specify the color, we need to add a style rule for “a”. To differentiate between visited and unvisited links, CSS provides two “pseudo-classes” (:link and :visited).

* This stands out to me since we discussed the <a> tag for hyperlinks in class.

To put the CSS into a separate file: Cut and paste everything that is inside the <style> element from the HTML file into the new window. Don't copy the <style> and </style> themselves. They belong to HTML, not to CSS.

* Very important thing to remember!

 Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos

*CSS gives the web designer more control over how the page appears that HTML can; however, CSS and HTML work together to display the page.

*You can make a CSS style sheet using a dedicated editor, but you would often want to go back in and tweak it by hand to give the page individual style.

A rule is a statement about one stylistic aspect of one or more elements. A style sheet is a set of one or more rules that apply to an HTML document.

·      So CSS helps to bring further detail to HTML elements!

A rule consists of two parts:

• Selector - the part before the left curly brace
• Declaration - the part within the curly braces

The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be.

A declaration has two parts separated by a colon:

• Property - that part before the colon
• Value - that part after the colon

The property is a quality or characteristic that something possesses. In the previous example, it is color. The value is a precise specification of the property. In the example, it is "green," but it could just as easily be blue, red, yellow, or some other color.

*I like the way CSS style sheets are designed with brevity in mind – this allows them to load faster and cuts down on the time required to write one by hand!

*In the previous CSS tutorial, we glued the style sheet into the HTML document by using the style element. It is interesting that are several ways to link the CSS and the HTML document!

CSS was carefully designed so that all content should remain visible even if the browser knows nothing about CSS.

*Very useful thing to incorporate into a webpage, since not everyone’s computer/browser behaves in the same way.

*Interesting how CSS is even used to manage the space in the margins/around text. I wouldn’t have thought about this as being a controllable element.

A fundamental feature of CSS is that more than one style sheet can influence the presentation of a document. This feature is known as cascading because the different style sheets are thought of as coming in a series.