"Using CSS to style an HTML document in three different ways"
Note: I haven't made Loom walkthrough videos for this yet, but in the meantime, try to follow along using the instructions below (and look at my demo, and feel free to download it from the portal)!
Find a piece of writing you've done in the past that you'd be comfortable sharing with the class. Maybe it's an essay you're proud of (that you wrote for another class), or maybe it's something else.
Using your writing as content, create an HTML page, using the most semantically-correct HTML elements as possible. Save this as an .html
file.
Then make two duplicates of your original .html
file. You can call them whatever you want. Use these two pages to make two distinctly different stylistic versions of your page.
Some ideas: Maybe one is very "traditional" -- using good typography and legibility that's easy to read. Maybe another is fantastical or otherworldly in some way. If you feel compelled, you can create a third version too.
On these two pages, try to experiment with the following CSS properties:
width
, max-width
, height
color
, background-color
, background-image
margin
, padding
border
text-align
font-style
, font-weight
, font-size
, font-family
line-height
, letter-spacing
When you're done, create an index.html
file that links to all three of these pages — the original HTML and the two stylistic variations.
If you're feeling exploratory, try a CSS property you know nothing about from this list of common CSS properties or https://cssreference.io.
(Note that we'll be doing more CSS next week, including layout, so no need to cover everything this week.)
When you're done, upload your files to the portal in: participants
/ your-name
/ exercise2
.
(You can see my demo here.)
Reminder: Again, this is just a way for you to start playing with CSS. It doesn't have to be perfect. Feel free to experiment! Come to class next time with any questions you have about CSS.