Patterns of Chaos

Borders and Colors (and other stuff)

In the last lesson, you saw a couple of tags that added something extra called style. A style is applied to the element to make it look different than the plain, boring, default black & white. Styles can even change where on the page something is displayed.

Like this

You've already seen two styles in use: color and background-color. Other styles you might want to use are:

  • border - creates a border or outline around a section
  • font-family - changes the font used in a section
  • font-size - makes the text bigger or smaller
  • text-align - changes how the text is aligned (left, right, center)
  • margin - creates space around a section
  • padding - creates space inside a section but around the content

Styles are all added in quotes, inside the tag, using the keyword style. You can use more than one style on a tag - all of them must be in the style declaration, separated by semicolons (;). To declare a style, use the style name, followed by a colon (:), then the code, setting, or information for that style.

Here are some of the common styles and some examples of their use:

Style Values Example Appearance
background-color aqua, blue, brown, green, orange, red, yellow, (Full list) background-color: yellow;
yellow background
border solid, dotted, dashed
border: solid red 2px;
red border
font-family Times, Arial, Helvetica, Courier, monospace, sans-serif, serif
Full list
font-family: Times;
Times font
font-size #px font-size: 48px;
Big font
margin #px margin: 20px;
padding #px padding: 20px;
text-align left, right, center text-align: right
right-aligned text

This is only a small example of what you can do with styles, but it should be enough to get you started using styles to make your website look better. And since styles really aren't part of HTML, that ends this basic HTML tutorial.

To learn even more about HTML and what you can do with it, you can use the w3schools HTML tutorial. Or, if you just want to look things up and see what other HTML tags there are and what they do, try the w3schools HTML tag reference.

Moving on, you will start to learn more about styles and how to use them in the CSS tutorial (coming soon)

  Next: CSS Tutorial (coming soon)