1 / 12

Style & Design

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.

jacqueline-bowers
Télécharger la présentation

Style & Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Style & Design Adam Crymble Digital Histories Workshop

  2. 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.

  3. Inline CSS – for minor tweaks <p style=‘color:red;’>This is red text</p> This is red text

  4. Inline CSS – for minor tweaks <p style=‘color:red; border: 1px solid blue;’>This is red text</p> This is red text

  5. Inline CSS – for minor tweaks <p>This is <span style=‘color:red;’>red</span> text</p> This is red text

  6. CSS Classes – for regular changes HTML: <p class=‘redText’>This is red text</p> .redText { color:red; } CSS: This is red text Output:

  7. 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:

  8. 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>

  9. 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>

  10. Inline CSS vs Linked Style Sheets Inline CSS .HTML Linked Style Sheets .HTML, .CSS

  11. CSS Zen Garden

  12. Themes / Templates

More Related