Ch. 3 HTML5, CIS 110 13F

WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 3
Key Concepts

Copyright © Terry Felke-Morris

Wednesday, October 23, 13

1

LEARNING OUTCOMES
 Apply inline, embedded (aka internal), external style sheets
 Conﬁgure element, class, id, and contextual selectors
 Use the W3C CSS Validator



2

CASCADING STYLE SHEETS (CSS)
 CSS Demo: http://www.csszengarden.com

 CSS:
 Desktop publishing style sheet technology

for Web Dev

 W3C standard => cross-platform



3

CSS
ADVANTAGES

Separates style (CSS) from structure

(HTML)

Styles can be stored in a separate ﬁle

=> Easier site maintenance



4

TYPES OF CASCADING STYLE
SHEETS (1)

External
Embedded (aka Internal)
Inline



5

 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 ﬁle
◦ Connect to web page w/link element in head section



6

CSS SYNTAX
 Style sheets are composed of Style Rules
 Style Rule: Selector & Declaration



7

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; }



8

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



9

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


10

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



11

INLINE CSS
 Inline CSS
 Style Attribute
Example:

<h1 style="color:#ff0000">Heading text is red</h1>



14

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>



16

CSS properties for conﬁguring text:
 font-weight
 font-style
 font-size
 font-family



19

THE FONT-FAMILY PROPERTY

p {font-family: Arial, Verdana, “Courier New”, sans-serif;}



21

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



23

USING CSS WITH “CLASS”
Deﬁne 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>



24

USING ID SELECTORS
Deﬁne 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>



25

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’



26

SPAN ELEMENT
Purpose:
style content inline
no empty space above/below a span
inline display, not block display



27

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>



28

EXTERNAL STYLE SHEETS
CSS style rules stored in a .css file
 may contain style rules only
 may not contain any HTML tags



29

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…



30

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>



32

CENTERING PAGE CONTENT
WITH CSS
#container { margin-left: auto;
margin-right: auto;
width:80%; }

Example: services.html



34

THE “CASCADE”



35

W3C CSS VALIDATION
 http://jigsaw.w3.org/css-validator/



36

Ch. 3 Assessment:
Learning Outcomes - Know the following



37

Ch. 3 HTML5, CIS 110 13F

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (16)

Similaire à Ch. 3 HTML5, CIS 110 13F

Similaire à Ch. 3 HTML5, CIS 110 13F (20)

Plus de mh-108

Plus de mh-108 (8)

Dernier

Dernier (20)

Ch. 3 HTML5, CIS 110 13F