Submit Search
Upload
Ch. 3 HTML5, CIS 110 13F
•
0 likes
•
1,372 views
M
mh-108
Follow
Presentation Slides from Web Dev & Des Foundations, 6ed (Pearson).
Read less
Read more
Technology
Education
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
Wood trusses oklahoma
Wood trusses oklahoma
Dwightbmartin
Koulumentorit
Koulumentorit
PaulaharjuOulu
Makalah batam zae totok
Makalah batam zae totok
Pak Zaenal
Ch. 7 FIT5, CIS 110 13F
Ch. 7 FIT5, CIS 110 13F
mh-108
Theories
Theories
jam3scoles
Paulaharjunkoulun vtk2014
Paulaharjunkoulun vtk2014
PaulaharjuOulu
Sportco rehabilitation
Sportco rehabilitation
Sportcorehab
Ch. 16 Database Case Study: XML/XSLT
Ch. 16 Database Case Study: XML/XSLT
mh-108
Recommended
Wood trusses oklahoma
Wood trusses oklahoma
Dwightbmartin
Koulumentorit
Koulumentorit
PaulaharjuOulu
Makalah batam zae totok
Makalah batam zae totok
Pak Zaenal
Ch. 7 FIT5, CIS 110 13F
Ch. 7 FIT5, CIS 110 13F
mh-108
Theories
Theories
jam3scoles
Paulaharjunkoulun vtk2014
Paulaharjunkoulun vtk2014
PaulaharjuOulu
Sportco rehabilitation
Sportco rehabilitation
Sportcorehab
Ch. 16 Database Case Study: XML/XSLT
Ch. 16 Database Case Study: XML/XSLT
mh-108
Revago20141004 andre - de overtreffende aeonen
Revago20141004 andre - de overtreffende aeonen
missim77
Revago20141004 gerard - gods wijsheid die leidt naar succes
Revago20141004 gerard - gods wijsheid die leidt naar succes
missim77
ATN utk Kedokteran
ATN utk Kedokteran
Pak Zaenal
スマートウォッチってどうなん
スマートウォッチってどうなん
三菱 うにたん
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op wit
missim77
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Shermaine M. Perry, MPA
Shot types
Shot types
jam3scoles
Ch. 10 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
mh-108
Radiografi zae
Radiografi zae
Pak Zaenal
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Yasuyuki SAITO
Civil Rights: Historical View
Civil Rights: Historical View
Shermaine M. Perry, MPA
Digipack 3rd draft
Digipack 3rd draft
jam3scoles
Advertstar Performance based affiliate platform Presentation 2015
Advertstar Performance based affiliate platform Presentation 2015
Сергей Кузьмичев
Avoiding top 5 reasons online videos fail
Avoiding top 5 reasons online videos fail
HuStream Video
Mfv ren ch.4
Mfv ren ch.4
65swiss
Kasvatuskumppanuus
Kasvatuskumppanuus
PaulaharjuOulu
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter3
Chapter3
cpashke
Web Design Chapter3
Web Design Chapter3
cpashke
Css
Css
zayhard99
New Css style
New Css style
BUDNET
More Related Content
Viewers also liked
Revago20141004 andre - de overtreffende aeonen
Revago20141004 andre - de overtreffende aeonen
missim77
Revago20141004 gerard - gods wijsheid die leidt naar succes
Revago20141004 gerard - gods wijsheid die leidt naar succes
missim77
ATN utk Kedokteran
ATN utk Kedokteran
Pak Zaenal
スマートウォッチってどうなん
スマートウォッチってどうなん
三菱 うにたん
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op wit
missim77
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Shermaine M. Perry, MPA
Shot types
Shot types
jam3scoles
Ch. 10 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
mh-108
Radiografi zae
Radiografi zae
Pak Zaenal
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Yasuyuki SAITO
Civil Rights: Historical View
Civil Rights: Historical View
Shermaine M. Perry, MPA
Digipack 3rd draft
Digipack 3rd draft
jam3scoles
Advertstar Performance based affiliate platform Presentation 2015
Advertstar Performance based affiliate platform Presentation 2015
Сергей Кузьмичев
Avoiding top 5 reasons online videos fail
Avoiding top 5 reasons online videos fail
HuStream Video
Mfv ren ch.4
Mfv ren ch.4
65swiss
Kasvatuskumppanuus
Kasvatuskumppanuus
PaulaharjuOulu
Viewers also liked
(16)
Revago20141004 andre - de overtreffende aeonen
Revago20141004 andre - de overtreffende aeonen
Revago20141004 gerard - gods wijsheid die leidt naar succes
Revago20141004 gerard - gods wijsheid die leidt naar succes
ATN utk Kedokteran
ATN utk Kedokteran
スマートウォッチってどうなん
スマートウォッチってどうなん
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op wit
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Shot types
Shot types
Ch. 10 FIT5, CIS 110 13F
Ch. 10 FIT5, CIS 110 13F
Radiografi zae
Radiografi zae
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Jリーグ.jpの舞台裏(20151021 JAWS-UG 京都 #5)
Civil Rights: Historical View
Civil Rights: Historical View
Digipack 3rd draft
Digipack 3rd draft
Advertstar Performance based affiliate platform Presentation 2015
Advertstar Performance based affiliate platform Presentation 2015
Avoiding top 5 reasons online videos fail
Avoiding top 5 reasons online videos fail
Mfv ren ch.4
Mfv ren ch.4
Kasvatuskumppanuus
Kasvatuskumppanuus
Similar to Ch. 3 HTML5, CIS 110 13F
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter3
Chapter3
cpashke
Web Design Chapter3
Web Design Chapter3
cpashke
Css
Css
zayhard99
New Css style
New Css style
BUDNET
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Ch. 2 HTML5, CIS 110 13F
Ch. 2 HTML5, CIS 110 13F
mh-108
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
Chapter3
Chapter3
DeAnna Gossett
Unit iii css and javascript 1
Unit iii css and javascript 1
Jesus Obenita Jr.
Unit 2.1
Unit 2.1
Abhishek Kesharwani
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
Unit 2.1
Unit 2.1
Abhishek Kesharwani
cascading style sheet(css).pptx
cascading style sheet(css).pptx
SuhaibKhan62
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
DSC, html and CSS basics.pptx
DSC, html and CSS basics.pptx
DiffouoFopaEsdras
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
shyamverma305
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
Similar to Ch. 3 HTML5, CIS 110 13F
(20)
Cis145 03 configuring-withcss
Cis145 03 configuring-withcss
Chapter 3 - Web Design
Chapter 3 - Web Design
Chapter3
Chapter3
Web Design Chapter3
Web Design Chapter3
Css
Css
New Css style
New Css style
Chapter 6 - Web Design
Chapter 6 - Web Design
Ch. 2 HTML5, CIS 110 13F
Ch. 2 HTML5, CIS 110 13F
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
Chapter3
Chapter3
Unit iii css and javascript 1
Unit iii css and javascript 1
Unit 2.1
Unit 2.1
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
Unit 2.1
Unit 2.1
cascading style sheet(css).pptx
cascading style sheet(css).pptx
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt and lering in simple
DSC, html and CSS basics.pptx
DSC, html and CSS basics.pptx
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
Chapter 7 - Web Design
Chapter 7 - Web Design
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
More from mh-108
Ch. 17 FIT5, CIS 110 13F
Ch. 17 FIT5, CIS 110 13F
mh-108
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
mh-108
Ch. 4 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
mh-108
Ch. 12 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
mh-108
Ch. 8 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
mh-108
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
mh-108
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
mh-108
FIT5 Ch. 5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
mh-108
More from mh-108
(8)
Ch. 17 FIT5, CIS 110 13F
Ch. 17 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
Ch. 4 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
Ch. 12 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
Ch. 8 FIT5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
FIT5 Ch. 5, CIS 110 13F
Recently uploaded
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Recently uploaded
(20)
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Ch. 3 HTML5, CIS 110 13F
1.
WEB DEVELOPMENT &
DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts Copyright © Terry Felke-Morris Wednesday, October 23, 13 1
2.
LEARNING OUTCOMES Apply
inline, embedded (aka internal), external style sheets Configure element, class, id, and contextual selectors Use the W3C CSS Validator Copyright © Terry Felke-Morris Wednesday, October 23, 13 2
3.
CASCADING STYLE SHEETS
(CSS) CSS Demo: http://www.csszengarden.com CSS: Desktop publishing style sheet technology for Web Dev W3C standard => cross-platform Copyright © Terry Felke-Morris Wednesday, October 23, 13 3
4.
CSS ADVANTAGES Separates style (CSS)
from structure (HTML) Styles can be stored in a separate file => Easier site maintenance Copyright © Terry Felke-Morris Wednesday, October 23, 13 4
5.
TYPES OF CASCADING
STYLE SHEETS (1) External Embedded (aka Internal) Inline Copyright © Terry Felke-Morris Wednesday, October 23, 13 5
6.
Inline Styles CASCADING
STYLE SHEETS ◦ body section ◦ HTML style attribute ◦ applies to one element Embedded/Internal Styles ◦ head section ◦ HTML style element ◦ applies to entire web page External Styles ◦ Separate .css file ◦ Connect to web page w/link element in head section Copyright © Terry Felke-Morris Wednesday, October 23, 13 6
7.
CSS SYNTAX Style
sheets are composed of Style Rules Style Rule: Selector & Declaration Copyright © Terry Felke-Morris Wednesday, October 23, 13 7
8.
CSS Example Web page
w/ blue text, yellow background: body { color: blue; background-color: yellow; } OR use HEX triple color codes (ch. 7-8, FIT5): body { color: #0000FF; background-color: #FFFF00; } Copyright © Terry Felke-Morris Wednesday, October 23, 13 8
9.
COMMON CSS PROPERTIES Table
3.1 Common CSS Properties: ◦ background-color ◦ color ◦ font-family ◦ font-size ◦ font-style ◦ font-weight ◦ line-height ◦ margin ◦ text-align ◦ text-decoration ◦ width Copyright © Terry Felke-Morris Wednesday, October 23, 13 9
10.
USING COLOR ON
WEB PAGES monitors display color as intensities of Red/Green/Blue light RGB values 0 .. 255 Hexadecimal numbers (base 16) are shorthand notation: 0 .. 255 == 00 .. FF Copyright © Terry Felke-Morris Wednesday, October 23, 13 10
11.
HEXADECIMAL COLOR VALUES #
indicates hex digits Hex pairs 00 .. FF Three hex pairs => RGB as HEX TRIPLE #000000 black #FFFFFF white #FF0000 red #00FF00 green #0000FF blue #CCCCCC grey Copyright © Terry Felke-Morris Wednesday, October 23, 13 11
12.
INLINE CSS Inline
CSS Style Attribute Example: <h1 style="color:#ff0000">Heading text is red</h1> Copyright © Terry Felke-Morris Wednesday, October 23, 13 14
13.
CSS EMBEDDED/INTERNAL STYLES
Style element in head section => Internal Style Sheet Rules apply to entire web page <style> body { background-color: #000000; color: #FFFFFF; } </style> Copyright © Terry Felke-Morris Wednesday, October 23, 13 16
14.
CSS properties for
configuring text: font-weight font-style font-size font-family Copyright © Terry Felke-Morris Wednesday, October 23, 13 19
15.
THE FONT-FAMILY PROPERTY p
{font-family: Arial, Verdana, “Courier New”, sans-serif;} Copyright © Terry Felke-Morris Wednesday, October 23, 13 21
16.
CSS SELECTORS simple selector =>
selects html element(s) class selector => selects "class" of elements id selector => selects ONE element on a web page contextual selector (aka descendent) => selects all nested elements Copyright © Terry Felke-Morris Wednesday, October 23, 13 23
17.
USING CSS WITH
“CLASS” Define the class: <style> .new { color: #FF0000; font-style: italic; } </style> Apply the class: <p class=“new”>This is text is red and in italics</p> <h4 class=“new”>More Red Italics</h4> Copyright © Terry Felke-Morris Wednesday, October 23, 13 24
18.
USING ID SELECTORS Define
the id Selector: Web Field Trip: octothorn, octalthorp, octatherp, octothorpe (#) <style> #new { color: #FF0000; font-size:2em; font-style: italic; } </style> Apply the id selector: <p id=“new”>This is text is red, large, and in italics</p> Copyright © Terry Felke-Morris Wednesday, October 23, 13 25
19.
CONTEXTUAL SELECTOR Select element
within context of its container (parent) element. AKA descendent selector example applies only to <style> #footer a { color: green; } </style> links located w/in element tagged id=’footer’ Copyright © Terry Felke-Morris Wednesday, October 23, 13 26
20.
SPAN ELEMENT Purpose: style content
inline no empty space above/below a span inline display, not block display Copyright © Terry Felke-Morris Wednesday, October 23, 13 27
21.
SPAN ELEMENT EXAMPLE <style> .companyname
{ font-weight: bold; font-size: larger; } </style> <p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>. We will work with you to build your Web site.</p> Copyright © Terry Felke-Morris Wednesday, October 23, 13 28
22.
EXTERNAL STYLE SHEETS CSS
style rules stored in a .css file may contain style rules only may not contain any HTML tags Copyright © Terry Felke-Morris Wednesday, October 23, 13 29
23.
EXTERNAL STYLE SHEETS
2 Multiple web pages can associate with the same external style sheet file. site.css body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; } h2 { color: #003366; } .nav { font-size: 16px; font-weight: bold; } index.html clients.html about.html Etc… Copyright © Terry Felke-Morris Wednesday, October 23, 13 30
24.
EXAMPLE External Style Sheet:
color.css body { background-color: #0000FF; color: #FFFFFF; } To link 110/p3/demo.html to 110/css/color.css: <head> <link rel="stylesheet" href="../css/color.css"> </head> Copyright © Terry Felke-Morris Wednesday, October 23, 13 32
25.
CENTERING PAGE CONTENT WITH
CSS #container { margin-left: auto; margin-right: auto; width:80%; } Example: services.html Copyright © Terry Felke-Morris Wednesday, October 23, 13 34
26.
THE “CASCADE” Copyright ©
Terry Felke-Morris Wednesday, October 23, 13 35
27.
W3C CSS VALIDATION
http://jigsaw.w3.org/css-validator/ Copyright © Terry Felke-Morris Wednesday, October 23, 13 36
28.
Ch. 3 Assessment: Learning
Outcomes - Know the following Copyright © Terry Felke-Morris Wednesday, October 23, 13 37
29.
Ch. 3 Assessment: Learning
Outcomes - Know the following Copyright © Terry Felke-Morris Wednesday, October 23, 13 37
Download now