A Smarter Way To Learn HTML & CSS(2015)

17
Borders

You can put a border around a paragraph, a heading, and many other HTML elements that I’ll introduce you to in later chapters. The following code demonstrates the simplest way to specify a border. (I made up the class name. You could make up a different name.)

p.boxed {
border: 5px solid red;
}

Now any paragraph with the class boxed assigned to it will have a 5-pixel-wide, solid, red border on all four sides.

As usual, you don’t have to tie the style to a particular element, like a paragraph or heading. You can write, for instance…

.enclosed {
border: 1px dotted #0000ff;
}

Now any element with the class “enclosed” assigned to it—paragraph, heading, or something else—will have a 1-pixel-wide, dotted, blue border on all four sides.

You can choose among 8 border styles:

· dotted

· dashed

· solid

· double

· groove

· ridge

· inset

· outset

Things to keep in mind:

· There’s no space between the number and px. It’s 2px, not 2 px.

· You can use hex values like #ff00ff or color names like blue to specify colors. Get hex values for colors at http://www.colorpicker.com/. Get a list of CSS color names at http://www.crockford.com/wrrrld/color.html.

· Always state the specs in this order: width, style, color. There’s a space between them, but no comma.

You aren’t limited just to 4-sided borders. You can specify which sides you want, and can even mix widths, styles, and colors on different sides of the same border (though this wouldn’t necessarily be considered good graphic design). Here are some examples.

border-top: 4px double red;
border-right: 2px solid #666666;
border-bottom: 6px dashed darkviolet;
border-left: 1px dotted #00ee44;

In your CSS file add a class not tied to an element that specifies a border. In your HTML file write a heading of that class. Save the files and display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-17-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-17-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/17.html