SlideShare a Scribd company logo
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=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </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=&quot;page-container&quot;> ... </div> </body> HTML CSS #page-container { width: 1024px; }
Divvying up the page ,[object Object],<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 ,[object Object],<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 ,[object Object],<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 ,[object Object],[object Object]
What are classes? ,[object Object],[object Object],<p class=&quot;byline&quot;>By John Smith &bull; February 20, 2009</p> <p>...</p> HTML CSS p.byline { color: gray; }
Images ,[object Object],<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 ,[object Object],<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 ,[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=&quot;content&quot;> <p style=&quot;float:left; width:150px; color:gray;&quot;>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=&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

What's hot

Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
Boris Paillard
 
Html tutorials
Html tutorialsHtml tutorials
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Html
HtmlHtml
Le Wagon - Build your Landing Page in 2 hours
Le Wagon - Build your Landing Page in 2 hoursLe Wagon - Build your Landing Page in 2 hours
Le Wagon - Build your Landing Page in 2 hours
Sandrine Ayral
 
Html formatting
Html formattingHtml formatting
Html formatting
Webtech Learning
 
Le Wagon Tokyo - 2 hours landing page
Le Wagon Tokyo - 2 hours  landing pageLe Wagon Tokyo - 2 hours  landing page
Le Wagon Tokyo - 2 hours landing page
Hidehiro Nagaoka
 
Html
HtmlHtml
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
CK Yang
 
Handout1 intro to html
Handout1 intro to htmlHandout1 intro to html
Handout1 intro to html
Nadine Guevarra
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
derekoei
 
Html 5
Html 5Html 5
Html Css Mistakes
Html Css MistakesHtml Css Mistakes
Html Css Mistakes
Tasawr Interactive
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
Prabu html
Prabu htmlPrabu html
Prabu html
Prabu Cse
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
Michael Gwyther
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
tutorialsruby
 
CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
hstryk
 

What's hot (20)

Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html
HtmlHtml
Html
 
Le Wagon - Build your Landing Page in 2 hours
Le Wagon - Build your Landing Page in 2 hoursLe Wagon - Build your Landing Page in 2 hours
Le Wagon - Build your Landing Page in 2 hours
 
Html formatting
Html formattingHtml formatting
Html formatting
 
Le Wagon Tokyo - 2 hours landing page
Le Wagon Tokyo - 2 hours  landing pageLe Wagon Tokyo - 2 hours  landing page
Le Wagon Tokyo - 2 hours landing page
 
Html
HtmlHtml
Html
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
 
Handout1 intro to html
Handout1 intro to htmlHandout1 intro to html
Handout1 intro to html
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
 
Html 5
Html 5Html 5
Html 5
 
Html Css Mistakes
Html Css MistakesHtml Css Mistakes
Html Css Mistakes
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
Css
CssCss
Css
 
CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 

Similar to CSS For Online Journalism

CSS
CSSCSS
CSS
bjornh
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
Mark Frydenberg
 
Stylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStartStylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStart
Scott DeLoach
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 
CSS
CSSCSS
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
HTML FOR BEGINNERS AND FOR PRACTICE .pdf
HTML FOR BEGINNERS AND FOR PRACTICE .pdfHTML FOR BEGINNERS AND FOR PRACTICE .pdf
HTML FOR BEGINNERS AND FOR PRACTICE .pdf
Arun Karthik
 
Web Designing
Web DesigningWeb Designing
Css
CssCss
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Tom Hapgood
 
Html 101
Html 101Html 101
Html 101
Aldrin SuperGo
 
Web design
Web designWeb design
Web design
mjk194
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
julicris021488
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
c525600
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
webhostingguy
 
Computer application html
Computer application htmlComputer application html
Computer application html
PrashantChahal3
 
C S S Top Elements
C S S  Top  ElementsC S S  Top  Elements
C S S Top Elements
ehorner
 

Similar to CSS For Online Journalism (20)

CSS
CSSCSS
CSS
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Stylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStartStylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStart
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
CSS
CSSCSS
CSS
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
HTML FOR BEGINNERS AND FOR PRACTICE .pdf
HTML FOR BEGINNERS AND FOR PRACTICE .pdfHTML FOR BEGINNERS AND FOR PRACTICE .pdf
HTML FOR BEGINNERS AND FOR PRACTICE .pdf
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Css
CssCss
Css
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
 
Html 101
Html 101Html 101
Html 101
 
Web design
Web designWeb design
Web design
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
Computer application html
Computer application htmlComputer application html
Computer application html
 
C S S Top Elements
C S S  Top  ElementsC S S  Top  Elements
C S S Top Elements
 

Recently uploaded

一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
mfria419
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
xnhwr8v
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 

Recently uploaded (20)

一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 

CSS For Online Journalism

  • 1. AW Multimedia Workshop CSS for Online Journalism
  • 2.
  • 3.
  • 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.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 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.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 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