CSS Tutorial – 05 – Class and Id Selectors


The class selector is recognized by the period
sign (.), followed by a class name. The class can either be a general class that
can be applied to any element. Or a specific class, that can only be applied
to one type of element. Either way, to use a class rule we need to
specify where in the document it should be applied. This is done using the class attribute
with its value set to the class name. Next we have the id selector which work much
like the class selector. It uses a pound sign (#), instead of a period. Also, each id selector
should only be used on one element per document since the id attribute needs to be unique.
Therefore, we will only use id selectors when we want to make sure that a style is only
used once. The class selector on the other hand can be assigned to any number of elements.
Both the id and class attributes can be applied to all HTML elements. Say for example that we want some paragraphs
to have a color, but not all of them. Then we first need to add a class rule with a color
property. This rule says that any element whose class attribute has a value of info
will have this style. So, to apply it we just need to add that class name to an element. Next, if we want a class to only work for
paragraph elements we can instead create a specific class, or subclass, and add it to
the document. We can apply the id selector in the same way as the class. This rule will
match the one and only element whose id attribute is set to that id. We can only use one id
to each element, but we can apply more than one class by separating them with a space. The span and div elements work especially
well with the class and id selectors. These elements are generic ways of adding structure
to a document and they have no styles associated with them. The difference between the two
is that span is an inline element and div is a block element.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *