Introduction to Computer Science Web Development

Size: px

Start display at page:

Download "Introduction to Computer Science Web Development"

Arthur Chandler
5 years ago
Views:

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 6

2 Review from last lecture

3 A collection of CSS rules is called a Style Sheet Styles Sheet p { color: red; font- size: 20px; width: 200px; h1 { color: black; font- size: 36px; text- align: center; Zero or more declarations Are allowed per selector

4 3 Ways of using CSS are possible <p style="color: red">text</p> <p style="color: red">text</p> <p style="color: red">text</p> Inline: LEAST REUSABLE 3 paragraphs, specify 3 times same CSS code <head> <style> p { color:red; /*10,000 CSS rules */ </style></head> Internal: KIND OF REUSABLE 3 pages, specify 3 times the same code <link rel="stylesheet" href= style.css > External: MOST REUSABLE 3 pages, just 3 links to the same CSS file (least code duplication is desirable)

5 3 possible CSS Selectors p, h1, a, div { Element Selectors standard HTML tags:.classname { #idname{ Class Selectors Used to style groups of multiple objects ID Selector Used to style single named objects

6 This lecture covers Web Development Combining CSS Selectors (advanced CSS) Element with Class Selector Child Selector Descended Selectors Web Science Network Structure Connected graphs Connected components Induced Subgraphs

7 This lecture covers Web Development Combining CSS Selectors (advanced CSS) Element with Class Selector Child Selector Descended Selectors Web Science Network Structure Connected graphs Connected components Induced Subgraphs

8 HTML Document Object Model (DOM) Child of html object Children of body Children of head object Sibling objects

9 Combining CSS Selectors p.small { font- size: 10px; Change style of every p element that has class= small Example: <p class= small > </p> will be affected <div class= small > </div> will be unaffected

10 Combining CSS Selectors p.small { font- size: 10px; Change style of every p element that has class= small Example: <p class= small > </p> will be affected <div class= small > </div> will be unaffected Note the lack of space between element (p) and class definition (small) p small { would have a different meaning

11 Child Selectors change style of every p element that is a direct child of an article element article > p { color: green;

12 Child Selectors change style of every p element that is a direct child of an article element article > p { color: green; Examples: <article> <p> </p> will be affected (direct child) </article>

13 Child Selectors change style of every p element that is a direct child of an article element article > p { color: green; Examples: <article> <p> </p> will be affected (direct child) </article> <p> </p> unaffected text (no child)

14 Child Selectors change style of every p element that is a direct child of an article element article > p { color: green; Examples: <article> <p> </p> will be affected (direct child) </article> <p> </p> unaffected text (no child) <article> <div> <p> </p> </div> unaffected (no direct child) </article>

15 Descended Selectors change style of every p element that is inside AT ANY LEVEL Even not a direct child As long as is an ancestor article p { color: green; Examples: <article> <p> text here </p> will be affected (direct child) </article>

16 Descended Selectors change style of every p element that is inside AT ANY LEVEL Even not a direct child As long as is an ancestor article p { color: green; Examples: <article> <p> text here </p> will be affected (direct child) </article> <p> </p> unaffected text (no child in the DOM)

17 Descended Selectors change style of every p element that is inside AT ANY LEVEL Even not a direct child As long as is an ancestor article p { color: green; Examples: <article> <p> text here </p> will be affected (direct child) </article> <p> </p> unaffected text (no child in the DOM) <article> <div> <p> </p> </div> affected (ancestor) </article>

18 Descended and Child are not limited to Element selectors.colored p { color: green; article >.colored { color: green; change style of every p AT ANY LEVEL inside an element with class= colored change style of every element that is a direct child of an article element

19 Let s apply these new concepts on real CSS files advanced_css/element- with- class- before.html advanced_css/child- selector- before.html advanced_css/descendant- selector- before.html

20 Solutions advanced_css/element- with- class- after.html advanced_css/child- selector- after.html advanced_css/descendant- selector- after.html

21 Combining Selectors Summary p.small { Element with class selector (selector.class) article > p { Child (direct) selector (selector > selector) article p { Descendent selector (selector selector)

22 Know that they exist We will NOT cover (because complex and rare) Adjacent Sibling Selector (selector + selector) General Sibling Selector (selector ~ selector)

23 Example of Exam question <div> <p> I am feeling blue</p> </div> <section> <p>i just want to be left alone!</p> </section> Given the HTML code above, write the CSS rule to turn the text of the first <p> tag blue, but NOT the second <p> tag.

24 Hint (not given in exams): at least one of these four works <div> <p> I am feeling blue</p> </div> <section> <p>i just want to be left alone!</p> </section> Given the HTML code above, write the CSS rule to turn the text of the first <p> tag blue, but NOT the second <p> tag. div > p { color: blue; div.p { color: blue; div p { color: blue; p { color: blue;

25 Solution (both are correct) <div> <p> I am feeling blue</p> </div> <section> <p>i just want to be left alone!</p> </section> Given the HTML code above, write the CSS rule to turn the text of the first <p> tag blue, but NOT the second <p> tag. div > p { color: blue; div.p { color: blue; div p { color: blue; p { color: blue;

26 Another Example of Exam question <div> <div> <div class="makemered"> <p>i am feeling red</p> </div> </div> <section class="makemered"> <p>i just want to be left alone!</p> </section> </div> Write the CSS rule(s) that turns the text of the first <p> tag red, but NOT the second <p> tag.

27 Hint (not given in exams): at least one of these four works <div> <div> <div class="makemered"> <p>i am feeling red</p> </div> </div> <section class="makemered"> <p>i just want to be left alone!</p> </section> </div> Write the CSS rule(s) that turns the text of the first <p> tag red, but NOT the second <p> tag..makemered > p { color: red; div.makemered p { color: red; div > div > p { color: red; div p { color: blue;

28 Solution (both are correct) <div> <div> <div class="makemered"> <p>i am feeling red</p> </div> </div> <section class="makemered"> <p>i just want to be left alone!</p> </section> </div> Write the CSS rule(s) that turns the text of the first <p> tag red, but NOT the second <p> tag..makemered > p { color: red; div.makemered p { color: red; div > div > p { color: red; div p { color: blue;

29 Web Science: Net Structure Web Development Combining CSS Selectors (advanced CSS) Element with Class Selector Child Selector Descended Selectors Web Science Network Structure Connected graphs Connected components Induced Subgraphs

30 Review from lecture 4 (limited to notions useful today)

31 Graph defined using set theory Def: Graph G is an ordered pair G = (V,E) where: 1. V is a set of nodes (vertices) 2. E is a set of edges (links). 3. An edge is defined with a pair of vertices.

32 Adjacent and Incident Def: Two vertices are called adjacent if they share a common edge, in which case the common edge is said to join the two vertices. Def: An edge and a vertex on that edge are called incident.

33 Paths: a way to get from a node to another We write a path P as an ordered list of directed edges:

34 Web Science: Net Structure Web Development Combining CSS Selectors (advanced CSS) Element with Class Selector Child Selector Descended Selectors Web Science Network Structure Connected graphs Connected components Induced Subgraphs

35 Notion of Connected A path connects its origin and destination nodes Two nodes are connected if there is at least one path that connects them A graph is connected if each of its nodes is connected to all the others

36 Notion of Connected A path connects its origin and destination nodes connected graph Two nodes are connected if there is at least one path that connects them A graph is connected if each of its nodes is connected to all the others Non- connected graph

37 Common sloppy uses of connected Sometimes connected is used informally when another term would be more clear. For example, avoid using connected when one of these unambiguous words would apply: Joined Adjacent Incident

38 Induced Subgraphs It is often useful to consider only part of a graph. Induced subgraphs are one particularly convenient way to define a specific sub- part of a larger graph. Example: Original graph

39 Induced Subgraphs It is often useful to consider only part of a graph. Induced subgraphs are one particularly convenient way to define a specific sub- part of a larger graph. Example: Original graph subgraph induced by the subset of nodes

40 Induced Subgraph Defined Formally Given a graph G=(V,E), an induced subgraph is defined by a subset of vertices S, where The nodes of the subgraph induced by S are the nodes in S. The edges of the subgraph induced by S are i.e. all edges in E that have both endpoints in S. Formally, the induced subgraph is denoted as where is the set of edges defined above

41 Connected Graphs and Connected Components Def: A graph is said to be connected if it consists of a single connected component. Obs: If a graph is not connected, then it consists of two or more connected components.

42 Connected Graphs and Connected Components This graph is connected and therefore has 1 connected component:

43 Connected Graphs and Connected Components This graph is connected and therefore has 1 connected component: This graph has 2 connected components

44 Connected Graphs and Connected Components This graph is connected and therefore has 1 connected component: This graph has 2 connected components This graph has 3 connected components, that can be defined with 3 induced subgraphs: the subgraph induced by {1,2,5,6 the subgraph induced by {3,4 the subgraph induced by {7,8

45 Introduction to Computer Science Web Development Flavio Esposito Lecture 6

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