If you're planning to make a whole site, it would be much easier to make a css file with your styling in it.
So say for your <h1> elements, you could specify in your css file what style attributes the <h1> elements have.
For example in your css file:
h1 {
color:red;
font-weight:bold;
font-size:30px;
}
The h1 { identifies that the following style attributes should be applied to all <h1> elements.
Then say we called this a file called style.css, saved it in your server files and then linked it in by adding this in the <head> section of your HTML:
<head>
<link href="./style.css" rel="stylesheet">
</head>
So now all the <h1> elements in your HTML file will be red, be bold and have the font size of 30px.
You can identify many different elements in many different ways (a more elaborate list is available here), so for example:
Adding a class="example" into an element, such as a <div class="example"></div> could then by styled in your css file like this:
.example {
background:red;
}
Which would then make the background of a div element with the class of "example" red. Easy, right?
Here are the most common types of ways of giving a element an attribute that you can style with css:
<element> = element
class="test" = .test
id="test" = #test
<element class="test"> = element.test
All of the bold selectors would then be followed by a left brace ({), with your style attributes underneath and then finished with a right brace (}).
If you want to style the child of a certain div element, you could do this:
<div class="testdiv">
<element class="test"></element>
</div>
div.testdiv > element.test
You can add multiple selectors for only one set of style attributes by adding commas in-between selectors, for example:
<h1>Hi</h1>
<h2>Hello</h2>
h1, h2 {
font-weight:bold;
}
Which would make both <h1> and <h2> bold.
Remember, you only have to put the class="" or id="" in the first tag of an element if it has two.
The layout for css with selectors is always your selector (1), a left brace (2) your style attributes (3) and closed with a right brace (4).
.h1(1) { (2)
color:red;(3)
}(4)
http://www.w3schools.com/css/css_syntax.asp has some more info about the more basic selectors. I made https://jsfiddle.net/1tw2zfrf/ to help you understand the differences.
Hope this helps! Let me know if this was confusing or you need some more info!