In a previous article, we discussed incorporating external styles into HTML elements. In the following discussion, we will delve deeper into this topic, focusing on a commonly used method of integrating styles within HTML documents: Class
HTML class Attribute
The `class` attribute is widely utilized to denote a specific class name within a style sheet. Moreover, it plays a crucial role in JavaScript programming as it enables the identification and manipulation of elements associated with the designated class name.
Below is the syntax for adding class to HTML elements:
.classname {
CSS properties
}- To create a class in your CSS stylesheet, begin with a period (.) followed by the class name.
- Then, enclose the desired CSS properties within curly braces {} to effectively define and style the elements associated with that specific class.
Key characteristics of the class attribute
- HTML elements have the capability to be associated with multiple classes simultaneously.
- Conversely, it is also true that various HTML elements have the capability to reference the same class name.
- The class name is case-sensitive.
Example
To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.
HTML id Attribute
The "id" attribute serves as a distinctive identifier for an HTML element, distinguishing it from others within the document.
The "id" attribute plays a crucial role in linking to a precise style declaration within a style sheet, and is additionally essential for JavaScript functionalities that involve accessing and modifying the specific element identified by its unique id.
Below is the syntax for adding class to HTML elements:
#idname {
CSS properties
}To define a "id" in your CSS stylesheet, begin with a "#" followed by the id name.
Then, enclose the desired CSS properties within curly braces {} to effectively define and style the elements associated with that specific "id".
Key characteristics of the "id" attribute
An "id" is unique and cannot be shared by other HTML elements.
The ID name must contain at least one character, cannot start with a number, and must not contain any whitespace.
The id name is case-sensitive.
Click here to observe the page automatically scrolling to a specific position. This is due to the "id" attribute, which you can also see in the URL.
Try removing the id (#image_tags) from the URL and observe the behavior.
Having now obtained a fundamental grasp of Hypertext Markup Language (HTML), we shall advance to Cascading Style Sheets (CSS) tutorials in order to acquire the knowledge necessary for crafting visually appealing and well-structured HTML pages, as well as gaining an understanding of wireframes.
Want to practice more? Click here for more hands-on exercise.
References: