css for online journalism
DESCRIPTION
An AW Multimedia Workshop.TRANSCRIPT
AW Multimedia WorkshopCSS for Online Journalism
What is CSS?•Cascading Style Sheets•Adds style to HTML elements•Separates design from content
HTML(content)
CSS(design)
2-minute HTML
•HyperText Mark-up Language•Marks up plain text for web browsers
Before After
Some HTML tagsTag 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:[email protected]">) 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
p {font-family: Courier;font-size: 11px;
}
selectorproperty value
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?
•Divide 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>
#page-container {width: 1024px;
}
HTML CSS
Divvying up the page
•Then, wrap the content in its own div
<body><div id="page-container">
<div id="content"><h1>...</h1><p>...</p></div>
</div></body>
#content {float: left;width: 700px;
}
HTML
CSS
Divvying up the page
•Now add a sidebar
<body><div id="page-container">
<div id="content">...</div>
<div id="sidebar"></div>
#sidebar {float: right;width: 324px;background: brown;
}
HTML
CSS
Divvying up the page
•And a header
<body><div id="page-container">
<div id="header"><h1>My News Site</h1></div>
<div id="content">...</div>
#header {background: gray;height: 60px;
}
#header h1 {color: white;
}
HTML
CSS
TypographyProperty 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>
p.byline {color: gray;
}
HTML
CSS
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
img {border: 1px solid gray;padding: 1px;
}
.img-right {float: right;margin-left: 10px;
}
CSS
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
p.caption {font-size: 10px;
}
CSS
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