AW CSS Workshop 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

AW CSS Workshop for Online Journalism

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à AW CSS Workshop for Online Journalism

Similaire à AW CSS Workshop for Online Journalism (20)

Dernier

Dernier (20)

AW CSS Workshop for Online Journalism