JavaScript and CSS in    HTML5 Web    Development   HTML5 Multimedia Developer’s Guide             Chapter Two            ...
Overview of CSSCascading Style Sheets (CSS) make Webmore manageable and design-friendlyIncorporated into Web page in 3 way...
Why is it Cascading?Priority of how 3 methods of CSS are used cascade   Styling set on a tag overrides style found in   he...
So how does it work?CSS works through system of selectors  Selectors are identifiers that match page  elementsEach selecto...
An Examplep {border-style:solid;}  Paragraph element (p) is selector  border-style:solid is declaration    Gives value sol...
Try this code:<!doctype html><html lang=”en”>   <head>       <title>CSS Example 1</title>   </head>   <body>       <p>I am...
Now this...<!doctype html><html lang=”en”>     <head>         <title>CSS Example 2</title>         <style>              p ...
Let’s look at cascading<!doctype html><html lang=”en”>     <head>         <title>CSS Example 3</title>         <link rel=”...
The style.css file/*This is a CSS external file*/p {   font-size:2em;   font-style:italic;   }
ID SelectorsCSS can be applied to all visible HTMLtagsCan also target specific page areas usingidentifiers  Identifiers ar...
Playing With IdentifiersType the code in Code Listings 2-7 and 2-8
CSS Classes vs. IdentifiersIdentifiers apply CSS to one, unique pageelementClasses used to apply the same CSS tomultiple t...
For Example....articletitle1 {font-size:1.4em;}.spacer1 (height:4px;}Any page element with class of articletitle1has a lar...
An Important NoteThe # for identifiers and . for classes is usedonly in CSSWhen you set the id or class attribute, youleav...
CSS and HTML5 TagsHow does CSS work with the new HTML5tags?  The same way!  The new HTML5 tags are true HTML  tags, so the...
Styling the Audio TagBy default, the audio tag has little visualimpact   Tag plays audio, and is aimed to and for   the ea...
Upcoming SlideShare
Loading in …5
×

INFO3775 Chapter 2 Part 2

240 views
207 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

INFO3775 Chapter 2 Part 2

  1. 1. JavaScript and CSS in HTML5 Web Development HTML5 Multimedia Developer’s Guide Chapter Two (Part Two)
  2. 2. Overview of CSSCascading Style Sheets (CSS) make Webmore manageable and design-friendlyIncorporated 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. 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. 4. So how does it work?CSS works through system of selectors Selectors are identifiers that match page elementsEach selector has 1 or more declarations Declaration consists of a property and a value
  5. 5. An Examplep {border-style:solid;} Paragraph element (p) is selector border-style:solid is declaration Gives value solid to property border-style
  6. 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. 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. 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>
  9. 9. The style.css file/*This is a CSS external file*/p { font-size:2em; font-style:italic; }
  10. 10. ID SelectorsCSS can be applied to all visible HTMLtagsCan also target specific page areas usingidentifiers Identifiers are set using the id attribute of the element. For example: <div id=”header”>
  11. 11. Playing With IdentifiersType the code in Code Listings 2-7 and 2-8
  12. 12. CSS Classes vs. IdentifiersIdentifiers apply CSS to one, unique pageelementClasses used to apply the same CSS tomultiple tagsNote: identifiers (in CSS) start with #.Classes start with a period (.)
  13. 13. For Example....articletitle1 {font-size:1.4em;}.spacer1 (height:4px;}Any page element with class of articletitle1has a large font sizeAny page element with class of spacer1 willbe 4px high
  14. 14. An Important NoteThe # for identifiers and . for classes is usedonly in CSSWhen you set the id or class attribute, youleave off the # or .
  15. 15. CSS and HTML5 TagsHow does CSS work with the new HTML5tags? The same way! The new HTML5 tags are true HTML tags, so they’re treated the same as any other HTML tags.
  16. 16. Styling the Audio TagBy default, the audio tag has little visualimpact Tag plays audio, and is aimed to and for the ears, not the eyesSince it’s a native HTML5 tag, we can styleitCode Listing 2-10

×