Class, Style and Id

Understand and use the Class, Style and Id properties in HyperCode elements

published 01/01/2025 15:25, updated 04/13/2026 22:37

Understand what Class, Style, and Id properties are in HyperCode, how to use them, and how to take advantage of them.

Most HyperCode Tags have the optional attributes class, style, and id.

These attributes are directly equivalent to those with the same name in HTML. In fact, HyperFluxCMS compiles these attributes exactly as their equivalents.

There are many excellent websites and online courses that explain in detail the use of these attributes. The purpose of this page is solely to offer an introduction to these attributes so that one can understand and draw a parallel with them in HTML/CSS, and it assumes that the reader already has some prior knowledge about them.

Class

As in HTML, the class attribute allows you to force a given element to belong to a specific class.

You can, for example, create a CSS style sheet class called "rounded-text-box-with-shadow" and use it to highlight certain blocks of your post.

For example, in the code below, a block is marked to participate in the class rounded-text-box-with-shadow

[block class="rounded-text-box-with-shadow"]
Warning: After deleting an item it cannot be recovered.
[/block]

It is possible for an element to participate in more than one class, separating the class names by space. For example, in the code below, a block is marked to participate in 3 classes: box, highlight, and blinking.

[block class="box highlight blinking"]
Warning: After deleting an item it cannot be recovered.
[/block]

The Class can also be used by scripts to list the elements on the page that belong to a certain class to use them in some type of processing.

Style

As in HTML, the style attribute allows you to customize some properties of the appearance of an element individually, using CSS syntax.

You might, for example, want a specific image on your page to have a shadow and rounded corners.

[img src="profile.jpg" style="border-radius: 25px; box-shadow: 10px 10px 5px silver;"]

Id

As in HTML, the id attribute allows you to identify an element on the page with a unique ID.

You might, for example, want a specific image on your page to be accessible by the Id "profile-picture".

[img src="profile.jpg" id="profile-picture"]

The ID of an element is useful mainly in two cases:

In CSS style sheets, it is possible to create a property style that applies uniquely to the single element with a given ID. For example, only the image with id "profile-picture" will be displayed with a shadow and rounded corners.
In Javascript, it is possible to get an element by its ID (using document.getElementById("profile-picture")) to later manipulate it.