In part 1 we learned how to use html tags to add elements onto a web page. In this tutorial you will see how to set up a style sheet to change the properties of the elements.
Again, for more in-depth information check out the tutorials on www.w3schools.com.
As web sites got more complicated developers needed an easy way to control the way html elements look on a web page without having to specify it every time. CSS solves this problem by letting you set the properties for a specific tag for all web pages that use the same style sheet.
A style sheet lets you assign properties like colour and size to any html document that includes the CSS page in its head.
You can attach a style sheet, called demo.css, that is saved in the same folder as your html document like this:
<link href="demo.css" rel="stylesheet"/>
Inside a Style Sheet
Simple style sheets list the tags you want to style and the properties you want to set like this:
For a complete list of properties that can be changed check out http://www.w3schools.com/cssref/default.asp.
Make a style sheet to modify the demo.html document from part 1 (the alligator one). Make the style sheet in note pad and call it demo.css. Make sure it is saved in the same folder as demo.html.
· Make the background blue
· Make the h1 text yellow
· Make the buttons Orange
· Make the paragraph text white, 150% and change the font to chiller like this:
· Set the size of the buttons to 200px
font: 15px Chiller, sans-serif;