You are mixing different things. A span is an inline HTML element, however the class is an attribute of elements such as span , p , div or any other. That is, you can add the class attribute to span to give you CSS classes.

In the same way you can do this to change the color to blue:

<span style="color: blue;">Este texto é azul</span>

The same can (and should) be done using CSS classes to be able to have CSS rules in a separate file that controls all elements with a certain class. So the above example can be done like this using class:

CSS

.azul{ color: blue;}

HTML

<span class="azul">Este texto é azul também</span>

This example above is simple but in pages with hundreds of spans it is not practical to write the stile or change element to element, then use class (s).

Another great advantage that does not have to do with CSS is the possibility to select groups of elements that share the same class in the DOM and apply them to other rules or change them if necessary. This can be done with CSS, for example using .azul:hover{ color: red;} that changes the color in case the mouse goes over, or in the case of javascript (with or without library) where you can do:

document.querySelectorAll('.azul').innerHTML = 'Novo texto...';

and so change the text (content) of the elements that have this class, regardless of whether they are span or not.

These are very simple examples, but it's important to remember that span is a DOM element, and class is an attribute of DOM elements that gives them CSS classes to be able to apply CSS rules to the element ; or can be selected by javascript to change / select the element (s) that have those classes.

span is only an HTML element while class is used to manipulate any HTML element, for example, you can use it to style any element. See:

CSS

.nav {
 background-color: #000;
}

HTML

<span class="nav">Texto<span>
<p class="nav">Texto<p>

In this example, both p and span will receive black background because it has class .nav

If you use the span element to stylize, all span elements will get the properties of span .

Example:

span {

  background-color: #fff;

}

You can also use span to stylize only part of a text.

Example:

CSS

span {

  color: red;

}

HTML

<p>Texto <span>texto vermelho</span> texto.</p>

This site is good for studying http://www.w3schools.com/