Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
INFO3775 Chapter 2 Part 2
1. JavaScript and CSS in
HTML5 Web
Development
HTML5 Multimedia Developer’s Guide
Chapter Two
(Part Two)
2. 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
3. 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
4. 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
5. An Example
p {border-style:solid;}
Paragraph element (p) is selector
border-style:solid is declaration
Gives value solid to property
border-style
6. 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>
7. Now this...
<!doctype html>
<html lang=”en”>
<head>
<title>CSS Example 2</title>
<style>
p {border-style:solid;
padding:10px;
width:500px;}
</style>
</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>
8. Let’s look at cascading
<!doctype html>
<html lang=”en”>
<head>
<title>CSS Example 3</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<style>
p {border-style:solid;padding:10px;width:500px;}
</style>
</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 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>
10. 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”>
12. 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 (.)
14. 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 .
15. 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.
16. 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
