1. 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 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 paragraph MSU this is bold, also bold this is italic, also italic

4. Tables in web pages Not used the same as HTML emails! Used for data. # CreditsResident CostNon-Resident Cost 1$1000$4000 2$2000$8000 # Credits Resident Cost Non-Resident Cost 1 $1000 $4000 2 $2000 $8000

5. Let’s make a page My first page! Hello world!

6. Applying styles: Inline Colors Red Blue

7. Applying styles: Embedded CSS: style & design in HTML: structure Colors Red Blue

8. Separate style from content

9. Embedded styles /* selector { property: value; } */ p { color: #333333;} A grey paragraph.

10. What about multiple pages? Use external CSS to control many pages from one single file! A grey paragraph. /* selector { property: value; } */ p { color: #333333;} index.htmlstyle.css

11. jsfiddle.net HTML Javascript CSS Design View

12. Saving

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

14. jsfiddle Hello world! It was a good day for ice cream. Smart mouse eats cheese 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. World of Wonders World of Wonders Homepage About Trixy My first kitten. Hello world! It was a good day for ice cream. Smart mouse eats cheese About my second cat Fun with calligraphy