Learning CSS

What is CSS? Cascading Style Sheets allows you to work with several styles in place that cascade in a hierarchical order. The order the CSS work is, one, starting from the top, overrides the styles determined in the other: (Usually use combination)

1. Inline Style: Style determined within the HTML body. Best to avoid too much of this.2. Internal: Style determined inside header tags3. External Style: Style determined with external style sheet4. Browser Default

Different Parts of CSS(references www.w3.org, www.w3schools.com)

SyntaxSelector {property: value} (html tag you wish to define)

body { background-color: black background image: “images/....jpg” background-repeat: no-repeat}

p {

font-family: “Verdana, sans-serif” text-align: left color: black}

Grouping

h1 { font-family: Arial font-size: 5}

h2 { font-family: Arial font-size: 3}

h1, h2, h3, h4 { color: black font-weight: bold}

Class

selector.class {property: value}

p.main { font-family: Verdana font-size: 2 font-color: #333333 text-align: left line-height: ““

Different Parts of CSS cont.

id selectorsunique styles for html elements

#left { position: absolute left: 100 top: 250}

middle { position: absolute left: 300 top: 250}

An Example: www.underconsideration.com

Working in Dreamweaver

Setting Internal Stylessetting your document properties and link styles using the properties box

setting other styles within the document

Working with External Style SheetsSetting you styles in a .css document and referencing the sheet in your html header content

How to Organize for CSS

Determine the organization of your site: /Decide what levels each html page, images will be on: the folder system /Organize your files this way and stay with it

Design with a GRID and be consistent with it’s usage: /know what the overall size is and what x/y locations your guides fall /set up this grid structure in DW-it will help you to set you positions or table dimensions /decide how this is going to play out in CSS or HTML: What makes the best sense?

Determine you styles: /what is image and what is text /what is background image /what are your color schemes in hexidecimal /what color will you use for text, for links, for backgrounds /what style(s) of navigation are you using-be consistent /where are the positions of your main graphic elements /what typeface, style, size and color are you using for headers, text, links, etc. Determine how you will set up your styles and in what combination:1. Inline Style: Style determined within the HTML body. Best to avoid too much of this.2. Internal: Style determined inside header tags3. External Style: Style determined with external style sheet4. Browser Default

Start with your external style sheet: /body /links /paragraphs /headers /positions /different classes: useful for variation from html document to document

Use comments to separate parts of CSS document:

/*body styles*/body.classes (.design, .create, .think, .yoga)/*positioning*/#cell1#cell2#cell3#cell4#cell5#cell6(through 16)/*text styles*/h1p.classes