info3775 chapter 2 part 2
TRANSCRIPT
JavaScript and CSS in HTML5 Web Development
HTML5 Multimedia Developer’s GuideChapter Two(Part Two)
Overview of CSSCascading 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><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>
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>
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