The class selector allows you to apply specific styles to an HMO element from CSX rules defined in your
style sheet.
Think of it as setting up a catalog of different styles in your style sheet and referencing these styles
when you need to apply them to your HMO elements.
Let's take a look at an example in order to create a class.
We need to define it in our sheet.
We'll go ahead and create one class
we'll call this class blue bold text.
This is the syntax for defining a class.
And you'll notice that the class begins with a period followed by the class name and you can give it
any name you like will create a couple of other classes that will be using as well
so for the class definitions we have a large font size.
The colors green and this text will be bold and just one more class.
This class will underline any text we apply to
so we now have three classes created.
Now let's apply one of the classes to the text contained in this column.
Applying the class is easy
we just need to call the class by its name.
And so for this block of text will apply the blue bold text class.
Now let's go ahead and save our file and preview it just to make sure that it worked.
And so you can see that this class the class we created is now being applied to all the text in the
column.
We'd applied the class to
now see for example we wanted to apply a different class to just these two words Lorem.
If some
in order to do that we need to use the span tags
so we create a span so open a span take and a span can have a class as well so for this we'll use the
large green text class
let's make sure there's no spelling mistakes
and we need to close the span tag
so you can use this ban tags when there's no inline element to apply the class to so let's save our
file and preview it.
So now we have these two words that are a different class than the text sorry.
Then the remaining text in that paragraph
now see for example in addition to the large green text class we also want to apply the underline class.
Well you just make a space in type.
The second class you want to apply now save your file and we'll refresh our document and we can see
that the underlying class is now being applied to this text as well.