COMP 135 Web Site Design Intermediate

COMP 135Web Site Design Intermediate Week 4

How to Apply CSS to HTML • Three ways to apply CSS: • Inline CSS • Internal style sheets ( header style information) • External style sheets

Inline CSS Add style declarations directly to elements by specifying values into style attributes <p style=“color: red;”>This is a paragraph.</p> <p style=“color: red;”>This is another paragraph with more text.</p>

Internal Style Sheet CSS rules placed inside the <style> element within the document <head> <head><title>Internal Style Sheet Example</title><style type=“text/css”>p { color: red; }</style> </head> <body><p>This is a paragraph.</p><p>This is another paragraph with more text.</p> </body>

External Style Sheet CSS rules placed inside a separate file with a .cssextension; file is referenced with a <link> element in the document <head> <head><title>Internal Style Sheet Example</title><link rel=“style sheet” type=“text/css” href=“external_stylesheet.css”> </head> <body><p>This is a paragraph.</p><p>This is another paragraph with more text.</p> </body>

Best Practice 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

CSS Selectors Element selector: p ID selector: # Class selector: . HTML <h1 id=“chapter”>Chapter 1</h1> <p class=“summary”>Loremipsum</p> CSS <style type=“text/css”> #chapter { font-size: 3.5em; } .summary { font-style: italic; } p { font-family: Arial, Helvetica, sans-serif; } </style>

Child Selector This is a child selector combinator 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 <li> <p>Loremipsum</p> </li> But not <p>Loremipsum</p>

Descendant Selector The white space is the descendant 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 <li><p>Loremipsum</p></li> and <li><div><p>Loremipsum</p></div></li> But not <p>Loremipsum</p>

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

Attribute Selector 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 <img alt=“An image” src=“image.png”>

Adjacent Sibling Selector This is the adjacent sibling selector combinator 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; } <h2>Heading</h2> <p>A paragraph</p> But not <p>A paragraph</p> Nor <h1>Heading</h1> <p>A paragraph</p>

Pseudo Classes 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

Pseudo Elements 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

Group Selector Give multiple selectors the same style by listing them together separated by commas HTML <h1 id=“chapter”>Chapter 1</h1> <p class=“summary”>Loremipsum</p> CSS <style type=“text/css”> #chapter, .summary { font-style: italic; } p, #chapter { color: rgb(240,128,96); } </style>

Joining Selectors Create even more specific selectors by joining selectors HTML <h1 id=“chapter”>Chapter 1</h1> <p class=“summary”>Loremipsum</p> CSS <style type=“text/css”> p.class { color: red; } h1#chapter { color: red; } </style>

Conflicting Style Rules 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

Inheritance 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 <body> element knowing that all child elements of <body> 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: www.w3.org/TR/CSS21/propidx.html

The Cascade • 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

How it works 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 • 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

Important Declarations 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

Specificity 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

Calculating Specificity 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

Scoring Specificity Components 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

Examples of calculating specificity on CSS selectors

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#navhas a specificity of 0,1,0,0

Source Order • 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 <head> of a document the one linked last overrides the one linked first

The CSS Box Model Content Padding Border Margin The space around a block element Height Width • Border – sets a visible border around the element’s content • Padding – sets the space between the content and inner border edge • Content – represented by text characters and displayed in a typeface • Width – default is width of the line of text • Height – default is distance between ascender and descender Margin – defines the space between block elements

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

COMP 135 Web Site Design Intermediate