CSS stands for 'Cascading Style Sheets'. These sheets (more on that shortly) contain 'style' directives/commands. While HTML allows you to set size, color, positioning of the object being rendered onscreen, those controls are not very granular, specific, or manageable.

CSS is a 'coding' tool that allows you to define the specifics of how objects are to be presented including color, position, size, and so on in great detail. It is also much more manageable that using HTML to do the same types of directives.

CSS is a mark-up language in the same way that HTML is a mark-up language. Neither HTML or CSS include programming logic the way other languages do. Instead, HTML and CSS are ways to define the details of how an object is to be rendered onscreen.

The 'Cascading' aspect of CSS. CSS code can be placed in several locations. As illustrated below, an external file can be created with a .css suffix that contains some/all of the CSS declarations and that file can be pulled in using a meta tag in the main HTML file.

You can also include CSS declarations in the 'style' section in an html page. These will over-ride the declarations in the external CSS file.

Finally, you can include CSS declarations within any html tag/object in the page (that is called 'in-line CSS'), and they will over-ride any other declarations for that one instance of an object.

Classes

With CSS you can define a 'class' which can contain any number of specific declarations. Then you can apply that class to an object so that all of those declarations will be applied to that type of object.

As you can see in the illustration below, a class is created in the 'style' section using the syntax:

object-type.Class-name {
    characteristic: value;
    characteristic: value;
}

Note the period separating the object-type (div, li, img...) from the class-name, which the developers comes up with. You can name classes just about whatever you want, but it is best to make it descriptive.

Then the declarations are wrapped withing curly-brackets ({}).

Each declaration uses the syntax of characteristic (color, width, height, size, color...) seperated using a full colon followed by the value to be assigned to that characteristic which then ends with a simi-colon.

Below you can see that the object type is first (in this case 'h1') and all of the declarations for that object type are enclosed in curly brackets. Each declaration starts with the characteristic's name (in this case 'color') followed by a full colon'. Then the value you want assigned to that characteristic is listed followed by a semi-colon. That is followed by a second declaration that the 'text-align' characteristic should be assigned or set to the value 'center', and then that ends with a semi-colon. And finally, all of the encapsulated declarations are closed with the curly bracket. From that point on, every 'h1' object will be displayed in the color 'orange' and will be 'center justified'.

In the following example the 'a' object (a href) is set to display a yellow background.

In this illustration, we see the top of an external file containing CSS declarations. Note that the first 2 lines (in green) are comments. A CSS comment starts with '/*', then continues until the end delimiter is found which is '*/', the inverse of the start delimiter. These can run for one line, a portion of a line, or several lines.

Next the 'body' object followed by the 'fieldset' objects are identified and given several declarations each.

In the next illustration, the 'p' object is identified, but in addition it has a class name of 'para' included. This allows us to have any number of 'p' object on a page, and they will all have the same declarations applied, except for the 'p' objects that in addition include a class identifier of 'para'. In those cases, the declarations in this block will be applied, even if that means overriding any previous declarations. Notice the HTML code using each version of the 'p' object;

This is an example of a normal p object without a class.

This p object however does include the class name 'para'.