Week 4

 Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets

 Add style declarations directly to elements by specifying values into style attributes This is a paragraph. This is another paragraph with more text.

 CSS 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.

 CSS 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.

 You won’t 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 document  External style sheets are best – allows for styling many documents from one place and separates presentation from content

 Element selector: p  ID selector: #  Class selector:. HTML Chapter 1 Lorem ipsum CSS #chapter { font-size: 3.5em; }.summary { font-style: italic; } p {font-family: Arial, Helvetica, sans-serif; }

 Selects the right-hand element only if it’s a direct child of the left-hand element. Not supported in IE 6 or earlier CSS li > p { color: red; } HTML selects Lorem ipsum But not Lorem ipsum This is a child selector combinator

 Similar 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 hierarchy CSS li p { color: red; } HTML selects Lorem ipsum and Lorem ipsum But not Lorem ipsum The white space is the descendant selector combinator

 Select every single element in a document * { border-color: red; }

 Select any element with the attribute specified in the square brackets. Can be just the attribute type or an attribute with a specific value CSS img[alt] { border-color: red; } img[src=“image.png”=] { border-color: red; } HTML

 This 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 earlier h2 + p { color: red; } Heading A paragraph But not A paragraph Nor Heading A paragraph This is the adjacent sibling selector combinator

 Styles elements based on their states, typically link behaviour a:hover { color: red; } All links will change to the colour red when the mouse hovers over them

 Allows for styling of specific content parts of an element rather than the whole element p:first-letter { font-size: 300%; } Triples the size of the first letter of each paragraph p:first-line { font-weight: bold; } Bolds the first line of each paragraph

 Give multiple selectors the same style by listing them together separated by commas HTML Chapter 1 Lorem ipsum CSS #chapter,.summary { font-style: italic; } p, #chapter { color: rgb(240,128,96); }

 Create even more specific selectors by joining selectors HTML Chapter 1 Lorem ipsum CSS p.class { color: red; } h1#chapter { color: red; }

 Sometimes two or more conflicting styles may be applied to the same element  How do you resolve this conflict and decide which one actually gets applied?  You need to understand inheritance and the cascade

 Just 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 elements  Without it you’d have to specify every property for every element every time you wrote a web page

 Much easier to specify the default font on the element knowing that all child elements of will inherit that property body { 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 inherited  e.g., margins, borders  Common sense should tell you what is and isn’t inheritable, or review the CSS 2.1 specification property summary table:

 The “Cascade” in Cascading Style Sheets (CSS)  The mechanism that determines the end result when when multiple conflicting and overlapping rules apply to the same element  Three concepts: Importance Specificity Source order

 Importance is important; if two declarations have the same importance then the specificity of the rule determines which one is applied  If two declarations have the same specificity, then the source order determines which rule wins

 Importance 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 sheets Normal declarations in author style sheets Normal declarations in user style sheets Important declarations in author style sheets Important declarations in user style sheets

 User agent style sheet Built-in browser style sheet (default properties)  User style sheet Not all browsers support this but users can add their own. Typically used to enhance accessibility  Author style sheet This is the “style sheet” that we normally think of Written by the web designer

 Normal declarations are normal declarations  Important 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 specified

 Key concept that all web designers need to understand  A measure of how specific a rule selector is  Selectors with low specificity may match many elements on the page  Selectors with high specificity may match a single element on a page  e.g., p matches every paragraph in a document whereas #nav, only matches the element with the id of nav

 If two or more rules conflict and all have equal importance, then the rule with the most specific selector wins  Specificity has four components; call them a, b, c, and d  Component “a” is the most distinguishing and “d” the least

 Component “a” given 1 for declaration in a style attribute, otherwise it’s 0  Component “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- classes  Component “d” is the number of element selectors and pseudo-elements

SelectorABCDSpecificity h100010,0,0,1.foo00100,0,1,0 #bar01000,1,0,0 ul#nav a:link01120,1,1,2

 Combinators like >, + and the white space (descendant selector) have no effect on specificity  id 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

 Given 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 sheet  In a single external style sheet the declarations at the end of the file override those at the beginning when they conflict  If the conflicting rules appear in different style sheets the order in which they are linked or imported controls which one is applied If there are two linked style sheets in the of a document the one linked last overrides the one linked first

 Margin – defines the space between block elements The space around a block element MarginPaddingBorderContent Width Height  Border – sets a visible border around the element’s content  Content – 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 descender  Width – default is width of the line of text

 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 element  In CSS the value collapses to the larger value of the two element margins  If the values were the effective value is 10  If they were the effective value is 5