Preamble: Being sure of a little vocabulary will help us talk about the parts of your code.
First, the "embedded style sheet" is the <style> </style> area of your page's <head> element.
The things you write style sheet definitions for are all called "selectors," whether they are the names of standard html elements (body, p, h1, ul, li etc.) or ID and class names that you invent. Each one is followed by a pair of curly brackets.
For example, your first style sheets usually have selectors for the "body" element and a #wrapper" ID that we use to center the page contents in the browser window.
To style boxes that contain photos and captions, you might name a selector something like ".pixbox" -- defining a new "class" -- which you could apply to divs or paragraphs in the body of the document.
To add borders to "h" headings, you need selectors for whichever elements you want to apply the borders to -- your #wrapper or all of the h1 or h2 tags, etc.
After a selector, you use the curly brackets to surround your styles for that selector.
The styles you write, separated by semicolons, are called "declarations," and each one has two parts, a "property" and its "values."
"Border" properties can apply to any box element of your page... most elements are boxes -- also called "block style elements" -- and in each case you can define border values in the style declarations for that selector, whether it's a class, an id or an html tag.
There are a LOT of border properties -- border-style, border-width, border-color, even separate ones for each side of the box you're putting a border around!
BUT you can set the main three all on one line, a form of shorthand. I'll give you a short example below.
W3schools does a good job of explaining here
http://www.w3schools.com/css/css_border.asp
(You have to read down a ways to get to the shorthand part.)
So... up in your style sheet, find your settings for h1....
If you don't already have one, add a selector
h1 {
}
and inside the brackets include a border property and its values, as well as any other properties you want. For instance, try copying this into your page...
h1 {
border: 12px dotted green;
background:gold;
color:red; /* the headline color */
font-family: verdana, arial, helvetica, sans-serif;
}
That shorthand border declaration sets thickness, border-style and color.
See w3schools or the textbook for all the different values the border property can have -- there are more than 30! Notice that the border-style (the kind of line) is techically required. I suspect some browsers will assume "solid" unless you specify dotted or dashed or some other, but it's safer to specify it. For all the varieties, see http://www.w3schools.com/cssref/pr_border-style.asp
A notes page for COMS 326 with Bob Stepno