Week 8 Reading Notes

CSS Tutorial - w3schools.com


CSS = Cascading Style Sheets
CSS: defines how to display HTML elements (HTML not meant for formatting)

Two parts of CSS "rule" - a selector and one or more declarations

• h1 {color:blue; font-size:12px;}
  


• h1 = selector



• color:blue = declaration



• color = property



• blue = value



• font-size:12px = declaration



• font-size = property



• 12px = value

ID selector: specifies style for single unique element, defined by #

Class selector: specifies style for group of elements, defined by .

Ways to insert CSS:

1. External style sheet = ideal when style applied to many pages



2. Internal style sheet = ideal when single document has unique style



3. Inline style = least useful, mixes content with presentation
   

Multiple styles = cascade into one (ordered by inline style, internal style sheet, external style sheet, browser default)

• Background color = body {background-color:#b0c4de;}



• Background image = body {background-image:url('paper.gif');}

Color property specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"

Font properties: serif vs. san-serif, font families (generic family or font family), font style (normal, italic, oblique), font size (absolute or relative)

Four links states:

1. a:link - a normal, unvisited link



2. a:visited - a link the user has visited



3. a:hover - a link when the user mouses over it



4. a:active - a link the moment it is clicked

Can also style links by text decoration and background color

List options: ordered vs. unordered, shapes or image as line item marker

Table options: table borders, collapse borders, width and height, text alignment, table padding, table color

CSS Box Model = box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content

Advanced CSS options: grouping/nesting, dimension, display, positioning, floating, align, pseudo-class, pseudo-element, navigation bar, image gallery, image opacity, image sprites, media types, attribute selectors

Next: Learn JavaScript (dynamic instead of static)

This tutorial was very helpful and will be good to refer back to, the same way that the HTML tutorial from this site is a helpful introduction. A lot of the different options seem complex, but if I were to actually create a product with them, I would probably be less overwhelmed because I would be picking and choosing what elements I want to see in my final product.

CSS Tutorial: Starting with HTML + CSS (W3)

Step One: Write HTML

• In Notepad (Windows) or TextEdit (Mac)



• Paste or write HTML



• Save
  


• Open in browser
  

Step Two: Add some colors

• Start with style sheet imbedded in HTML (later create CSS and HTML in separate files)
  


• Add colors by name or hexadecimal code

Step Three: Add fonts

• Set font for body and heading



• Try different font names if some don't work

Step Four: Add navigation bar

• Menu is ul list at top



• Use "padding-left" to move body text



• Adjust position of menu and body text

Step Five: Styling links

• Add background to items



• Add color to links



• Specify colors for links visited and not visited

Step Six: Add horizontal line

• Add horizontal rule to separate text from signature at bottom



• Use "border-top" to add dotted line

Step Seven: Put style sheet in separate file

• Separate files so several pages can all point to one style file



• Create new empty plain text file



• Replace style with something like link rel="stylesheet" href="mystyle.css"

This is a great step-by-step to creating a site with HTML and CSS. I think I will referring to this for future labs and assignments for this class, as well as any time I want to build a website in the future. I like that the page even includes instructions on how to save the files and what applications to use to write the code in.

Chapter 2: CSS

HTML: mark up document structure of elements

CSS: gives creator control over style of elements

Ways to create CSS: Normal text editor, Dedicated tool

rule = statement about one stylistic aspect of one or more elements (incl. selector and declaration)

declaration = part of the rule that sets forth what the effect will be (incl. property and value)

CSS formally described in CSS1 and CSS2 from W3C

Ways to "glue" style sheet to document:

1. Apply the basic, document-wide style sheet for the document by using the style element



2. Apply a style sheet to an individual element using the style attribute (inserted inside HTML)



3. Link an external style sheet to the document using the link element



4. Import a style sheet using the CSS @import notation

Must use CSS-enhanced browser - however each browser may display differently

• Tree structures = elements have parents and children



• Inheritance = property values are transferred to descendents (can override)



• (Some elements don't inherit, like background property)

Common tasks with CSS: fonts, margins, links

Cascading = style sheets come in a series, designer's style sheet has precendence and then user's and then browser's default

This article repeated some of what the previous articles/tutorials explained about CSS, but this resource did offer more detailed explanations. This will be good to refer back to if I have trouble understanding the general theories behind the different elements of CSS and also how CSS operates as a whole. This resource will also be helpful if while creating my website, the product does not look the way that I meant it to. I can reread some of these explanations about CSS and determine what I did wrong.