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.
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!