Download
1 / 12
120 likes | 244 Views
Style & Design. Adam Crymble Digital Histories Workshop. HTML + CSS. HTML = Bones. HTML + CSS = Anything is possible!. CSS = Makeup. ‘Bones’ by woodleywonderworks , ‘Makeup brush on white background’ by Matt Trostle , and ‘ Haloween Makeup’ Vancouver Film School.
E N D
Style & Design Adam Crymble Digital Histories Workshop
HTML + CSS HTML = Bones HTML + CSS = Anything is possible! CSS = Makeup ‘Bones’ by woodleywonderworks, ‘Makeup brush on white background’ by Matt Trostle, and ‘Haloween Makeup’ Vancouver Film School.
Inline CSS – for minor tweaks <p style=‘color:red;’>This is red text</p> This is red text
Inline CSS – for minor tweaks <p style=‘color:red; border: 1px solid blue;’>This is red text</p> This is red text
Inline CSS – for minor tweaks <p>This is <span style=‘color:red;’>red</span> text</p> This is red text
CSS Classes – for regular changes HTML: <p class=‘redText’>This is red text</p> .redText { color:red; } CSS: This is red text Output:
CSS Classes – for regular changes <p class=‘redText’>This is red text</p> <p class=‘redText’>Also red</p> <p>not red</p> HTML: .redText { color:red; } CSS: This is red text Also red not red Output:
How does the HTML find the CSS? <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <p class=“redText”>This text is red</p> </body> </html>
Inline + Linked CSS <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <p class=“redText”>This text is red</p> <p style=“color:red;”>This text is also red</p> </body> </html>
Inline CSS vs Linked Style Sheets Inline CSS .HTML Linked Style Sheets .HTML, .CSS
