COS 125 Day 17

Agenda Assignment #4 due Assignment #5 due next class Capstone Progress Reports Due Exam #3 will March 26 – Castro Chaps 1-7 Lecture/Discuss Creating and Applying Styles

Learning Objectives 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

Style Sheet Examples Examples of applying style sheets – Formatting –

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

Constructing A Style Rule Selector {property:value; property:value} Examples – h1 {color:red;background:yellow} – h2 {color:white;background:black} – p {color:blue}

Constructing Selectors 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

Selecting Elements by Name 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}

Selecting Elements by Class or ID 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.class {color:red} – h2#label {color:red}

Selecting Elements by Context 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

Selecting Elements by context 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}

Selecting Elements by Context 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}

Selecting Links elements based on their state (pseudo-class) 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}

Selecting part of an element (pseudo- element) You can select just the first letter or first line f a element to be formatted h1:first-letter {color:red} p:first-line {color:blue} Does not work with all browsers

Selecting elements based on attributes of the element element[attribute]{…} Or element[attribute=“value”] {…} (must have) Or element[attribute~=“value”]{…} (can have) Or element[attribute|=“value”]{…} (must have “value-”) Does not work in Internet Explorer

Combining Elements 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}

Creating an external Style Sheet 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

Linking an external style sheet In head section – – url.css is the location and filename of your external CSS style sheets

Creating an Internal Style Sheet Internal style sheet will only effect the one web page In head section selector{property:value} ….

Importing External Style Sheets Used with internal style sheet “external.css”; selector{property:value} ….

Applying styles locally Use style attribute in the element you wish to format Will only effect that occurrence of the element Example

Location of style rules 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

Adding comments to a style rule Why?? – So that you remember /* comments */ Cannot be nested – /* this /*doesn’t*/ work */

Assignment #6 posted I have posted assignment 6 in WebCT – Covers Chapters 8-11 – Most difficult assignment yet. – Due April 5 (two weeks) – I posted it early to allow for any one who may wish to get an early start – We will discuss this assignment in upcoming classes