CSS For Online Journalism

AW Multimedia Workshop CSS for Online Journalism

What is CSS? ,[object Object],[object Object],[object Object],HTML (content) CSS (design)

2-minute HTML ,[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Styling your HTML ,[object Object],index.html style.css <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

CSS syntax ,[object Object],[object Object],[object Object],selector property value p { font-family: Courier; font-size: 11px; }

Your turn ,[object Object],Selector Property Values a color brown, red, orange, yellow, green, blue, purple, black, gray

What are divs? ,[object Object],[object Object],header content sidebar

Divvying up the page ,[object Object],<body> <div id="page-container"> ... </div> </body> HTML CSS #page-container { width: 1024px; }

Divvying up the page ,[object Object],<body> <div id="page-container"> <div id="content"> <h1>...</h1> <p>...</p> </div> </div> </body> HTML CSS #content { float: left; width: 700px; }

Divvying up the page ,[object Object],<body> <div id="page-container"> <div id="content"> ... </div> <div id="sidebar"> </div> HTML CSS #sidebar { float: right; width: 324px; background: brown; }

Divvying up the page ,[object Object],<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 ,[object Object],[object Object]

What are classes? ,[object Object],[object Object],<p class="byline">By John Smith • February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }

Images ,[object Object],<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 ,[object Object],<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 ,[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

Styling on the fly ,[object Object],<div id="content"> <p style="float:left; width:150px; color:gray;">Style me!</p> </div> HTML

Your turn ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS For Online Journalism

Similar to CSS For Online Journalism (20)

Recently uploaded

Recently uploaded (16)

CSS For Online Journalism