CSS For Online Journalism

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= " mailto:jsmith@student.umass.edu " > )
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="stylesheet" type="text/css" href="style.css" /> </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="page-container"> ... </div> </body> HTML CSS #page-container { width: 1024px; }

Then, wrap the content in its own div
<body> <div id="page-container"> <div id="content"> <h1>...</h1> <p>...</p> </div> </div> </body> HTML CSS #content { float: left; width: 700px; }

Now add a sidebar
<body> <div id="page-container"> <div id="content"> ... </div> <div id="sidebar"> </div> HTML CSS #sidebar { float: right; width: 324px; background: brown; }

And a header
<body> <div id="page-container"> <div id="header"> <h1>My News Site</h1> </div> <div id="content"> ... </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="byline">By John Smith • February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }

Images
Add an image and style it
<div id="content"> <h1>...</h1> <p>...</p> <div class="img-right"> <img src="images/photo.jpg" alt="Photo description" /> </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="content"> <div class="img-right"> <img src="images/photo.jpg" alt="Photo description" /> <p class="caption">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="content"> <p style="float:left; width:150px; color:gray;">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="content"> <p="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;">"Nunc aliquet risus sit amet odio."</p> </div> HTML

CSS For Online Journalism

by amherstwire on Feb 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 18

Statistics

CSS For Online Journalism — Presentation Transcript