CSS For Online Journalism


Published on

An AW Multimedia Workshop.

Published in: Design
  • 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

CSS For Online Journalism

  1. 1. AW Multimedia Workshop CSS for Online Journalism
  2. 2. What is CSS? <ul><li>C ascading S tyle S heets </li></ul><ul><li>Adds style to HTML elements </li></ul><ul><li>Separates design from content </li></ul>HTML (content) CSS (design)
  3. 3. 2-minute HTML <ul><li>H yper Te xt M ark-up L anguage </li></ul><ul><li>Marks up plain text for web browsers </li></ul>Before After
  4. 4. Some HTML tags Tag Function Usage Output <p> Paragraphs <p>Sample text…</p> <p>Next paragraph.</p> Sample text… Next paragraph. <h1> Heading <h1>A headline</h1> A headline <strong> Bold <strong>Be bold</strong> Be bold <em> Italics <em>For emphasis</em> For emphasis <a> Hyperlink <a href=“link.html”>Click here</a> Click here <img /> Image <img src=“photo.jpg” alt=“Photo description” />
  5. 5. Your turn <ul><li>Mark up the text in your index.html file </li></ul><ul><ul><ul><li>Turn “CSS for online journalism” into a heading </li></ul></ul></ul><ul><ul><ul><li>Add paragraph tags to each paragraph </li></ul></ul></ul><ul><ul><ul><li>Italicize the last line </li></ul></ul></ul><ul><ul><ul><li>Turn the e-mail address into a link (use the following tag: <a href= &quot; mailto:jsmith@student.umass.edu &quot; > ) </li></ul></ul></ul><ul><ul><ul><li>Remember to close each tag you open </li></ul></ul></ul>
  6. 6. Styling your HTML <ul><li>Create a CSS file and link to it </li></ul>index.html style.css <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head>
  7. 7. CSS syntax <ul><li>Selector: the HTML tag to be styled </li></ul><ul><li>Property: the attribute you want to change </li></ul><ul><li>Value: the style of the attribute </li></ul>selector property value p { font-family: Courier; font-size: 11px; }
  8. 8. Your turn <ul><li>Change the color of the <a> tag by adding a definition to the style sheet </li></ul>Selector Property Values a color brown, red, orange, yellow, green, blue, purple, black, gray
  9. 9. What are divs? <ul><li>Div ide a page into sections </li></ul><ul><li>Used to design the layout of a page </li></ul>header content sidebar
  10. 10. Divvying up the page <ul><li>First, create a page-container div </li></ul><body> <div id=&quot;page-container&quot;> ... </div> </body> HTML CSS #page-container { width: 1024px; }
  11. 11. Divvying up the page <ul><li>Then, wrap the content in its own div </li></ul><body> <div id=&quot;page-container&quot;> <div id=&quot;content&quot;> <h1>...</h1> <p>...</p> </div> </div> </body> HTML CSS #content { float: left; width: 700px; }
  12. 12. Divvying up the page <ul><li>Now add a sidebar </li></ul><body> <div id=&quot;page-container&quot;> <div id=&quot;content&quot;> ... </div> <div id=&quot;sidebar&quot;> </div> HTML CSS #sidebar { float: right; width: 324px; background: brown; }
  13. 13. Divvying up the page <ul><li>And a header </li></ul><body> <div id=&quot;page-container&quot;> <div id=&quot;header&quot;> <h1>My News Site</h1> </div> <div id=&quot;content&quot;> ... </div> HTML CSS #header { background: gray; height: 60px; } #header h1 { color: white; }
  14. 14. Typography Property Description Values font-family A prioritized list of font families family-name, generic-family font-size Sets the size of the font 8px, 10px, 12px, 14px, etc. font-style Sets the style of the font normal, italic, oblique font-weight Sets the weight of the font normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-variant Displays text in a small-caps font or a normal font normal, small-caps text-transform Displays text in all caps, no caps, or first letter capitalized none, capitalize, uppercase, lowercase text-align Aligns left, right, or center left, right, center color Sets the color of the font red, blue, black, etc. or Hex code
  15. 15. Your turn <ul><li>Change the header’s h1 element to all uppercase </li></ul><ul><li>Change the p element to size 12px Arial </li></ul>
  16. 16. What are classes? <ul><li>Let you style the same element in different ways </li></ul><ul><li>Defined in the style sheet with a . instead of # </li></ul><p class=&quot;byline&quot;>By John Smith &bull; February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }
  17. 17. Images <ul><li>Add an image and style it </li></ul><div id=&quot;content&quot;> <h1>...</h1> <p>...</p> <div class=&quot;img-right&quot;> <img src=&quot;images/photo.jpg&quot; alt=&quot;Photo description&quot; /> </div> <p>...</p> </div> HTML CSS img { border: 1px solid gray; padding: 1px; } .img-right { float: right; margin-left: 10px; }
  18. 18. Image captions <ul><li>Add a caption class and style it </li></ul><div id=&quot;content&quot;> <div class=&quot;img-right&quot;> <img src=&quot;images/photo.jpg&quot; alt=&quot;Photo description&quot; /> <p class=&quot;caption&quot;>This is a caption.</p> </div> <p>...</p> </div> HTML CSS p.caption { font-size: 10px; }
  19. 19. White space <ul><li>Breathing room for content enhances readability </li></ul><ul><li>Three ways to add white space: </li></ul>Property Description Sample Values line-height Sets the distance between lines. 1.4em, 14pt, 140% padding Defines the space between the element border and the element content (interior). 10px, 10% margin Defines the space around the elements (exterior). 10px, 10%
  20. 20. Your turn <ul><li>Increase the spacing between lines </li></ul><ul><li>Add padding to the left of the content div to move it away from the edge </li></ul><ul><li>Add padding to the top and left of the header text to move it away from the edge </li></ul><ul><li>Add a margin to the left of the image to create space between image and text </li></ul>
  21. 21. Styling on the fly <ul><li>In-line styles override external style sheets </li></ul><div id=&quot;content&quot;> <p style=&quot;float:left; width:150px; color:gray;&quot;>Style me!</p> </div> HTML
  22. 22. Your turn <ul><li>Style a pull-quote on the fly using the following properties: </li></ul><ul><ul><ul><li>Float to the left </li></ul></ul></ul><ul><ul><ul><li>10px right margin, 10px padding </li></ul></ul></ul><ul><ul><ul><li>150px width </li></ul></ul></ul><ul><ul><ul><li>Text aligned in the center </li></ul></ul></ul><ul><ul><ul><li>16px italicized Georgia font </li></ul></ul></ul><ul><ul><ul><li>Gray font color </li></ul></ul></ul><ul><ul><ul><li>1px solid gray border top and bottom </li></ul></ul></ul>
  23. 23. Solution: Pull quote <div id=&quot;content&quot;> <p=&quot;float:left; margin-right:10px; width:150px; text-align:center; font-style:italic; font-family:Georgia; font-size:16px; color:gray; border-top:1px solid gray; border-bottom:1px solid gray; padding:10px;&quot;>&quot;Nunc aliquet risus sit amet odio.&quot;</p> </div> HTML