Style attributes

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 simple 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>

Here are some things you can do:

color: red; - make the element red
background: yellow; - set the background to yellow
font-size: 2rem; - double size font. More on rems later. font-face: sans-serif; - set the font. You can also give a specific font name like arial or courier.
font-weight: bold; - bold text
font-style: italic; - italic variant border: 1px dotted blue; - a thin dotted border, solid and dashed are also valid border styles
width: 100px; - set the width of the element to 100px max-width: 100px; - the element can go up to 100px if it needs to to fit the content
min-width: 100px; - see max-width

Exercise - Adding some Styling

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.
Add a 5 pixed dotted grey border around the body element.
Make the strong element purple and twice as big.
Set a width on the body of 500px.