UVA MDST 3073 CSS 2012-09-20


Published on

Published in: Technology, Education
  • 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

UVA MDST 3073 CSS 2012-09-20

  1. 1. Studio 4: CSS Prof. AlvaradoMDST 3703/770320 September 2012
  2. 2. Business• Quizzes due Thursday at midnight – Will extend if the WordPress server goes down again• 90 mins … – But some flexibility – Two hours is the hard limit• Plan to have graded by next week
  3. 3. Responses from Last Studio• “Should I continue to break the divisions down into sentences? What would happen if you broke it down into individual words? If I were to further break it down, how could this be useful for me? What could I do with it?” – See the Charrette Project
  4. 4. Turning words into elements
  5. 5. Responses• How can the word “broken,” with the quotation marks around it, mean anything? Is there somewhere that I can go in and signify what each classification means? Will my signifying what it means change anything about the html document? I feel like I am seeing one side of the process. Is there another side to it? – Classes provide “hooks” that can be used to define styles and behaviors
  6. 6. Responses• In simple recreation exists a form of democratization of information – Remediation as appropriation• I am still confused about what SPAN and DIV actually do – These are just generic structural elements – DIVs are blocks, SPANs are in-line• Where/when do you define what a “chapter- name” actually looks like – In CSS or JavaScript …
  7. 7. Responses• Under content is where the actual tags of paragraph and quote come into play, which also confuses me because I typically think of those aspects as belonging under structure, since they don’t relate to the meaning, or maybe even layout since they help format the page. – Paragraphs and quotes are structure – Content comprises the actual words and letters (the “character data”)
  8. 8. Responses• I feel like I need a crash course in HTML before I can handle the fast pace of this class – It should feel weird at first! – No need to internalize all of HTML – We are learning the logic of markup• I thought we were using HTML on JEdit which is supposed to be non-linear and non- hierarchical, but we have also been using XML which is very hierarchical – Yes, non-linear and hierarchical patterns are mixed up in real life
  9. 9. The Document StackCONTENT (TEXT) ASCII, Unicode, etc. STRUCTURE XMLSTYLE / LAYOUT CSS
  10. 10. STRUCTURE,represented by HTML
  11. 11. LAYOUT, as interpreted byChrome
  12. 12. LAYOUT, with CSS (asinterpreted by Chrome)
  13. 13. CSS• Stands for “Cascading Style Sheets”• Allows you to add styles to HTML – and XML in general – Browsers know how to apply CSS styles to documents• “Style” includes things like – Font characteristics – Line characteristics – Background colors and images – Position of things on a page
  14. 14. How does it work?
  15. 15. CSS is language that associates style directives with document elementsA style directive is something like “make the font size 12 points”To do this, CSS needs an efficient way to describe document elements
  16. 16. The DOM• The elements in a document marked up in HTML are stored in a a tree called the DOM – Document Object Model• The browser can do this because HTML follows the OHCO model• CSS uses the DOM to specify elements
  17. 17. In the DOM, every element has an addressthat can be expressed as a string e.g. html/body/h1Think of this as the element‟s ancestry
  18. 18. Let’s look at an example …
  19. 19. <html> <head> <title>I’m an HTML document</title> </head> <body> <h1>Here is the first header</h1> <p>Here is some conent</p> </body></html> Standard HTML Doc
  20. 20. <html> <head> <title>I’m an HTML document</title> </head> <body> <h1>Here is the first header</h1> <p>Here is some content:</p> <div> Here is some special content that I want to make bigger. </div> </body></html> Standard HTM
  21. 21. <html> <head> <title>I’m an HTML document</title> </head> <body> <h1>Here is the first header</h1> <p>Here is some content:</p> <h1> Here is some special content that I want to make bigger. </h1> </body></html> What not to do!
  22. 22. <html> <head> <title>I’m an HTML document</title> </head> <body> <h1>Here is the first header</h1> <p>Here is some conent</p> <div style=“font-size:14pt;"> Here is some special content that I want to make bigger. </div> </body></html> Instead, use CSS
  23. 23. <title>I’m an HTML document</title> <style type="text/css"> div { font-size:14pt;  Better yet, font-weight:bold; } put CSS here </style></head><body> <h1>Here is the first header</h1> <p>Here is some conent</p> <div> Here is some special content that Iwant to make bigger. </div>
  24. 24. <title>I’m an HTML document</title> <style type="text/css"> .foo { font-size:14pt; font-weight:bold; Or using a } class attribute </style></head><body> <h1>Here is the first header</h1> <p>Here is some conent</p> <div class=“foo”> Here is some special content that Iwant to make bigger. </div>
  25. 25. <html> <head> <title>I’m an HTML document</title> <link rel=“stylesheet” type=“text/css” href=“default.css” /> </head> <body> Even better: CSS in linked file <h1>Here is the first header</h1> <p>Here is some conent</p> <div> Here is some special content that I want to make bigger. </div> </body></html>
  26. 26. default.css.foo { font-size:14pt; font-weight:bold;} This is what the content of the default.css file would look like.
  27. 27. CSS Syntax: Selectors.foo { font-size:14pt; font-weight:bold;} The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID. This uses the DOM.
  28. 28. CSS Syntax: Selectors Here the selector#foo { finds an element with font-size:14pt; an ID attribute with the value “foo” … font-weight:bold;}e.g. <div id=“foo”>Hey.</div>
  29. 29. Example selectorsp Any p elementp.foo Any p element with a class of foo.foo Any element with a class of foo#foo The element with an id of foo
  30. 30. CSS Selectors and the DOMX Y is descendant of X Elements of type X X>Y#X Y is child Element with ID X X+Y.X Y follows X Elements of Class X X~Y* Y immediately follows Every elementXY
  31. 31. CSS Selectors and AttributesX[title] href ends with X has title X[data-*="foo"]X[href=“foo”] Attribute matches X has href of „foo‟ X[foo~="bar"]X[href*=”foo"] Attribute among href contains „foo‟ values e.g. attr=“v1 v2 v3”X[href^="http"] href begins with ...X[href$=".jpg”]
  32. 32. CSS Selectors and Pseudo ElementsX:link X:before unclicked anchor X:afterX:visited Before and after the clicked anchor elementX:hover Works with the content property on mouse hover E.g. content:”foo”;X:checked checked input
  33. 33. CSS Selectors: Double Colon• X::first-letter• X::first-line
  34. 34. CSS Syntax: Declarations.foo { font-size:14pt; font-weight:bold;} The “declarations” specify properties and values to apply to the element. Format = property-name: value;
  35. 35. Example Directivesfont-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;
  36. 36. CSS Box Model
  37. 37. Basic Idea• A CSS file is just a series of “rules” that associated styles with elements• A CSS rule has two parts – A selector to identify elements (tag name, class, id) – One or more declarations of style• CSS rules have a simple syntax – Selectors followed by curly braces – Key/value pairs separated by colons – Rules separated by semi-colons
  38. 38. Basic idea• You can apply any number of rules to a document• Rules may appear in attributes, headers, or external files• Rules are “cascaded” – Later ones inherit previous ones – Later ones have precedence (can overwrite) earlier ones
  39. 39. Exercise• Let’s try to format out Persuasion• Go to blog post for today’s studio