Slide 1

COMP 135Web Site Design IntermediateWeek 4How to Apply CSS to HTMLThree ways to apply CSS:Inline CSSInternal style sheets ( header style information)External style sheets

Inline CSSAdd style declarations directly to elements by specifying values into style attributesThis is a paragraph.This is another paragraph with more text.Internal Style SheetCSS rules placed inside the element within the document

Internal Style Sheet Example

p { color: red;}

This is a paragraph.This is another paragraph with more text.

External Style SheetCSS rules placed inside a separate file with a .css extension; file is referenced with a element in the document

Internal Style Sheet Example

This is a paragraph.This is another paragraph with more text.

Best PracticeYou wont likely use inline CSS unless you want to override an internal or external style sheet (troubleshooting inheritance or cascade problems)Inline style sheets better all rules in one place for easy updating but, this only applies to that documentExternal style sheets are best allows for styling many documents from one place and separates presentation from contentCSS SelectorsElement selector: pID selector: #Class selector: .HTMLChapter 1Lorem ipsumCSS

#chapter { font-size: 3.5em; }.summary { font-style: italic; }p {font-family: Arial, Helvetica, sans-serif; }

Child SelectorSelects the right-hand element only if its a direct child of the left-hand element. Not supported in IE 6 or earlierCSSli > p { color: red; }HTMLselects

Lorem ipsum

But notLorem ipsumThis is a child selector combinatorDescendant SelectorSimilar to child selector except right-hand element does not need to be direct child of left-hand element it can select elements further down the DOM hierarchyCSSli p { color: red; }HTMLselectsLorem ipsumandLorem ipsumBut notLorem ipsumThe white space is the descendant selector combinatorUniversal SelectorSelect every single element in a document* { border-color: red; }Attribute SelectorSelect any element with the attribute specified in the square brackets. Can be just the attribute type or an attribute with a specific valueCSSimg[alt] { border-color: red; }img[src=image.png=] { border-color: red; }HTML

Adjacent Sibling SelectorThis selects the right-hand element only if it has an instance of the element on the left-hand side next to it, on the same level of the DOM hierarchy. These selectors not support in IE6 or earlierh2 + p { color: red; }HeadingA paragraphBut notA paragraphNorHeadingA paragraphThis is the adjacent sibling selector combinatorPseudo ClassesStyles elements based on their states, typically link behavioura:hover { color: red; }All links will change to the colour red when the mouse hovers over them Pseudo ElementsAllows for styling of specific content parts of an element rather than the whole elementp:first-letter { font-size: 300%; }Triples the size of the first letter of each paragraphp:first-line { font-weight: bold; }Bolds the first line of each paragraphGroup SelectorGive multiple selectors the same style by listing them together separated by commas HTMLChapter 1Lorem ipsumCSS

#chapter, .summary { font-style: italic; }p, #chapter { color: rgb(240,128,96); }

Joining SelectorsCreate even more specific selectors by joining selectorsHTML Chapter 1Lorem ipsumCSS

p.class { color: red; }h1#chapter { color: red; }

Conflicting Style RulesSometimes two or more conflicting styles may be applied to the same elementHow do you resolve this conflict and decide which one actually gets applied?You need to understand inheritance and the cascade

InheritanceJust as in genetics where traits can be inherited by children from their parents,This is the mechanism by which certain properties can be passed from a parent element to its child elementsWithout it youd have to specify every property for every element every time you wrote a web pageMuch easier to specify the default font on the element knowing that all child elements of will inherit that propertybody { font-family: Georgia; }h1, h2, h3 { font-family: Helvetica; } /* This overrides the first rule because it is listed later in the code */

Not all properties are inheritede.g., margins, bordersCommon sense should tell you what is and isnt inheritable, or review the CSS 2.1 specification property summary table:www.w3.org/TR/CSS21/propidx.htmlThe CascadeThe Cascade in Cascading Style Sheets (CSS)The mechanism that determines the end result when when multiple conflicting and overlapping rules apply to the same elementThree concepts:ImportanceSpecificitySource order

How it worksImportance is important; if two declarations have the same importance then the specificity of the rule determines which one is appliedIf two declarations have the same specificity, then the source order determines which rule winsImportanceImportance of a CSS declaration depends on where it is specified. Conflicting rules are applied using the following order; later ones override earlier ones:User agent style sheetsNormal declarations in author style sheetsNormal declarations in user style sheetsImportant declarations in author style sheetsImportant declarations in user style sheets

User agent style sheetBuilt-in browser style sheet (default properties)User style sheetNot all browsers support this but users can add their own. Typically used to enhance accessibilityAuthor style sheetThis is the style sheet that we normally think ofWritten by the web designer

Important DeclarationsNormal declarations are normal declarationsImportant declarations are just the opposite: important; these are declarations followed by the !important directive:* { font-family: Helvetica !important; }

Default browser rendering of elements are not overridden unless a rule in user or author style sheet is specifiedSpecificityKey concept that all web designers need to understandA measure of how specific a rule selector isSelectors with low specificity may match many elements on the pageSelectors with high specificity may match a single element on a pagee.g., p matches every paragraph in a document whereas #nav, only matches the element with the id of navCalculating SpecificityIf two or more rules conflict and all have equal importance, then the rule with the most specific selector winsSpecificity has four components; call them a, b, c, and dComponent a is the most distinguishing and d the least

Scoring Specificity ComponentsComponent a given 1 for declaration in a style attribute, otherwise its 0Component b is the number of id selectors in the selector (those that begin with #)Component c is the number of attribute selectors, class selectors, and pseudo-classesComponent d is the number of element selectors and pseudo-elements

Examples of calculating specificity on CSS selectorsSelectorABCDSpecificityh100010,0,0,1.foo00100,0,1,0#bar01000,1,0,0ul#nav a:link01120,1,1,2 Combinators like >, + and the white space (descendant selector) have no effect on specificityid selector is not the same specificity as an attribute selector that refers to the same id attribute [id=nav] has a specificity of 0,0,1,0 wheras #nav has a specificity of 0,1,0,0

Source OrderGiven conflicting rules with the same importance and the same specificity, source order is used to determine the winner: the declaration that appears later in the style sheetIn a single external style sheet the declarations at the end of the file override those at the beginning when they conflictIf the conflicting rules appear in different style sheets the order in which they are linked or imported controls which one is appliedIf there are two linked style sheets in the of a document the one linked last overrides the one linked first

The CSS Box Model Margin defines the space between block elementsThe space around a block elementMarginPaddingBorderContentWidthHeightBorder sets a visible border around the elements contentContent represented by text characters and displayed in a typeface Padding sets the space between the content and inner border edge Height default is distance between ascender and descenderWidth default is width of the line of textCollapsing Margins When adjacent elements have top and bottom margins that meet, you would assume the total space between the two elements is the sum of the bottom margin of one element and the top margin of the next elementIn CSS the value collapses to the larger value of the two element margins If the values were 5 + 10 the effective value is 10If they were 5 + 5 the effective value is 5