Cascading Style Sheets, or CSS, allow us to keep the coding to a minimum in HTML and apply styles using a connected CSS stylesheet. The syntax in CSS to apply a color and font size style to the <h1> tag would look like:

h1 {
color:dodgerblue;
font-size:12px;
}

When applying color to an element, you may use either use HTML color codes or the color name. An example of this would be:

p {
color:#FFFFFF;
}
-or-

p {
color:white;
}

Both of these would produce the same result and it is really up to the designer to use whichever style is most comfortable to them.

While coding your HTML, you can use classes and ids to separate similar elements so that you can apply different styles to them. Classes are preceded by a period . and ids are preceded by the hash character #. Class is generally used when you are going to be styling multiple elements on a page, while ids are used when you want to style a single element on a page. For example:

<p class="important"> would create a paragraph class called important. This could be specific paragraphs on your page that you deem important and that you want to look different from another class called "warning" which may use different styles to convey a different message. This is especially true if you plan to use these styles across multiple pages on a site.

In CSS you could then code:

p.important {
color:green
}

and all of your paragraph elements with the class "important" would be green, while all other paragraph classes and elements would remain maintain their separate styling.

An id would be used when you want to apply a style to a single element, such as a header or footer on your site pages. Since your headers and footers should remain constant throughout your site, you would not need multiple classes with multiple styles to handle them. An example of an id would be:

<footer id="myFooter"> This gives your footer the id of "myFooter"

In CSS you could then code:

#myFooter {
color:white,
font-size:10px;
font-style:italic;
}

This would make your footer have white text, size 10 font, and in italics without having to code this into every page. Just add the id to each footer and the CSS will style all of them the same.

Resources:
https://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it
https://www.w3schools.com/