Style Design Adam Crymble Digital Histories Workshop HTML
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: 1 px 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=‘red. Text’>This is red text</p> CSS: . red. Text { color: red; } Output: This is red text
CSS Classes – for regular changes HTML: <p class=‘red. Text’>This is red text</p> <p class=‘red. Text’>Also red</p> <p>not red</p> CSS: . red. Text { color: red; } Output: This is red text Also red not red
How does the HTML find the CSS? <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="style. css" /> </head> <body> <p class=“red. Text”>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=“red. Text”>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
CSS Zen Garden
Themes / Templates
- Slides: 12
