Jeanine

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 s?

Elements paragraph MSU this is bold, also bold this is italic, also italic

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

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

Applying styles: Inline Colors Red Blue

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

Separate style from content

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

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

jsfiddle.net HTML Javascript CSS Design View

Saving

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

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; }

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