1 / 15

HTML & CSS

HTML & CSS. Jeanine Schoessler jeaninerogers@hotmail.com @graphical. Verbiage. HTML = HyperText Markup Language CSS = Cascading Style Sheets Inline: styles are applied directly to the tag Embedded: styles are placed in the <head></head> tags of your HTML document

keran
Download Presentation

HTML & CSS

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. HTML & CSS Jeanine Schoessler jeaninerogers@hotmail.com @graphical

  2. Verbiage • HTML = HyperText Markup Language • CSS = Cascading Style Sheets • Inline: styles are applied directly to the tag • Embedded: styles are placed in the <head></head> tags of your HTML document • External: CSS is referenced from the HTML page, but is stored in another file: “name.css” Which CSS type did we use for emails?

  3. Elements <p>paragraph</p> <a href="http://www.montana.edu">MSU</a> <imgsrc="image.png" alt="50% off your purchase" /> <ul><li>this is <b>bold</b>, <strong>also bold</strong></li><li>this is <i>italic</i>, also <em>italic</em></p></li></ul>

  4. Tables in web pages • Not used the same as HTML emails! Used for data. <table> <tr><th># Credits</th><th>Resident Cost</th> <th>Non-Resident Cost</th></tr> <tr><td>1</td><td>$1000</td><td>$4000</td></tr> <tr><td>2</td><td>$2000</td><td>$8000</td></tr> </table>

  5. Let’s make a page <html> <head> <title>My first page!</title> </head> <body> <p>Hello world!</p> </body> </html>

  6. Applying styles: Inline <h1 style="font-weight:bold; color:#003f7f; padding:4px 0px 2px 0px;">Colors</h1> <h2 style="font-weight:bold; color:#003f7f; padding:4px 0px 2px 0px;">Red</h2> <h2 style="font-weight:bold; color:#003f7f; padding:4px 0px 2px 0px;">Blue</h2>

  7. Applying styles: Embedded • CSS: style & design in <head> • HTML: structure <body><h1>Colors</h1><h2>Red</h2><h2>Blue</h2>

  8. Separate style from content

  9. Embedded styles <html><head> <style type=“text/css”> /* selector { property: value; } */ p { color: #333333;} </style> <head><body> <p>A grey paragraph.</p> </body></html>

  10. What about multiple pages? Use external CSS to control many pages from one single file! index.html style.css <html><head> <link rel="stylesheet" type="text/css" href=“style.css" media="screen" /> <head><body> <p>A grey paragraph.</p> </body></html> /* selector { property: value; } */ p { color: #333333;}

  11. jsfiddle.net CSS HTML Design View Javascript

  12. Saving

  13. Classes & IDs • ID is a reference to a UNIQUE element on your page.CSS: #myID { color: #00f; } HTML: <p id=“myID”>para</p> • Class can refer to multiple objects, even ones of different types (e.g. “<p>, <a>, <img>” can all have a class of “highlight”CSS: .highlight { background-color: #CF3; } HTML: <p class=“highlight”>para</p>

  14. jsfiddle <p>Hello <a href="#" class="highlight">world!</a></p> <p class="highlight">It was a good day for ice <a href="#">cream</a>.</p> <p>Smart <a href="#">mouse</a> eats cheese</p> p {color: #325; text-align: center; font-size: 25px; font-family: Georgia, 'Times New Roman', Times, serif;} a { color: #000;} .highlight { background-color: #CF3; } a.highlight { color: #f00; }

  15. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>World of Wonders</title> <style> </style> </head><body> <header><h1>World of Wonders</h1></header> <nav><ul><li><a href="/">Homepage</a></li></ul></nav> <article> <h2>About Trixy</h2> <figure><imgsrc="http://placekitten.com/200/300"> <figcaption>My first kitten.</figcaption></figure> <p>Hello <a href="#" class="highlight">world!</a></p> <p class="highlight">It was a good day for ice <a href="#">cream</a>.</p> <p>Smart <a href="#">mouse</a> eats cheese</p> <h2>About my second cat</h2> <p>Fun with calligraphy</p> </article></body></html>

More Related