LIS3353 SP12 Week 12


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
  • Specificity determines, which CSS rule is applied by browsers. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.” [Understanding Specificity]Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. [Selector Specificity]Every selector has its specificity. “All rules in your CSS carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.” [Understanding Specificity]If two selectors apply to the same element, the one with higher specificity wins.ORDERBy now you know that styles are simply the rules you create for how various HTML elements should display. The term "cascading" refers to the order of importance the browser should follow when it encounters conflicting style rules. For example, you may have a rule in your external style sheet that specifies the first letter of the first word in each paragraph tag is rendered in bold text. You may have another rule in your embedded styles that specifies that the first letter should be rendered in normal text, but colored red. The browser needs to know which rule to follow, and it's the cascading order that determines that.
  • LIS3353 SP12 Week 12

    1. 1. CSS & XHTMLWeek 12 – March 29, 2012
    2. 2. Agenda IT News – Google Summer of Code 2012! – Fastest Computer – DIGITECH! Course Updates/Due Dates XHTML/CSS Group Presentations: – 2pm section – 2 group presentations (Prezi & – 3pm section –
    3. 3. Course UpdatesDate Topic DueMonday 4/2/12 CSS/XHTML cont; introduction to - A9Tuesday 4/3/12 "best of" GA 2, in class workshop on A8 Part B due CSS/XHTMLThursday 4/5/12 Academic Technologies A8 Part C due (LAST QUIZ)Monday 4/9/12 TBA A9 dueTuesday 4/10/12 Make-up Lab – for A5a, A5b, or A8 (part A)Thursday 4/12/12 No class – prepare for final exam GA#3 due at 10AMMonday 4/16/12 Future options for graduates & - emerging technology – FINAL EXAM REVIEWTuesday 4/17/12 Course Review -Thursday 4/19/12 EXAM #2Friday 4/20/12 @ 12PM NOON ANY OUTSTANDING ITEMS NEED TO After it is posted, you have 24 hours BE TURNED IN TO ME. GRADES to resolve any final issues, or forever WILL BE POSTED TO YOUR GRADE hold your peace. This is specifically CENTER BY 4/25 @ 12PM NOON for SIGNIFICANT grade discrepancies ONLY.
    4. 4. CSS Earlier versions of HTML combined elements of style (fonts, backgrounds, etc.) within the page itself CSS allowed for rules of formatting and presentation to be executed differently. Definition: A set of style rules that tell the web browser how to present a web page or document
    5. 5. CSS Definition – Cascading Style Sheet Rules of specificity and order
    6. 6. CSS - BenefitsThe W3C created CSS to replace HTML tables, fonttags, frames, and other presentational hacks ofHTML elements • Reduction of file size is about 50% less than a Web page built with traditional Web design methods, making it faster! • Easily tweak the design of a thousand-page site with just a few edits to one CSS file • Allows for greater control over the typography and the placement of elements in Web pages
    7. 7. CSS - Benefits CSS – edited same way as HTML By keeping the design in separate files linked to the HTML pages, you reduce the likelihood of your page designs falling apart over time as different contributors add to the Web page You can set a “look” and “feel” for the site and have the content molded to fit that “scheme”!
    10. 10. With CSS WEBPAGE WEBPAGEWEBPAGE WEBPAGE STYLEWEBPAGE WEBPAGE One CSS file can be used to set the style and format for many different Web pages, saving time in editing sites that have a large number of pages.
    11. 11. With CSS (reverse is true) Body Style Font StyleHeader Text StyleStyle WEBPAGEParagraph Link StyleStyle Likewise, a single webpage can be formatted by several different CSS files (either external or embedded). WHY?
    12. 12. With CSS CONTENT STYLE STYLE STYLE mobile browser print
    13. 13. Why CSS?• Separate design/style/layout from content• Separate designers from writers• Quickly change the visual appearance of a Web document (fonts, headings, tables)• Allows for multiple looks for the same HTML code (i.e., a Web browser style sheet vs. a printer style sheet vs. a Smartphone style sheet)
    14. 14. Rules• Consists of a selector and a declaration• Selector – HTML tag the style sheet will change (h1, p, etc.)• Declaration – what the style actually is, and what to do with it• Example: h1 {text-align: center;} p {color: red; font-family: sans-serif;}
    15. 15. Rules• Specificity• Order
    16. 16. Rules Internal/Embedded – Style characteristics are embedded in the HEAD section of the web page; used when a single page requires a unique style sheet External/Linked – Connection made via the link tag; uses optional TYPE attribute to specify a media type (type/css); most common Imported – Allows for using style sheets from other sources; must be included at beginning of the page using the @import statement Inline – Least flexible; requires each element to be tagged within the HTML coding of the page.
    17. 17. 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>
    18. 18. 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>
    19. 19. 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>
    20. 20. 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>
    21. 21. Example
    22. 22. Exampleh1 { font-family: haettenschweiler; color: maroon; font-size: xx-large;}table, tr, td { border-color: olive; font-family: arial;}p{ background-color : yellow; text-align: center;}
    23. 23. Example CSS
    24. 24. Assignment 9 – last one!