INFO3775 Chapter 2 Part 2

JavaScript and CSS in
HTML5 Web
Development
HTML5 Multimedia Developer’s Guide
Chapter Two
(Part Two)

Overview of CSS
Cascading Style Sheets (CSS) make Web
more manageable and design-friendly
Incorporated into Web page in 3 ways:
From external CSS file
From block of style instructions in
<head>
In-line as attribute of HTML tag

Why is it Cascading?
Priority of how 3 methods of CSS are used cascade
Styling set on a tag overrides style found in
head
Styling found in head overrides style from
external CSS file
BUT: if CSS file is linked after styling in head,
external file overrides styling found in head

So how does it work?
CSS works through system of selectors
Selectors are identifiers that match page
elements
Each selector has 1 or more declarations
Declaration consists of a property and a
value

An Example

p {border-style:solid;}
Paragraph element (p) is selector
border-style:solid is declaration
Gives value solid to property
border-style

Try this code:
<!doctype html>
<html lang=”en”>
<head>
<title>CSS Example 1</title>
</head>
<body>
<p>I am text within a paragraph tag</p>
I am another paragraph, but I do not sit in a
paragraph tag. Therefore, I am not affected by
CSS applied to paragraph tags.
<p>I am another paragraph. My border is kinda
neat, don’t ya think?</p>
</body>
</html>

Now this...
<!doctype html>
<head>
<style>
p {border-style:solid;
padding:10px;
width:500px;}
</style>
</head>
<body>
I am another paragraph, but I do not sit in a paragraph tag.
Therefore, I am not affected by CSS applied to paragraph tags.
<p>I am another paragraph. My border is kinda neat, don’t ya
think?</p>
</body>
</html>

Let’s look at cascading
<!doctype html>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<style>
p {border-style:solid;padding:10px;width:500px;}
</style>
</head>
<body>
I am another paragraph, but I do not sit in a paragraph tag.
Therefore, I am not affected by CSS applied to paragraph tags.
<p style=”font-style:normal;”>I am another paragraph. My border is
kinda neat, don’t ya think?</p>
<p style=”border-style:none;font-size:1em”>I am a paragraph, but
(sigh) no border and small text</p>
</body>
</html>

The style.css file

/*
This is a CSS external file
*/
p {
font-size:2em;
font-style:italic;
}

ID Selectors
CSS can be applied to all visible HTML
tags
Can also target specific page areas using
identifiers
Identifiers are set using the id attribute of
the element. For example:
<div id=”header”>

Playing With Identifiers

Type the code in Code Listings 2-7 and 2-8

CSS Classes vs. Identifiers

Identifiers apply CSS to one, unique page
element
Classes used to apply the same CSS to
multiple tags
Note: identifiers (in CSS) start with #.
Classes start with a period (.)

For Example...
.articletitle1 {font-
size:1.4em;}
.spacer1 (height:4px;}
Any page element with class of articletitle1
has a large font size
Any page element with class of spacer1 will
be 4px high

An Important Note

The # for identifiers and . for classes is used
only in CSS
When you set the id or class attribute, you
leave off the # or .

CSS and HTML5 Tags

How does CSS work with the new HTML5
tags?
The same way!
The new HTML5 tags are true HTML
tags, so they’re treated the same as any
other HTML tags.

Styling the Audio Tag
By default, the audio tag has little visual
impact
Tag plays audio, and is aimed to and for
the ears, not the eyes
Since it’s a native HTML5 tag, we can style
it
Code Listing 2-10

INFO3775 Chapter 2 Part 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie INFO3775 Chapter 2 Part 2

Ähnlich wie INFO3775 Chapter 2 Part 2 (20)

Mehr von Jeff Byrnes

Mehr von Jeff Byrnes (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

INFO3775 Chapter 2 Part 2