Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.