Slide 1

Week 4

Slide 2

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

Slide 3

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

Slide 4

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.

Slide 5

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.

Slide 6

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

Slide 7

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; }

Slide 8

Selects the right-hand element only if its 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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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); }

Slide 16

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

Slide 17

Slide 18

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

Slide 19

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 youd have to specify every property for every element every time you wrote a web page

Slide 20

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 */

Slide 21

Not all properties are inherited e.g., margins, borders Common 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.html

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

Component a given 1 for declaration in a style attribute, otherwise its 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

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

Slide 34

Margin defines the space between block elements The space around a block element MarginPaddingBorderContent Width Height Border sets a visible border around the elements 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

Slide 35

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