In this introductory tutorial on HTML/CSS Class and ID Selectors, we will dive into some creative examples providing valuable insight into the power of these Selectors to give unlimited ability for web design.
HTML and CSS Interplay
CSS stands for “Cascading Style Sheet” and is used in conjunction with HTML (Hypertext Markup Language) as a powerful tool for creating web design and layout. The HTML uses the CSS attributes id and class to add any number of styles to enhance your web environment.
ID vs. Class: What You Need to Know
Although they have similar functions, they are not the same and do not always share the same purpose.
ID’s are unique
- Each element can have only one ID.
- Each ID can have an unlimited amount of Styles applied to it.
- Each page can have only one element with that ID.
- IDs use “#” in the CSS which can also be used as an identifier for HTML “Jump Links” (hyperlinks). This allows you to jump from one place to another on the same web page and can also be used in creating a well-designed Table of Contents.
Below is an example of the ID used in the CSS area of the HTML:
#top { |
Classes are not unique
- You can use the same Class on multiple elements.
- Class naming is case sensitive.
- Classes use a “.” in front of the name in the CSS as seen in the illustration below.
- Each Class can have an unlimited amount of Styles applied to it.
- You can use multiple classes on the same element.
Below is an example of a Class used in the CSS area of the HTML:
.introduction { |
Helpful Hint #1: Designing Your Web Content
The following example displays an entire HTML web page incorporating the ID and Class selectors.
The following example is the resulting web output:
Helpful Hint #2: Using the ID Selector to Create Jump Links
In the following example, we illustrate the effective behavior of the ID selector to build a hyperlinked Table of Contents. Remember that the web is not a static environment like hard copy pages. Utilizing the ability to hyperlink with Jump Links gives your web users ease of use.
The following is an actual HTML page with code that you can copy.
<!DOCTYPE html> |
The following illustration provides information on the code displayed above. From this illustration, you can see the relationship of the two code sections that talk to each other in order to form the Jump Link.
Helpful Hint #3: Using the Class Selector in Multiple Elements
For this section, we want to show how you can use a Class name in multiple places to repeat a theme on your web page. Once you have given the styles to that class name, you can use it as often as you like.
Tip: The Class name can be named with any name you want to use. We suggest using an intuitive and logical naming convention that helps to identify the content. This in turn becomes a content identifier and helps to lay out your code in a well structured format.
Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.
The following is a sample HTML page using the Class name GreekCity. You can copy code from this to try it out yourself.
<!DOCTYPE html> |
The following illustration identifies the areas we discussed in this section:
The following example is the resulting web output:
Outro: Where to Next?
This introduction to Class and ID selectors should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.
Enroll in our Intro to Programming Nanodegree program today!