In this workshop, you'll learn the basics of CSS by applying style to the semantic HTML structure you created in the previous workshop.
Pull up your WikiHow page you created in HTML for Workshop 2. Reread it from top to bottom and refamiliarize yourself with it.
Think about how you might change the look & feel of your WikiHow page for your specific how-to topic. Should your page’s style let readers better understand its purpose? Or should its look provide relevant tension? (Thinking about your specific how-to topic can be a good guiding principle in your choice of formal elements like colors, fonts, and so on.)
Make an identical duplicate folder of your “workshop01” folder from last week. Call it “workshop03”.
To test that the stylesheet is properly linked, create a test in your style.css such as:
Open up your index.html (within your workshop03 folder) by dragging it to your web browser. If the page now has a yellow background, it worked! (You can delete the yellow background declaration if you want now — it was just a test.)
Make a list (either mental or in a separate text file) of all the HTML elements you are using in index.html. (Such as
strong, and so on.) In your CSS file, test that you can isolate them all.
You can explore more CSS properties here!
See Styled WikiHows.