Your SlideShare is downloading. ×
UVA MDST 3073 CSS 2012-09-20
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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Studio 4: CSS Prof. AlvaradoMDST 3703/770320 September 2012
  • 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. 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. Turning words into elements
  • 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. 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. 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. 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. The Document StackCONTENT (TEXT) ASCII, Unicode, etc. STRUCTURE XMLSTYLE / LAYOUT CSS
  • 10. STRUCTURE,represented by HTML
  • 11. LAYOUT, as interpreted byChrome
  • 12. LAYOUT, with CSS (asinterpreted by Chrome)
  • 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. How does it work?
  • 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. 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. 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. Let’s look at an example …
  • 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. <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. <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. <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. <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. <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. <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. { font-size:14pt; font-weight:bold;} This is what the content of the default.css file would look like.
  • 27. CSS Syntax: { 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. 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. Example selectorsp Any p Any p element with a class of Any element with a class of foo#foo The element with an id of foo
  • 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. 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. 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. CSS Selectors: Double Colon• X::first-letter• X::first-line
  • 34. CSS Syntax: { font-size:14pt; font-weight:bold;} The “declarations” specify properties and values to apply to the element. Format = property-name: value;
  • 35. Example Directivesfont-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;
  • 36. CSS Box Model
  • 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. 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. Exercise• Let’s try to format out Persuasion• Go to blog post for today’s studio