The CSS file for this page defines attributes and stylistic characteristics of a couple of HTML elements that exist to give additional levels of structural description and formatting.
The <div> tag is used to define a section of a document, which can be either a large or small section. The <span> tag is normally used to define a small portion of a page, such as a single word or phrase, amidst other things, to give you detailed stylistic control over particular identified parts of the document.
Every element in a page — whether it be <h1> or <p> or <div> or <span> — has a "type" (such as p), can potentially have a "class" (such as center), and can potentially have an "id" that you specify in the HTML code. The CSS code can specify formatting for specific types, classes, and ids.
In the CSS file, a "class" is specified with a dot (.), an "id" is specified with a pound sign (#), and you can even specify a particular class for a particular type (e.g., p.center) for a style definition that applies only to elements that have both that type and that class.
Note that the Headings above have a particular background color, because that's how the id "header" is formatted in the CSS file. And they're all centered because that's how the class "center" is formatted in the CSS file. The text color of the <h1>, <h2>, and <h3> elements is defined for those particular type of element.
A Paragraph normally uses the default font and color and alignment of the document, and in the CSS style sheet the element <p> has been given its own particular font size.
Note that this one Paragraph has its class attribute specified as "center", so it is center-aligned, and it has the reduced font size specified for its particular type and class (p.center).
All these Paragraphs use the background color defined for the ID "content" in the CSS, because they're all enclosed within a <div> tag with the id "content". The default style traits for the whole <body> of the document are defined in the CSS file, but can be modified by whatever additional traits are defined for a particular type element (such as <p>) or a particular class (such as "center") or a particular ID (such as "content"). You can still give individual words emphasis or other inline formatting.
In the footer below, note that we've used the <span> tag to format certain specific areas. The date has been identified as such, so that it gets a particular type of formatting, and the name of the author has been identified as being of the class "name", so it gets the formatting that will be given to anything of class "name". The footer paragraph is center-aligned because that's how the class .center has been defined, and its font size has been reduced because that's how p.center has been defined.