SlideShare a Scribd company logo

CSS For Online Journalism

•Download as PPT, PDF•
•
A
amherstwire

This document provides an introduction to CSS (Cascading Style Sheets) and how to use CSS to style HTML elements and lay out web pages. It covers basic HTML tags, linking an external CSS stylesheet, using selectors and properties to style elements, adding divs to structure content sections, and other CSS techniques like typography, images, and white space. Examples are given throughout and the reader is prompted to practice these skills by adding CSS to their own HTML code.

1 of 23
AW Multimedia Workshop CSS for Online Journalism
What is CSS? C ascading S tyle S heets Adds style to HTML elements Separates design from content HTML (content) CSS (design)
2-minute HTML H yper Te xt M ark-up L anguage Marks up plain text for web browsers Before After
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” />
Your turn Mark up the text in your index.html file Turn “CSS for online journalism” into a heading Add paragraph tags to each paragraph Italicize the last line Turn the e-mail address into a link (use the following tag: <a href= &quot; mailto:jsmith@student.umass.edu &quot; > ) Remember to close each tag you open
Styling your HTML Create a CSS file and link to it index.html style.css <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head>
CSS syntax Selector: the HTML tag to be styled Property: the attribute you want to change Value: the style of the attribute selector property value p { font-family: Courier; font-size: 11px; }
Your turn Change the color of the <a> tag by adding a definition to the style sheet Selector Property Values a color brown, red, orange, yellow, green, blue, purple, black, gray
What are divs? Div ide a page into sections Used to design the layout of a page header content sidebar
Divvying up the page First, create a page-container div <body> <div id=&quot;page-container&quot;> ... </div> </body> HTML CSS #page-container { width: 1024px; }
Divvying up the page Then, wrap the content in its own div <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; }
Divvying up the page Now add a sidebar <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; }
Divvying up the page And a header <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; }
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
Your turn Change the header’s h1 element to all uppercase Change the p element to size 12px Arial
What are classes? Let you style the same element in different ways Defined in the style sheet with a . instead of # <p class=&quot;byline&quot;>By John Smith &bull; February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }
Images Add an image and style it <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; }
Image captions Add a caption class and style it <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; }
White space Breathing room for content enhances readability Three ways to add white space: 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%
Your turn Increase the spacing between lines Add padding to the left of the content div to move it away from the edge Add padding to the top and left of the header text to move it away from the edge Add a margin to the left of the image to create space between image and text
Styling on the fly In-line styles override external style sheets <div id=&quot;content&quot;> <p style=&quot;float:left; width:150px; color:gray;&quot;>Style me!</p> </div> HTML
Your turn Style a pull-quote on the fly using the following properties: Float to the left 10px right margin, 10px padding 150px width Text aligned in the center 16px italicized Georgia font Gray font color 1px solid gray border top and bottom
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

More Related Content

CSS For Online Journalism

  • 1. AW Multimedia Workshop CSS for Online Journalism
  • 2. What is CSS? C ascading S tyle S heets Adds style to HTML elements Separates design from content HTML (content) CSS (design)
  • 3. 2-minute HTML H yper Te xt M ark-up L anguage Marks up plain text for web browsers Before After
  • 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. Your turn Mark up the text in your index.html file Turn “CSS for online journalism” into a heading Add paragraph tags to each paragraph Italicize the last line Turn the e-mail address into a link (use the following tag: <a href= &quot; mailto:jsmith@student.umass.edu &quot; > ) Remember to close each tag you open
  • 6. Styling your HTML Create a CSS file and link to it index.html style.css <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head>
  • 7. CSS syntax Selector: the HTML tag to be styled Property: the attribute you want to change Value: the style of the attribute selector property value p { font-family: Courier; font-size: 11px; }
  • 8. Your turn Change the color of the <a> tag by adding a definition to the style sheet Selector Property Values a color brown, red, orange, yellow, green, blue, purple, black, gray
  • 9. What are divs? Div ide a page into sections Used to design the layout of a page header content sidebar
  • 10. Divvying up the page First, create a page-container div <body> <div id=&quot;page-container&quot;> ... </div> </body> HTML CSS #page-container { width: 1024px; }
  • 11. Divvying up the page Then, wrap the content in its own div <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. Divvying up the page Now add a sidebar <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. Divvying up the page And a header <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. 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. Your turn Change the header’s h1 element to all uppercase Change the p element to size 12px Arial
  • 16. What are classes? Let you style the same element in different ways Defined in the style sheet with a . instead of # <p class=&quot;byline&quot;>By John Smith &bull; February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }
  • 17. Images Add an image and style it <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. Image captions Add a caption class and style it <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. White space Breathing room for content enhances readability Three ways to add white space: 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. Your turn Increase the spacing between lines Add padding to the left of the content div to move it away from the edge Add padding to the top and left of the header text to move it away from the edge Add a margin to the left of the image to create space between image and text
  • 21. Styling on the fly In-line styles override external style sheets <div id=&quot;content&quot;> <p style=&quot;float:left; width:150px; color:gray;&quot;>Style me!</p> </div> HTML
  • 22. Your turn Style a pull-quote on the fly using the following properties: Float to the left 10px right margin, 10px padding 150px width Text aligned in the center 16px italicized Georgia font Gray font color 1px solid gray border top and bottom
  • 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