How To Add Class To Anchor Tag In Html

In this tutorial, we will learn how to add a class to an anchor tag in HTML. Adding CSS classes to HTML elements allows for easy styling and manipulation via JavaScript or jQuery. This tutorial assumes a basic understanding of HTML and CSS.

Step 1: Create an HTML file

Begin by creating a new HTML file and call it index.html. Inside the file, add the following basic structure:

Step 2: Add Anchor Tags

Now, let’s add a couple of anchor tags to the HTML code:

Step 3: Add Classes to Anchor Tags

To add a class to your anchor tags, you need to use the class attribute, followed by the class name. You can add multiple class names separated by a space.

Now, let’s add some CSS styles to demonstrate the use of the link-style class.

Step 4: Adding CSS to Style the Anchor Tags

Add a <style> element inside the <head> section of the HTML file, and declare some rules for the link-style class:

Full Code

Here’s the complete code for our example:

Output

As you can see, both anchor tags are styled according to the link-style class with red text, no underline, and a font size of 24 pixels.

Conclusion

In this tutorial, we learned how to add a class to an anchor tag in HTML. This is an essential skill when working with HTML and CSS, as it allows you to easily apply styles and manipulate elements using JavaScript or jQuery.

Remember to always use the class attribute when adding a class to your HTML elements, and separate multiple class names with a space.