ch. 3 html5, cis 110 13f

Copyright © Terry Felke-Morris

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

Chapter 3Key Concepts

1Copyright © Terry Felke-MorrisWednesday, October 23, 13


LEARNING OUTCOMES

Apply inline, embedded (aka internal), external style sheets

Configure element, class, id, and contextual selectors

Use the W3C CSS Validator

2

Wednesday, October 23, 13


CASCADING STYLE SHEETS (CSS)

CSS Demo: http://www.csszengarden.com

CSS:

Desktop publishing style sheet technology for Web Dev

W3C standard => cross-platform

3


http://www.csszengarden.com/

http://www.csszengarden.com/


CSS ADVANTAGES

Separates style (CSS) from structure (HTML)

Styles can be stored in a separate file => Easier site maintenance

4



TYPES OF CASCADING STYLE SHEETS (1)

ExternalEmbedded (aka Internal)Inline

5



CASCADING STYLE SHEETS Inline Styles◦ 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

6



CSS SYNTAX

Style sheets are composed of Style Rules

Style Rule: Selector & Declaration

7



CSS ExampleWeb 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



COMMONCSS 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 PAGESmonitors 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

16

<style>body { background-color: #000000; color: #FFFFFF;}</style>



CSS properties for configuring 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 SELECTORSsimple selector

=> selects html element(s)class selector

=> selects "class" of elementsid selector

=> selects ONE element on a web page contextual selector (aka descendent)

=> selects all nested elements

23



USING CSS WITH “CLASS”Define the class:

Apply the class:

<p class=“new”>This is text is red and in italics</p>

<h4 class=“new”>More Red Italics</h4>

24

<style>.new { color: #FF0000; font-style: italic; }</style>



USING ID SELECTORS

Define the id Selector:

Web Field Trip:octothorn, octalthorp, octatherp, octothorpe (#)

Apply the id selector:<p id=“new”>This is text is red, large, and in italics</p>

25

<style>#new { color: #FF0000; font-size:2em; font-style: italic; }</style>


http://www.worldwidewords.org/weirdwords/ww-oct1.htm

http://www.worldwidewords.org/weirdwords/ww-oct1.htm


CONTEXTUAL SELECTORSelect element within context of its

container (parent) element.

AKA descendent selector

example applies only tolinks located w/in element taggedid=’footer’

26

<style>#footer a { color: green; }</style>



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



body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }

EXTERNAL STYLE SHEETS - 2

Multiple web pages can associate with the same external style sheet file.

30

site.cssindex.html

clients.html

about.html

Etc…



EXAMPLE

To link 110/p3/demo.html to 110/css/color.css:

<head><link rel="stylesheet" href="../css/color.css"></head>

body { background-color: #0000FF; color: #FFFFFF;}

External Style Sheet: color.css

32



CENTERING PAGE CONTENT WITH CSS#container { margin-left: auto;

margin-right: auto; width:80%; }

34

Example: services.html


http://www.cs.uoregon.edu/Classes/13F/cis110/code/HTML5-Stu-Files/hands-on-practice/chapter3/3.8/services.html

http://www.cs.uoregon.edu/Classes/13F/cis110/code/HTML5-Stu-Files/hands-on-practice/chapter3/3.8/services.html


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

Technology

css syntax style sheets

style rules style rule

style content

css file

example external style

ff color

external style sheet

ff backgroundcolor