We define the look of our web page using CSS. The best way to apply styling to a page is using a separate CSS stylesheet, which defines all the rules for our site. We'll get to this shortly.
We can however apply styles to individual elements on a page. Say we have a paragraph, like this:
<p>Let's make it bigger and redder!</p>
We can make it bigger with a style attribute like so:
<p style="font-size:30px">Let's make it bigger and redder!</p>
If we wish to apply some more rules we can do so by separating them with a semi-colon, like so:
<p style="font-size:30px; color: red;">Let's make it bigger and redder!</p>
Exercise - Style Tags
Use HTML something like this. You can copy and paste this if you like:
<!DOCTYPE html><html><head><title></title></head><body><h1>Style attributes are handy</h1><p>In a pinch.<strong>But be careful not to overuse them!</strong></p></body></html>
Refer to the CSS cheat-sheet here:CSS Cheat-sheet
- Make the h1 big and red.
- Make the paragraph blue.
- Add a background colour to the html element.
- For bonus points, add a background texture to the html element. You may wish to pick one from here http://subtlepatterns.com/)
- Add a 5 pixed dotted grey border around the body element.
- Set a width on the body of 500px.
- Center the page by setting margin:0 auto; on the body.