CMPE 280 Web UI Design and Development February

CMPE 280 Web UI Design and Development February 4 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1

Team Updates Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 2

Good Tutorial Website o http: //www. w 3 schools. com o Both client-side and server-side n n n n HTML CSS Java. Script j. Query Angular. JS JSON AJAX XML Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 3

HTML and CSS o HTML n n n o content organization semantics Cascading Style Sheet (CSS) n n layout formatting Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 4

Link to a Style Sheet o An HTML page can link to an external style sheet. n Example: paragraph 1. html <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Paragraphs and Headings</title> <link rel="stylesheet" href="css/mystyles 1. css" /> </head> <body>. . . </body> </html> Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 5

Example Style Sheet css/mystyles 1. css h 1 { background-color: yellow; color: red; } h 3 { color: gray; } o o All h 1 headings should have red text on a yellow background. All h 2 headings should have a gray text. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak Demo 6

Style Rules o Each style rule has a selector and a declaration block. n n A declaration block consists of one or more declarations. A declaration is a property: value pair. selector h 1 { background-color: yellow; color: red; style rule declaration block } selector h 3 { style rule } Computer Engineering Dept. Spring 2020: February 4 color: gray; declaration CMPE 280: Web UI Design and Development © R. Mak declaration block 7

Style Colors o Specify colors for CSS properties with a predefined color keyword: See http: //www. w 3. org/TR/css 3 -color/#svg-color for the complete list of predefined colors. HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 8

Style Colors, cont’d o You can specify colors by RGB (red-green-blue). n o Example: rgb(178, 60, 0) where each value can range from 0 through 255. You can include alpha transparency with RGBA. n n Example: rgba(178, 60, 0, 0. 75) where the transparency value ranges from 0 to 1 0 is completely transparent, 1 is completely opaque. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 9

Style Colors, cont’d o HSL (hue-saturation-lightness) and HSLA n Examples: hsl(282, 90%, 25%) hsla(282, 90%, 25%, 0. 5) Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 10

Element Classes o An HTML element can have a class name. n n Several elements can share the same class name. Examples: paragraph 2. html Lorem ipsum dolor sit amet, consectetur adipiscing elit, . . . Duis aute irure dolor in reprehenderit in voluptate velit. . . Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 11

Class Selectors o A style sheet can apply a style to all HTML elements of a particular class. n Example: css/mystyles 2. css . latin { font-style: italic; } Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak Demo 12

Class Selectors, cont’d o An element can have more than one class. n Example: o To style an element with both classes: . class-1. class-2 {. . . } n There is no space between the two class names in the selector. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 13

Element IDs o An HTML element can have an ID. n n An ID must be unique and cannot be shared. Examples: paragraph 3. html This is a paragraph. <h 1>Chapter 2</h 1> Yet another paragraph. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 14

ID Selectors o A style sheet can apply styles to HTML elements with particular IDs. n Examples: css/mystyles 3. css #alpha { font-variant: small-caps; } #beta { font-size: x-large; } n The use of element IDs is generally discouraged because the styles cannot be reused. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak Demo 15

Grouping Selectors o To group selectors in order to share a declaration block, separate the selectors with commas. n Example: h 1, h 3 { background-color: yellow; color: red; } Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 16

Defining Selectors o CSS provides many ways to define selectors. o You’ve already seen: n n n by element name: h 1, h 2, p by class name: . latin by element ID: #alpha, #beta Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 17

Select Elements by Context o Select elements based on their ancestors, parents, or siblings. o Example: n . formula p {. . . } Select all paragraphs that are nested inside an element with class formula (i. e. , paragraphs that are descendants of such an element). Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 18

Select Elements by Context, cont’d HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Computer Engineering Dept. CMPE 280: Press, 2014 Spring 2020: February 4 Peachpit ISBN 978 -0 -321 -92883 -2 Web UI Design and Development © R. Mak 19

Select Elements by Context, cont’d o Example: n . formula > p {. . . } Select paragraphs that are direct children of an element with class formula. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 20

Select Elements by Context, cont’d HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Computer Engineering Dept. CMPE 280: Press, 2014 Spring 2020: February 4 Peachpit ISBN 978 -0 -321 -92883 -2 Web UI Design and Development © R. Mak 21

Select Elements by Context, cont’d o Example: n . formula p+p {. . . } Select only the paragraphs that directly follow a sibling paragraph. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 22

Select Elements by Context, cont’d Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 23

Select the First or Last Child Elements o Example: n o Select the first item of a list. Example: n li: first-child {. . . } li: last-child {. . . } Select the last item of a list. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 24

Select the First or Last Child Elements, cont’d HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Computer Engineering Dept. CMPE 280: Press, 2014 Spring 2020: February 4 Peachpit ISBN 978 -0 -321 -92883 -2 Web UI Design and Development © R. Mak 25

Select the First Letter or the First Line o Example: n o Select the first letter of every paragraph. Example: n p: first-letter {. . . } p: first-line {. . . } Select the first line of every paragraph. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 26

Select the First Letter or the First Line, cont’d HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Computer Engineering Dept. CMPE 280: Press, 2014 Spring 2020: February 4 Peachpit ISBN 978 -0 -321 -92883 -2 Web UI Design and Development © R. Mak 27

Select Elements Based on Attributes o Example: n p[class] {. . . } Select any paragraph that has a class attribute. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 28

Select Elements Based on Attributes, cont’d HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 29

Select Elements Based on Attributes, cont’d o Attribute selector options: Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 30

Select Links Based on State o Link states: n n not yet visited focused via the tab key hovered over by the mouse activated by the visitor Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 31

Select Links Based on State, cont’d <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Links</title> <link rel="stylesheet" href="css/linkstyles. css" /> </head> links. html <body> An absolute link to the <a href="http: //localhost/basics/paragraphs. html"> Paragraphs and Headings </a> page. A relative link to the <a href="tables. html">Tables</a> page. </body> </html> Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 32

Select Links Based on State, cont’d a: link { color: red; } a: visited { color: orange; } a: focus { color: purple; } a: hover { color: green; } a: active { color: blue; } css/linkstyles. html Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak Demo 33

Inheritance o An HTML element inherits style properties from its ancestors. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 34

What Can Be Inherited o Text n color (except by the a element) n direction n font-family n font-size n font-style n font-variant n font-weight n letter-spacing n line-height n text-align n text-indent n text-transform n visibility n white-space n word-spacing Computer Engineering Dept. Spring 2020: February 4 o o Lists n list-style-image n list-style-position n list-style-type Tables n border-collapse n border-spacing n caption-side n empty-cells Paged Media (as in printing) n orphans n page-break-inside n widows Other n cursor n quotes CMPE 280: Web UI Design and Development © R. Mak 35

The Cascade o o The cascade principle resolves conflicting style properties for an HTML element. HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978 -0 -321 -92883 -2 Specificity n n The more specific the selector, the stronger the rule. Some selectors from least specific to most specific: Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 36

The Cascade, cont’d o Order n o Rules that appear later take precedence over earlier rules. Importance n n A style marked as !important overrides specificity and order. Example: { color: purple !important; } Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 37

Embedded Style Sheet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Embedded Style Sheet</title> <style> img { border: 4 px solid red; } </style> </head> <body>. . . </body> </html> o Not as clean a separation of content and style. Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 38

Inline Styles o Example: o Not recommended! n n Combines content and style. We want to separate content and style! Computer Engineering Dept. Spring 2020: February 4 CMPE 280: Web UI Design and Development © R. Mak 39