 Capstone Proposals Due on Feb 23 › Must be a web site › Capstone Project Description sp 09.htm Capstone Project Description sp 09.htm  Assignment 3 Corrected › 4 A’s, 3 B’s, 2 C’s & 1 D  Assignment 4 Posted › Due February 9:35 AM  Quiz 1 will be on March 2 › Chapters 1-6 › 20 m/c and 4 short essay › Open book, open notes  Lecture/Discuss Creating and Applying Styles

Work in CODE mode not design!!  A Title of “assignment #3” › …… assignment #4 …..  A least 3 of the 6 possible Section headers › Give each header a name and a title   A division, a paragraph and an in-line span ›  Add some comments › Your name › Date you created this web page 

 Bold ›  Italic ›  Preformatted text ›  Big and small text ›  Monospaced text ›  Quoted text (with reference) ›  Superscript and subscript ›

 A transparent gif of your name (Image 1)  A animation of your name (Image 2)  A photorealistic image downloaded from the web (Image 3)  Recompress to smaller file size but the same image size (Image 4) › Page 100 of text  Resize to half the original size (Image 5) › Use PSP

 Make sure each image has alternate text and a title ›  Make sure you specify size for each image ›  Rescale image 3 to 50% of Browser viewable width ›  Create some text describing Image 3 and create the following › float the text to the right of image 3  › float the text to the left of image 4   Make sure you have a background color or image ›

 Understand the syntax of a CSS rule  Write CSS rules  Assign the same style rule to more than one element  Create style rules for link states  Understand how to create an external style sheet  Understand how to link to an external style sheet  Understand how to use internal style sheets  Understand how to import an external style sheet  Understand how to apply styles locally  Explore how to use comments in style rules

 Examples of applying style sheets ›  Formatting › › amples/localindex.html#c7 amples/localindex.html#c7

 The CSS1 specification was developed in 1996  CSS2 was released in 1998  CSS3 is on its way  CSSs provide the means to control and change presentation of HTML documents  CSS is not technically HTML, but can be embedded in HTML documents  Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents  Style is specified for a tag by the values of its properties 

 There are three levels of style sheets Inline - specified for a specific occurrence of a tag and apply only to that tag – This is fine-grain style, which defeats the purpose of style sheets - uniform style Document-level style sheets - apply to the whole document in which they appear This is what happens when you modify xHTML in Dreamweaver using deign mode External style sheets - can be applied to any number of documents  When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence › In a sense, the browser searches for a style property spec, starting with inline, until it finds one (or there isn’t one) › /cascade.html#cascade /cascade.html#cascade

 Inline style sheets appear in the tag itself  Document-level style sheets appear in the head of the document  External style sheets are in separate files, potentially on any server on the Internet › Written as text files with the MIME type text/css

 Use to format XHTML documents  Separate Content from Format  Allows consistent “Look and Feel” to all web pages in a web site

 Selector {property:value; property:value}  Examples › h1 {color:red;background:yellow;} › h2 {color:white;background:black;} › p {color:blue;}

 Value can be inherit from parent › Color:inherit;  Value can be predefined › display:block;  Value can be Length › Must contain units (except 0) › font-size:12px  Vale can be a percentage (relative to parent) › font-size:80%; › font-size:2em;  Value can be a number (real or integer) › Line-height:2;  Value can be a URL › Background:url(image.gif);  Value can be a color › rgb( 0,0,255) › rgb(0%,0%,100%) << error in textbook! › #0000ff › blue

 Why?? › So that you remember  /* comments */  Cannot be nested › /* this /*doesn’t*/ work */

 A selector determines which elements will be formatted  A selector can contain up to 5 criteria (any combination) › The type or name of the element › The context in which the element is found › The class or id of an element › The pseudo-class of an element or a pseudo-element itself › Whether or not an element has certain attributes and values

 Simply type the element as the selector › h1 › p › div  Add { property:value;…}  You can group element with a comma › h1,h2,h3 {color:red}  You can use * for all elements › * {color:red}

 If your elements is labeled with id or class, it can be formatted via a selector  If you used class › ›.bigheader {property:value}  If you used id › › #firstheader { property :value}  Can be used with element name › h1.bigheader {color:red} › h1#firstheader {color:red}

 Selecting elements based on parent/child relationship between elements header paragraph BIG small div is ancestor of all the above elements h1 is child of div div is parent (ancestor) of h1 big is a sibling of small h1 is a sibling of p big is descendent of div and child of p

 To select an element based on the context (relationship) do the following  For a any descendant element › Ancestor descendant {…} › Div.class p {color:red}  For only the child of a parent element (only some browsers) › Ancestor > descendent {…} › Div#label > p {color:red}

 To select elements that are the first child of a parent element › div p:first-child {color-red}  To select element based on siblings › div p+p {color:red}

 State means visited, mouse is over link.. etc › a:link {color:red} › a:visted{color:blue} › a:focus{color:yellow} › a:hover{color:green} › a:active{color:white}

 You can select just the first letter or first line of an element to be formatted  h1:first-letter {color:red}  p:first-line {color:blue}  Does not work with all browsers

element[attribute]{…} Or element[attribute=“value”] {…} (must have) Or element[attribute~=“value”]{…} (can have) Or element[attribute|=“value”]{…} (must have begin with “value-”) Does not work in Internet Explorer

 You can combine any of the previous techniques  First you define context  Then the element  Then class or id  Next pseudo-class or pseudo-element  Div.works p em:firstletter{color:red}

 Create a new text doc  Define rules  Save as “anyname.css  File must be “text only”  In Dreamweaver › File>New>”CSS Style Sheets” › then select one of the already begun style sheets

 In head section › › url.css is the location and filename of your external CSS style sheets

 Internal style sheet will only effect the one web page (not efficient)  In head section selector{property:value} ….

 Used with internal style sheet commands “external.css”; selector{property:value} ….

 Use style attribute in the element you wish to format (really not efficient)  Will only effect that occurrence of the element  Example ›

 Based on 1. Inheritance Style attribute may be inherited from parent element 2. Specificity The more specific the selector the stronger the rule ID is the most specific selector 3. Location The later the rule the stronger it is 4. Declaration !important added to end of rule amples/cssblocks/specificity.html p {color:red} p.group {color:blue} p#one {color:green} p#one {color:magenta }

 With so many ways to apply style what happens when there is more than one rule for a an element › Locally applied rules take precedence › Internal style rules before imported style rules › Order of the rules in a style sheet  Tip of the day ›