CSS allows us to select HTML elements using their tag, CSS id, and CSS class.
The simplest way to add design is to select the HTML element using their tag. If we select a given
tag as a selector, then CSS would apply the rules to all tags on the page.
Besides using HTML tags, CSS provides two additional ways to
select elements as selectors: (a) CSS id and (b) CSS class. When specifying
selectors for these two types, CSS uses the (common) convention of a hash
character ("#") to refer to a CSS id and a dot character (".") to refer to a CSS class.
While we are on this subject, CSS allows only one element on a page to have
a given CSS id. On the other hand, we can have multiple
elements share the same class. If needed, an element can have both CSS class
and CSS id. If that is not enough, then an element can also have more than
one class! An easy way to remember this is to think of a class room full
of students. The classroom can have many students, but each student needs to have a unique student id!
Together, the combination of HTML tag, id and class provides a flexible design for
selecting HTML elements; as per the need, we can be specific or generic. For
example, if we would like to provide a unique behavior to an element (let us say
the navigation bar), then we can identify it using a CSS id.
If we would like to provide an identical design/behavior to all elements of the same
tag, then we can keep the element tag as a selector. Additionally, if we would like to provide an identical
design/behavior to a group of elements (that are not necessarily of the same element type),
then we can keep all of them in a common CSS class.
No comments:
Post a Comment