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 color #px |
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; | margin |
padding | #px | padding: 20px; | padding |
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)
« Prev: Blocks and Sections Next: CSS Tutorial (coming soon)