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.

comments powered by Disqus