IDs and Classes

IDs and Classes

Check out our CSS Course, made especially for Elementor users.

Table of Contents

Before moving on to the CSS course, it's important to look at HTML IDs and classes. This chapter examines these two attributes, their differences, and the best way to use them. Learning about HTML IDs and classes is important because they are an essential part of styling using CSS.

Moreover, JavaScript can also use these attributes to access and manipulate elements.

Roll up your sleeves, and let's dive into the code.

ID Attribute

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

3 Responses

  1. Hi there!

    I did not understand what was the difference between these two snippets of code? I know you were talking about targeting more than one class, and specific classes.

    .intro-texts, .big-texts {
    /* Your CSS code goes here. */
    }

    .intro-texts.big-texts {
    /* Your CSS code goes here. */
    }

    1. Hey Miguel!

      I improved the clarity of this part in the chapter.

      Essentially, the first snippet is a list of two selectors. Both selectors can be targeting completely different elements. The CSS rule will then be applied to both set of elements targeted.

      Snippet two is an example of a multiple class selector. The targeted element needs to have both classes in his HTML 'class' attribute for it to be a match with the selector. If an element only has the class 'intro-texts' or 'big-texts', the selector won't be a match, and the related CSS rules won't be applied to that element.

      You will learn about this more in details in the CSS Selectors chapter.

      Cheers!

Leave a Reply