Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast

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>

    <h1>Style attributes are handy</h1>
      In a pinch.
      <strong> But be careful not to overuse them! </strong>

Refer to the CSS cheat-sheet here:

CSS Cheat-sheet

  1. Make the h1 big and red.
  2. Make the paragraph blue.
  3. Add a background colour to the html element.
  4. Add a 5 pixed dotted grey border around the body element.
  5. Make the strong element purple and twice as big.
  6. Set a width on the body of 500px.