�ݺ�ߣ

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

More Related Content

Ch. 3 HTML5, CIS 110 13F