html & css
DESCRIPTION
HTML & CSS. Jeanine Schoessler [email protected] @graphical. Verbiage. HTML = HyperText Markup Language CSS = Cascading Style Sheets Inline: styles are applied directly to the tag Embedded: styles are placed in the tags of your HTML document - PowerPoint PPT PresentationTRANSCRIPT
VerbiageHTML = HyperText Markup LanguageCSS = 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><img src="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 pagesNot used the same as HTML emails! Used for data.
# Credits Resident Cost Non-Resident Cost
1 $1000 $4000
2 $2000 $8000
<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: EmbeddedCSS: style & design in <head>
HTML: structure <body><h1>Colors</h1><h2>Red</h2><h2>Blue</h2>
Separate style from content
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!
<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;}
index.html style.css
jsfiddle.net
HTML
Javascript
CSS
Design View
Saving
Classes & IDsID 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><img src="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>