Download
1 / 15
160 likes | 334 Views
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
E N D
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 • External: CSS is referenced from the HTML page, but is stored in another file: “name.css” Which CSS type did we use for emails?
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>
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>
Let’s make a page <html> <head> <title>My first page!</title> </head> <body> <p>Hello world!</p> </body> </html>
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>
Applying styles: Embedded • CSS: style & design in <head> • HTML: structure <body><h1>Colors</h1><h2>Red</h2><h2>Blue</h2>
Embedded styles <html><head> <style type=“text/css”> /* selector { property: value; } */ p { color: #333333;} </style> <head><body> <p>A grey paragraph.</p> </body></html>
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;}
jsfiddle.net CSS HTML Design View Javascript
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>
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; }
<!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>
