cs 174: web programming september 9 class meeting department of computer science san jose state...
TRANSCRIPT
![Page 1: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/1.jpg)
CS 174: Web ProgrammingSeptember 9 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2015Instructor: Ron Mak
www.cs.sjsu.edu/~mak
![Page 2: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/2.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
2
HTML and CSS
HTML content organization semantics
Cascading Style Sheet (CSS) layout formatting
![Page 3: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/3.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
3
Link to a Style Sheet
An HTML page can link to an external style sheet. Example:
<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>Paragraphs and Headings</title> <link rel="stylesheet" href="css/mystyles1.css" /></head>
<body> ...</body></html>
![Page 4: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/4.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
4
Example Style Sheet
Style sheet css/mystyles1.css:
All h1 headings should have red text on a yellow background.
All h2 headings should have a gray text.
h1 { background-color: yellow; color: red;}
h3 { color: gray;}
Demo
![Page 5: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/5.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
5
Style Rules Each style rule has a selector and
a declaration block. A declaration block consists of
one or more declarations. A declaration is a property: value pair.
h1 { background-color: yellow; color: red;}
h3 { color: gray;}
selector
selector
declaration block
declaration blockdeclaration
style rule
style rule
![Page 6: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/6.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
6
Style Colors
Specify colors for CSS properties with a predefined color keyword:
See http://www.w3.org/TR/css3-color/#svg-color for the complete list of predefined colors.
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 7: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/7.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
7
Style Colors, cont’d
You can specify colors by RGB (red-green-blue). Example: rgb(178, 60, 0)
where each value can range from 0 through 255. You can include alpha transparency with RGBA.
Example: rgba(178, 60, 0, 0.75)where the transparency value ranges from 0 to 1
0 is completely transparent, 1 is completely opaque. Also available:
HSL (hue-saturation-lightness) and HSLA Examples: hsl(282, 90%, 25%)
hsla(282, 90%, 25%, 0.5)
![Page 8: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/8.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
8
Element Classes
An HTML element can have a class name. Several elements can share the same class name. Examples:
<p class="latin"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...</p> <p class="latin"> Duis aute irure dolor in reprehenderit in voluptate velit ...</p>
![Page 9: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/9.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
9
Class Selectors
A style sheet can apply a style to all HTML elements of a particular class. Example:
.latin { font-style: italic;}
Demo
![Page 10: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/10.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
10
Class Selectors, cont’d
An element can have more than one class. Example:
To style an element with both classes:
There is no space between the two class names in the selector.
<p class="class-1 class-2">
.class-1.class-2 { ...}
![Page 11: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/11.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
11
Element IDs
An HTML element can have an ID. An ID must be unique and cannot be shared. Examples:
<p id="alpha"> This is a paragraph.</p>
<h1>Chapter 2</h1>
<p id="beta"> Yet another paragraph.</p>
![Page 12: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/12.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
12
ID Selectors
A style sheet can apply styles to HTML elements with particular IDs. Examples:
The use of element IDs is generally discouraged because styles cannot be reused.
#alpha { font-variant: small-caps;}
#beta { font-size: x-large;}
Demo
![Page 13: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/13.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
13
Grouping Selectors
To group selectors in order to share a declaration block, separate the selectors with commas. Example:
h1, h3 { background-color: yellow; color: red;}
![Page 14: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/14.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
14
Defining Selectors
CSS provides many ways to define selectors.
You’ve already seen: by element name: h1, h2, p by class name: .latin by element ID: #alpha, #beta
![Page 15: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/15.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
15
Select Elements by Context
Select elements based on their ancestors, parents, or siblings.
Example:
Select paragraphs that are nested inside an element with class formula (i.e., paragraphs that are descendants of such an element).
Example:
Select paragraphs that are direct children of an element with class formula.
.formula p { ...}
.formula > p { ...}
![Page 16: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/16.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
16
Select Elements by Context, cont’d
Example:
Select only the paragraphs that directly follow a sibling paragraph.
.formula p+p { ...}
![Page 17: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/17.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
17
Select Elements by Context, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 18: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/18.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
18
Select Elements by Context, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 19: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/19.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
19
Select Elements by Context, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 20: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/20.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
20
Select the First or Last Child Elements
Example:
Select the first item of a list.
Example:
Select the last item of a list.
li:first-child { ...}
li:last-child { ...}
![Page 21: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/21.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
21
Select the First or Last Child Elements, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 22: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/22.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
22
Select the First Letter or the First Line
Example:
Select the first letter of every paragraph.
Example:
Select the first line of every paragraph.
p:first-letter { ...}
p:first-line { ...}
![Page 23: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/23.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
23
Select the First Letter or the First Line, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 24: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/24.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
24
Select Links Based on State
Link states: not yet visited visited focused via the tab key hovered over by the mouse activated by the visitor
![Page 25: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/25.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
25
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>
<body> <p> An absolute link to the <a href="http://localhost/basics/paragraphs.html"> Paragraphs and Headings </a> page. </p> <p> A relative link to the <a href="tables.html">Tables</a> page. </p></body></html>
![Page 26: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/26.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
26
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;}
Demo
![Page 27: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/27.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
27
Select Elements Based on Attributes
Example:
Select any paragraph that has a class attribute.
p[class] { ...}
![Page 28: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/28.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
28
Select Elements Based on Attributes, cont’d
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 29: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/29.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
29
Select Elements Based on Attributes, cont’d
Attribute selector options:
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 30: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/30.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
30
Inheritance
An HTML element inherits style properties from its ancestors.
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 31: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/31.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
31
What Can Be Inherited Text
color (except by the a element) direction font font-family font-size font-style font-variant font-weight letter-spacing line-height text-align text-indent text-transform visibility white-space word-spacing
Lists list-style list-style-image list-style-position list-style-type
Tables border-collapse border-spacing caption-side empty-cells
Paged Media (as in printing) orphans page-break-inside widows
Other cursor quotes
![Page 32: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/32.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
32
The Cascade
The cascade principle resolves conflicting style properties for an HTML element.
Specificity The more specific the selector, the stronger the rule. Some selectors from least specific to most specific:
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
![Page 33: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/33.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
33
The Cascade, cont’d
Order Rules that appear later take precedence
over earlier rules.
Importance A style marked as !important overrides
specificity and order. Example:
{ color: purple !important; }
![Page 34: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/34.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
34
Embedded Style Sheet
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Embedded Style Sheet</title> <style> img { border: 4px solid red; } </style></head>
<body> ...</body></html>
Not as clean a separation of content and style.
![Page 35: CS 174: Web Programming September 9 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.site/reader036/viewer/2022062806/5697bf821a28abf838c8605a/html5/thumbnails/35.jpg)
Computer Science Dept.Fall 2015: September 9
CS 174: Web Programming© R. Mak
35
Inline Styles
Example:
Not recommended! Combines content and style. We want to separate content and style!
<p style="color: green; background-color: gray">