LIS3353 SP12 Week 13


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Internal/Embedded Style characteristics are embedded in the HEAD section of the Web page; used when a single page requires a unique style sheetExternal/Linked Connection made via the LINK tag; use the optional TYPE attribute to specify a media type (type/css); most commonImportedAllows for using style sheets from other sources; must be included at the beginning of the style sheet using the @import statementInlineLeast flexible; requires each element to be tagged if you want it to appear differently; loses the advantage of using CSSSimilar to the old HTML style of coding each section
  • CascadingDetermining rule weight by specificityRules with more specific selectors take precedence over rules with less specific selectorsDetermining rule weight by orderBased on order of rule within style sheetThose listed later take precedence over those listed earlier in the style sheetInheritanceBased on hierarchical structure of documentsCSS rules inherit by child elements from parent elements:Thus <LI> elements will inherit style rules from <UL> elements, unless a style rule is specifically set for the <LI> element
  • LIS3353 SP12 Week 13

    1. 1. CSS Part IILIS 3353 – Monday 4/2/12
    2. 2. Agenda IT News – E-paper Grading Updates – All are complete, I just need to upload to Blackboard – Ill post a zip file of a sample spreadsheet and explanations of grading rubrics for the group assignments Office hours Wednesday – from 2-3 instead of 10-12 CSS – review and continuation
    3. 3. CSS - Review Cascading Style Sheet Separates CONTENT from DESIGN More efficient use of time and resources Selectors (the tag) Declarations (the design) 4 rules for applying CSS to page
    4. 4. CSS – Internal/Embedded Style information is embedded into the HEAD element of page All formatting in one location, vs. each individual element/tag on the page needing its own stylistic information attached Good for small sites/pages <head> <style type="text/css"> hr {color: red;} body {margin-left: 20px;} </style> </head>
    5. 5. CSS – External Style information is external to the webpage Code shows syntax for linking the webpage to an external CSS This page below will draw CSS/formatting information frm the yourstyle.css document. <head> <link rel="stylesheet" type="text/css" href="yourstyle.css" /> </head>
    6. 6. CSS – Import This statement may be used in a CSS file or inside the STYLE element. You can combine importing with other methods All @import statements must occur at the start of the style sheet Any rules specified in the style sheets themselves override conflicting rules in the imported style sheets You can use as many style sheet files as you wish and override them with embedded styles<style type="text/css"> <!— @import url(pagestyle.css); -> </style>
    7. 7. CSS – Inline Least flexible requires each element to be tagged within the HTML coding of the page.<p style="color:sienna;margin-left:20px">Thisis a paragraph.</p>
    8. 8. CSS Multiple Sheets Use multiple sheets to dictate formatting of a page If there are conflicts, the INTERNAL sheet takes precedence BE CAREFUL! Dont have conflicts!
    9. 9. CSS – Multiple Sheets EXTERNAL CSS (from @import or link href) h3 {color: red; text-align: right; font-size: 8pt} INTERNAL CSS h3 {text-align: center; font-size: 20pt} Result?
    10. 10. Index card! Name FSUID What is the result of the CSS question?
    11. 11. CSS – Multiple Sheets EXTERNAL CSS (from @import or link href) h3 {color: red; text-align: right; font-size: 8pt} INTERNAL CSS h3 {text-align: center; font-size: 20pt} Result? h3 {color: red; text-align: center; font-size: 20pt}
    12. 12. CSS – Multiple Sheets Authors Users Browsers style style style sheet sheet sheet Greatest weight Least weight
    13. 13. CSS Basics Three parts – Selector (HTML tag you want to define) – Declaration (the style, consisting of: • Property (attribute of selector) • Value (markup value for that attribute)body {color: black;}p {font-family: "sans serif";}p {text-align: left; color: red;}h1, h2, h3, h4, h5, h6 {color: yellow;}
    14. 14. The class selector In CSS file: – p.right {text-align: right; } – p.left {text-align: left; } – {text-align: center; } In HTML page: <p class="left"> YOUR TEXT HERE Aligned LEFT</p> <p class="right"> YOUR TEXT HERE Aligned RIGHT</p> <p class="center"> YOUR TEXT HERE ALIGNED CENTER</p> <p class="right" class=“center”> ????</p>
    15. 15. The class selector You can create a class selector free of tag names if you want all tags to be formatted the same .center {text-align: center;} Any tag with the "center" class will be aligned center Can omit element name for selector if you wan tall elements with that same selector to have same formatting <h1 class=“center”> <h1 class=“center”> <p class=“center”> <p class=“center”> { text-align: center } .center { text-align: center } { text-align: center }
    16. 16. The ID selector ID selector applies to one unique element ONLY p#para1 {text-align: center; color: green} ID selector here is named "para1" "para1" is selector for the <p> element and defines alignment & color properties for anything with this ID
    17. 17. The ID Selector p#para1 { text-align: center; color: green } <p id=“para1”> This text would be centered and green </p>
    18. 18. The DIV Selector<DIV> - can be used with class attributes to createcustomized block-level elements Create formatted sections Acts like a <p> tag Declare it in the style rule: div.introduction {font-size: 14pt; margin: 24 pt;} Apply style rule in the document: <div class="introduction">This is the introduction to the new document</div>
    19. 19. The SPAN selectorUse <SPAN> with CLASS attribute to createcustomized inline elements: Declare it in style rule: SPAN.logo {color: white; background-color: black;} Apply the rule in the document <p>Welcome to the <span class="logo">Wonder Software</span> Website</p>
    20. 20. CSS – What you can changeBACKGROUND: FONT – background – font-style – background-color – font-variant – background-image – font-weight – background-repeat – font-size/line-height – background-attachment – font-family – background-position PROPERTIESTEXT: – margin – color – margin-top – direction – margin-left – text-align – margin-right; – text-indent – margin-bottom
    21. 21. CSS – Multiple Style Sheets Cascading – SPECIFICITY • Dating: I like flowers unless I tell you I like specific flowers – ORDER: • Relationships: Forget what I said before, its what Im saying now that matters Inheritance – HIERARCHY: • Children: If you had green eyes and red hair, and your SO had green eyes and red hair, your kids SHOULD have green eyes/red hair too!
    22. 22. CSS Links and Resources Resources Examples s_color
    23. 23. QUESTIONS?