Your SlideShare is downloading. ×
0
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

INFO3775 Chapter 2 Part 2

124

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
124
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript and CSS in HTML5 Web Development HTML5 Multimedia Developer’s Guide Chapter Two (Part Two)
  • 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. 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 elementsEach selector has 1 or more declarations Declaration consists of a property and a value
  • 5. An Examplep {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>
  • 9. The style.css file/*This is a CSS external file*/p { font-size:2em; font-style:italic; }
  • 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. Playing With IdentifiersType the code in Code Listings 2-7 and 2-8
  • 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. 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. An Important NoteThe # for identifiers and . for classes is usedonly in CSSWhen you set the id or class attribute, youleave off the # or .
  • 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. 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

×