Introduction to Computer Science Web Development

Size: px

Start display at page:

Download "Introduction to Computer Science Web Development"

Lillian Burke
5 years ago
Views:

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 8

2 Lecture Outline: Advanced CSS Pseudo-Classes CSS interacting with users CSS Cascading Algorithm How do we resolve conflicting rules?

3 Pseudo-Class CSS selectors Target only the structures that cannot be targeted by simple combinations of regular selectors OR Target ability to style based on user interaction with the page (e.g. hover an element with their mouse)

4 Syntax of a pseudo-class selector:pseudo-class { property:value; }

5 Syntax of a pseudo-class: Examples /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }

6 We will only cover a few Pseudo-Classes :link :visited :hover :active :nth-child( )

7 Pseudo-classes can be combined with selectors a.highlight:hover { color: red; }

8 Pseudo-classes can be combined with selectors a.highlight:hover { color: red; } div:hover { background-color: blue; }

9 Let s try it examples/pseudo-selectors/ pseudo-selectors-before.html

10 Lecture Outline: Advanced CSS Pseudo-Classes CSS interacting with users CSS Cascading Algorithm How do we resolve conflicting rules?

11 Cascade Algorithm in CSS (The C in CSS) Cascading is a fundamental feature of CSS It is the core of understanding CSS How to tell which CSS rule wins? Which declaration should be applied? If there is a conflict, how to resolve that conflict?

12 The Cascade Algorithm is based on these 4 concepts Origin Merge Inheritance Specificity

13 Origin Precedence and Merge Origin Merge Inheritance Specificity

14 Origin Precedence and Merge When in conflict Without conflict Origin Merge Inheritance Specificity

15 Last declaration wins (when in conflict) Origin Precedence Rule HTML is processed sequentially, From top to bottom For precedence, think of external CSS as declared at the spot where it s linked to

16 When not in conflict (target same rule) Rule: Declaration Merge: Both elements are applied at the same time (merged)

17 Origin Precedence Rule in action p { font-size: 130%; background-color: gray; color: white; } external.css Overwrite with red Overwrite with black <html> <head> <title>cascade of CSS</title> <link rel="stylesheet" href="external.css"> <style> p { color: red; } </style> </head> <body> <h1>origin Example</h1> <p>the rule is simple: last declaration wins.</p> <p style="color: black;">if there is no conflict, declarations merge into one rule.</p> </body> </html>

18 Merge rule in action p { font-size: 130%; background-color: gray; color: white; } These rules are still applied i.e., merged <html> <head> <title>cascade of CSS</title> <link rel="stylesheet" href="external.css"> <style> p { color: red; } </style> </head> <body> <h1>origin Example</h1> <p>the rule is simple: last declaration wins.</p> <p style="color: black;">if there is no conflict, declarations merge into one rule.</p> </body> </html>

19 Merge rule in action p { font-size: 130%; background-color: gray; These rules are still applied i.e., merged color: white; } <html> <head> <title>cascade of CSS</title> <link rel="stylesheet" href="external.css"> <style> p { color: red; } </style> </head> <body> </body> </html> <h1>origin Example</h1> <p>the rule is simple: last declaration wins.</p> <p style="color: black;">if there is no conflict, declarations merge into one rule.</p>

20 Inheritance When in conflict Without conflict Origin Merge Inheritance Specificity

21 Inheritance is a common property in other OO languages as well Inheritance idea: If I specify a CSS property within some tag, every child and grandchild of that element in the Document Object Model (DOM) Tree will inherit that CSS property. Example: If I specify some CSS property for the body tag, every other element will have the same (unless I overwrite with some other rule later)

22 Inheritance is a common property in other OO languages as well Inheritance idea: If I specify a CSS property within some tag, every child and grandchild of that element in the Document Object Model (DOM) Tree will inherit that CSS property. Example: If I specify some CSS property for the body tag, every other element will have the same (unless I overwrite with some other rule later)

23 Specificity Origin Merge Inheritance Specificity

24 Specificity is a simple rule but applying it requires some thinking Specificity idea: The most specific CSS Selector combination wins The hard part is to figure out which selector combination is the most specific

25 To define specificity we can use a score style = ID Class, pseudoclass, attribute No. of Elements The selector with the highest score wins i.e., it is the most specific!

26 To define specificity we can use a score style = ID Class, pseudoclass, attribute No. of Elements More Specific Less Specific The selector with the highest score wins i.e., it is the most specific!

27 To define specificity we can use a score style = ID Class, pseudoclass, attribute No. of Elements Example: what is the score for this CSS selector? <h2 style= color: green; >

28 To define specificity we can use a score style = ID Class, pseudoclass, attribute No. of Elements Example: what is the score for this? There is nothing more specific than that! <h2 style= color: green; >

29 To define specificity we can use a score style = ID Class, pseudoclass, attribute No. of Elements Example: what is the score for this selector? (Descended combination of selectors) div p { color: green; }

30 Which CSS selector is more specific? div #blogentry { color: blue; } vs div.small p { color: green; } style ID Class No. of elements style ID Class No. of elements

31 Which CSS selector is more specific? div #blogentry { color: blue; } div.small p { color: green; } more specific! 101 > style ID Class No. of elements style ID Class No. of elements

32 Which CSS selector is more specific? <style> header.navigation p { color: blue;} p.blurb { color: red; } p { color: green; } </style> </head> <body> <header class="navigation"> <p class="blurb > Which color am I? </p> </header> </body>

33 Which CSS selector is more specific? <style> header.navigation p { color: blue;} p.blurb { color: red; } p { color: green; } </style> </head> One class 2 elements One class 1 element One element <body> <header class="navigation"> <p class="blurb > Which color am I? </p> </header> </body>

34 Which CSS selector is more specific? <style> header.navigation p { color: blue;} p.blurb { color: red; } p { color: green;!important} </style> </head> Overwrites Everything else <body> <header class="navigation"> <p class="blurb > Which color am I? </p> </header> </body>

35 What color will the words unknown color!" be? <body> <div> <section id="mysection"> unknown color!! </section> </div> </body> body { } color: blue; Blue Whatever default color the browser assigns to it since we didn't specify the color of the <section> tag

36 What color will the words unknown color!" be? <body> <header class="navigation"> <p class="blurb > Which color am I? </p> </header> </body> header.navigation p { color: blue;} p.blurb { color: red;} p { color: green; } Blue Green

37 What color will the words unknown color!" be? <body> <header class="navigation"> <p class="blurb > Which color am I? </p> </header> </body> header.navigation p { color: blue;} p.blurb { color: red;} p { color: green; } _V_ Blue _X Green

38 Summary Pseudo-classes allow dynamic style control of elements e.g., links visited or hover on elements Cascade: Origin, Merge, Inheritance and Specificity Provide precise control over targeting content while allowing maximum reuse of style across the website Reference

39 Introduction to Computer Science Web Development Flavio Esposito Lecture 8

BIM222 Internet Programming

BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements