Welcome to How2Code

In this lesson, we will:

  • Learn how to make borders
  • Learn how to change margin sizes
  • Learn how to change the font of text on a webpage
  • Learn how to make classes and id-specific reusable styles
  • Learn how to link to a stylesheet

Let's get started:

Borders

Borders are fairly easy to make. All you need to know is the size, color, and style of the border you want. Here's the way you write it: border: {size} {style} {color}; You already know how to make CSS colors and sizes from when you learned basic font formatting, all you need to learn are the border styles. They are:

dotted
Defines a dotted border
dashed
Defines a dashed border
solid
Defines a solid border
double
Defines two borders. The width of the two borders are the same as the width value
groove
Defines a 3D grooved border. The effect depends on the color value
ridge
Defines a 3D ridged border. The effect depends on the color value
inset
Defines a 3D inset border. The effect depends on the color value
outset
Defines a 3D outset border. The effect depends on the color value

Margins and padding

Notice how this paragraph is less wide than the one in the borders section? That's margins and padding at work.

This text has no margins or padding. Notice how the paragraph above is 200 pixels further to the center on both the left and the right? The space to the left of the left border and to the right of the right border is the margin, and the space from the borders to the text is the padding.
The paragraph above, highlighted

In the chart above, the yellow part is margins (the p tag has a top and bottom margin of 13px by default), the purple part is padding, and the blue part is the content of the paragraph.

To make margins or padding, simply use the css property margin or padding. You can also use margin-left (etc.) to make just one side have a margin/padding change.

Here's some examples:

/* make the top and bottom margins 15px and the side margins 3px */
margin: 15px 3px;
/* make the top padding 1px, the left padding 2px, the right padding 3px and the bottom padding 5px */
padding: 1px 3px 5px 2px;

Fonts

This paragraph is in Times New Roman, or something similar. This is achieved by using the font-family css property. WARNING: If you only include one font posibility and the end user does not have the font you want installed on their computer, your page will look bad. To make the best possible font choice, first list the specific font you want, then list a similar font that most computers have installed on them, then list one of the following: "serif", "sans-serif", or "monospace". If the name of a font has more than one word in it, enclose it in quotes. Here's how it looks:

font-family:"Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

How to put it all together

Up until now, all we've done with css was a style attribute on an XHTML tag. But what if we wanted to reuse styles on every page? That's what css documents are for, also known as stylesheets and cascading stylesheets. With them, you can use things like tag.class or tag#id to narrow down the selection of tags.

selector[.class|#id] {
  property: value;
}

It's that easy, just save a file with that format as something.css. But how do we link to it in a document? Well, we can either put the style directly in the document, or put a link tag in.

<link href="{URL}" rel="stylesheet" type="text/css" />
<style type="text/css">
 the.style {
  goes:here;
 }
</style>

See you next time!

How2Code was filmed before an emulated sabayon linux computer. No actual computers were harmed in the making of this webpage. How2Code is powered by electricity and the food that Ben ate while he was thinking about what he should write. Do not eat this. It doesn't taste good. Viewer discretion is two words.

This is Ben and Sir Soybean, signing off. See you next time!

Go back to the table of contents