way to affect mass changes in a document

css can change browser chrome?

MOSAIC browser changed html

css meant to ensure universal changes

author calls HTML unstructured, alluding to html being "structureless"

css provides way of dividing info as well as designing

css is easier than nested tables

propaganda: "CSS lets you set colors on text and in the background of any element; permits the creation of borders around any element, as well as the increase or decrease of the space around them; lets you change the way text is capitalized, decorated (e.g., underlining), spaced, and even whether it is displayed at all; and allows you to accomplish many other effects"

reduces web authors workload.

can reference css files externally, like libraries.

provisions for confilting rules are reffered to as cascading....as in Cascading Style Sheets

understanding cascade rules.

stylistic elements being removed from HTML

the future is XML and CSS

replaced and non-replaced elements

block-level and inline-level

whoops...got distracted for 11 minutes.

block - p and div

inline - defining tags

can change properties of HTML tags with css. (good for XML, too!, can create your own tags with special properties.)

change properties with DISPLAY tag.

media attribbute - specifies what kind of browser can access your document.

OPERA makes web pages into presentations!

checked it out. its true.

can link more than one stylesheet

title attribute gives a title to your style sheet

oops sent an email @ 11:33

the style attribute should alwyas be "text/css"

oops another email@ 11:42

@import can be called inside the <style> tag

@import is not recognized by older browsers which may be good.

css comments /*   */

inline styles - applying a style within an html tag / not recomended

sarcastic wooowwwwwwwwwww

"old school HTML"

CSS rules: selector, declaration.

selectors are usually HTML elements, but can be applied to XML tags as well.

whoops got caught up in a lottery wikipedia article @ 8:44pm

keywords seperated by spaces

you can group selectors, seperating by comma.

universal selectorrrrr: *

grouping declerations. seperated by semicolons

browser will ignore all stupid declarations

class selectors - custom selectors applied by adding class attribute to a tag.

*.class{color:black;}     does EVERYTHING

just .class is combined by a specific selector like:

p.class{font-style:italic;}

multiple classes seperated by spaces

declared by .dumb.class

id selector - the same but with a # instead of a .

ids can only be used once in an html document

selectors are case sensitive.

can do attribute selection:

a[class]{color:black;}
a[id]{color:blue;}

this works well in XML documents

tool tip styles: *[title]

document structure

html parent-child relationships

selecting children of a parent

h1 > strong{}

for

<h1>lalala<strong>HI</strong</h1>

has to be in "source order"

pseudo class a:visited

a.external!

input:focus for forms!

hover for body!

first-letter!

body:after {content: "  The End.";}

process of considering rules is called the cascade

hierachy is based of specificity

crazy rules for determining specificity:

 For every ID attribute value given in the selector, add 0,1,0,0.

 For every class attribute value, attribute selection, or pseudo-class given in the selection, add 0,0,1,0.

 For every element and pseudo-element given in the selector, add 0,0,0,1. CSS2 contradicted itself as to whether pseudo-elements had any specificity at all, but CSS2.1 makes it clear that they do, and this is where they belong.

 Combinators and the universal selector do not contribute anything to the specificity (more on these values later).
 
universal selectors do not contribute to specificity

inline styles have the most specificity

rules are marked important by !important

inheritence is when tags inherit styles (such as p inheriting from body)

cascade - sort by declaration

link styles should always be declared in the order (link,visited,hover,active)

these rules are the most important part of CSS

css numbers integers and reals

16 named CSS colors 

aquafuchsialimeoliveredwhiteblackgraymaroonorangesilveryellowbluegreennavypurplteal

good quote: "f you were to open up a computer monitor, or even a television, and you got far enough into the projection tube, you would discover three "guns.""

you can specify colors by rgb value or percentages

also by hexadecimal values

length can be spcified by absolute length (in, cm, etc.)

rant on global issues: "The fact that this unit is in the specification, given that almost the entire world uses the metric system, is an interesting insight into the pervasiveness of U.S. interests on the InternetÑbut let's not get into virtual sociopolitical theory right now"

absolute lengths are ususable because of differences between monitors

relative units are em ex and px

pixel lengths resolve the need for spacer gifs

url format: url(protocol://server/pathname)

css2 adds angle, time and frequency units.

reoccuring lesson: netscape sucks.

author encourages the use of specific AND generic font families.

preference is determined from order

font names with spaces need single quotion marks ' '

font-weight: normal bold bolder lighter 100 200 etc

numbers depend on font family

font-size: xx-small, x-small, small, medium, large, etc. determined by em-square size

scaling factors changed over css versions

percentage sizes are based on parents fixed size

px sizes are most exact

italic is seperate font face, oblique is slanted

font-variant small-caps is different sized capital letters

font-stretch and font size adjust are never used. period.

font property can handle all other font related properties

attributes are seperated by spaces

have to define at least size and family

font also has this:!!
caption
The font used for captioned controls, such as buttons

icon
The font used to label icons

menu
The font used in menusÑthat is, dropdown menus and menu lists

message-box
The font used in dialog boxes

small-caption
The font used for labeling small controls

status-bar
The font used in window status bars

fontdownloading

@font-face {font-family: "Scarborough Fair";

   src: url(http://www.example.com/fonts/ps/scarborough.ps);}

text properties are different from font properties

text-indent for paragraphs can use percentage or measurements

lineheight depends on font size - using just a number is a scaling factor

vertical-align - defaults to baseline

superscripted - align upwards subscripted align downwards

percentages for vertical align lower baseline

word-spacing  -  the space between words...duh

word is defined by surrounding whitespace

texttransform is used to capitalize letter and make all upper and lowercase

cooool text decoration - underline, overline, line-through, blink

can do overline and underline - also works with vertical align

text-shadowwwww-cooooool (color and three length values text-shadow: silver 2px 2px 2px;)

whitespace for spaces in the html
 
by using {white-space: pre;} uses spaces just like in the code

direction! rtl and ltr

forgot to tell , notes: author calls browsers "user agents".

every element has a rectangular box.

box model objects are called block level elements

split into horizontal and vertical formatting

setting margins to equal width is the correct way to center objects.

negative margins - to set a child wider than it's parentttt.

for replaced elements(images) the block has a minimum size of the object

easyyy

span is an inline element

span is a long line.

an inline obects size is based on the content as opposed to a div which can have empty content but still a size.

summary - inline objects are trickier in terms of line-height.

got sucked into the internet @ 6:09

lesson learned use a raw number as a line-height.

@ 6:11 did span / border test. http://www.supercentral.org/lk/?p=385 http://www.supercentral.org/wordpress/?p=1078

negative margins have cool effects....

you can change browser rules with display!

display attributes: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

element boxes - ugggghhhh havent we gone over this?

margins defined as blank space around an element

margin: top right bottom left (clockwise)

percentage values make elements adapt to resolution "

If the value for left is missing, use the value provided for right.

If the value for bottom is missing, use the value provided for top.

If the value for right is missing, use the value provided for top."

can use margin-left,right,top,bottom for single sides

"you can create a Mondrian effect with several overlapping or randomly placed boxes"

margins can be applied inline as well.

inline negative margin test @ 9:53
http://www.supercentral.org/wordpress/?p=1079

back @ 9:59

border is the color of its content by default

borderstylesss:  none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

can define border sides

border width and also border-top-width,etc

give it measurement values or thin, medium and thick

border-color and also border-right-color - etc

border test @ 10:11

back @ 10:28 http://www.supercentral.org/wordpress/?p=1081

border-color: transparent;

padding - got it

single-side padding

webdesign: "When you're designing a page, you need to plan it out before you start"

"Used properly, colors can really strengthen the presentation of a document."

colorssssss - got it

color can be applied to form elements

browser proof way of setting universal color: body, table, td, th {color: red;}

background color ins not inherited, it's transparent.

background image = body {background-image: url(bg23.gif);}

background repeat options: repeat | repeat-x | repeat-y | no-repeat 

background-position - can use keywords (top,left,etc.) or measurements or percentage.

background-attachment: scroll | fixed | inherit (favorite among myspace profiles)

fixed helps you line up background because there origins stay the same.


just lost 2 hours of notes.....oh well. 8:21pm 3/6/07 chapter 11

border-spacing for tables can occur on x and y axis

great sentence: "When two or more borders are adjacent, they collapse into each other."

table heights are calculated automatically?

list-style-type - disc | circle | square | decimal | decimal-leading-zero | upper-alpha |lower-alpha | upper-roman | lower-roman | lower-greek | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

shorthand list li {list-style: url(ohio.gif) square inside;}

generated content: a[href]:before {content: "(link) ";}

attr() - file

counter - for strangely numbered lists

system font keywords (for copyin fonts from a users system):
caption
icon
menu
message-box
small-caption
status-bar

can also copy system colors

cursor keywords: [<uri>,]* [ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit

custom cursor

outlines exist on the borders edge

outline styles: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

outlines can invert backgrounds

shorthand outline: 
a:focus {outline-color: red; outline: thick solid;}

you can assign stylesheets for different mediums

@page {size: landscape;}

also for aural browsers

h1 {play-during: url(trumpets.mp3);}

CSS AND SOUNDSSSSS..

"The animals on the cover of Cascading Style Sheets: The Definitive Guide, Second Edition are salmon (salmonidae), which is a family of fish consisting of many different species. Two of the most common salmon are the Pacific salmon and the Atlantic salmon."