Default CSS for custom HTML tags

While HTML provides a set of standard tags for structuring web content, at times these predefined elements may not fully meet the requirements of a unique design vision. This is where Custom HTML tags come into play, offering developers the freedom to create their own semantic elements and define their visual presentation according to their specific needs. In this topic, you will learn how to create your own semantic elements called custom HTML tags. Also, you will learn how to apply Default CSS properties with custom HTML tags. Let's get started!

Custom HTML tags

HTML tags such as <div>, <p>, or <span> are defined by the browser's default stylesheet. Meaning they have built-in default behavior and styling, such as display:block for <div> or display:inline for <span>.

However, when you create custom HTML tags that are not part of the standard HTML specification, they don't have predefined styles. When you use a custom HTML tag, such as <custom-tag>, browsers will treat it as an inline element by default, meaning it will flow within the text content.

The best practice for styling custom HTML tags with default CSS is to use classes and IDs. Classes and IDs are essential for applying CSS styles to specific elements or groups of elements on a web page. It is standard and widely accepted to use classes and IDs for styling HTML elements, including custom tags.

To change its default behavior or appearance, you can define CSS rules specifically for that custom tag. This means that you can assign properties like display, margin, padding, font-size, and color to your custom tags to control their layout and visual presentation.

Ultimately, custom HTML tags and their associated CSS styles allow you to create your own semantic elements and define their visual representation according to your specific design needs. When working with custom HTML tags, it's essential to define consistent styles across the website. For example, this can be achieved by utilizing CSS to apply font-size, font-family, and line-height to specific tags or classes defined in the HTML markup. By maintaining consistency, you provide a coherent and user-friendly experience for visitors, while also reflecting the visual identity of the website or brand.

Even though custom HTML tags don't have the standard HTML specification or predefined styles, they still have some pros and cons worth noting. You will learn about the benefits of custom HTML tags in the next section.

Benefits of using Custom HTML tags

Overriding default styles is an essential aspect of web development when you want to ensure consistent styling across different browsers and have complete control over the appearance of custom tags. One common approach to achieving this is by using a CSS reset or normalization. With CSS reset you can remove or neutralize the default styles applied by browsers. The goal of a CSS reset is to provide a clean slate, making it easier for developers to define their own styles without worrying about browser inconsistencies. It effectively "resets" the styles to a baseline, eliminating any unwanted margins, paddings, font sizes, or other properties that may vary across browsers.

With Custom HTML tags, there is no need to do a CSS reset at all. Right from the beginning, you are starting with neutral tags that don't have any default styles applied by the browser. This saves a lot of time in the development process.

Custom HTML tags allow you to have your own semantic structure. You don't have to solely rely on semantic HTML elements such as <h1>, <p>, or <span>. You can be creative and best describe the custom tags based on their purpose. By using descriptive custom tags, you make it easier for yourself and other developers to understand the purpose and functionality of different elements within the HTML structure.

Custom tags can be advantageous when working with certain frameworks or libraries. For example, if you're using a front-end JavaScript framework like React or Vue.js, you can define custom tags to represent specific components in your application. This aligns with the component-based architecture of these frameworks and provides a more intuitive and declarative way of composing user interfaces.

Naming Rules For Custom Tags

When creating custom HTML tags, it's important to follow certain naming rules to ensure compatibility, maintain code readability, and avoid conflicts with existing or future HTML standards. There are several guidelines for naming custom HTML tags, which we will cover in this section.

Prefix: Begin the custom tag name with a prefix to distinguish it from standard HTML tags. Here is an example of a prefix:

x-

Format: Use lowercase letters for the tag name. Avoid using uppercase or mixed-case letters to prevent confusion with standard HTML tags. For example:

x-customtag

Hyphens: Separate multiple words in the tag name using hyphens ("-"). This convention, known as kebab-case, improves readability and follows the standard naming style in HTML:

x-custom-tag

Description and meaning: Choose a descriptive name that reflects the purpose or functionality of the custom tag. This helps other developers understand the tag's purpose and promotes maintainability:

x-custom-header

No clashes: Make sure your custom tag name doesn't conflict with existing or future HTML tags or any popular libraries or frameworks you're using. Check the HTML specification and popular libraries to ensure your custom tag won't cause compatibility issues.

Validation and documentation: Validate your custom HTML tags using HTML validators to ensure they conform to HTML standards. Additionally, document the usage and purpose of your custom tags for yourself and other developers who might work with your code.

Remember that custom HTML tags might not be fully supported by all browsers or versions. To ensure wider compatibility, consider using JavaScript frameworks like React or Vue.js, which allow you to define custom components without creating new HTML tags.

Custom Attributes

Custom attributes are additional attributes that you can define for your custom HTML tags. They allow you to attach extra data or configure specific behaviors for your tags. These attributes can be used to pass information to JavaScript or CSS, store data, or trigger certain actions within your application.

For example, let's say you have a custom HTML tag called <custom-video> that represents a video player:

<custom-video src="video.mp4" autoplay="controls"></custom-video>

You could define custom attributes like src to specify the video source, autoplay to determine if the video should start playing automatically, and controls to enable or disable the video controls. In this example, the custom attributes src, autoplay, and controls are used to provide specific instructions and data to the <custom-video> tag.

It's important to note that custom attributes are not officially recognized by the HTML specification, and they may not be supported or understood by all browsers or tools.

Default CSS for custom HTML tags

Let's go through an example of applying default CSS properties to custom HTML tags. In this example, we will create a product card with an image, title of a product, price, and an "Add to Cart" button.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <product-card class="product">
        <img src="https://cdn.shopify.com/s/files/1/0046/5548/0950/products/
         STEVEMADDEN_SHOES_POSESSION_BLACK-TAN_SIDE_grande.jpg?v=1657219816" 
         alt="Product Image">
        <h3>Sneakers</h3>
        <p>Price: $99.99</p>
        <button>Add to Cart</button>
      </product-card>
</body>
</html>

CSS:

product {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
    width: 200px;
  }
  
  product img {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  
  product h3 {
    font-size: 1.2rem;
    margin: 0;
  }
  
  product-card p {
    font-size: 1rem;
    color: #888;
  }
  
  product-card button {
    padding: 10px 10px;
    background-color: #828482;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  

Output:

The <product-card> tag is a custom HTML tag used to represent a product card that displays an image, product name, price, and an "Add to Cart" button. As mentioned, the standard is to apply the styles to the classes or the id of the element. To style the custom tag, we used the CSS styles to the product class. The CSS styles define the default appearance of the product class and its child elements.

The <product-card> tag has a display of inline-block, allowing multiple cards to appear next to each other. It has margin and padding for spacing, a border with rounded corners, and a background color.

The <img> tag within the product is styled to have maximum height, maintaining the aspect ratio with object-fit: cover, and a border radius for rounded corners.

The <h3> heading has an increased font size and zero margins to make the product name stand out. The <p> paragraph has a slightly smaller font size and a different color for supplementary information such as price.

Lastly, the "Add to Cart" button within <product-card> has customized padding, background color, text color, border, border radius, and a cursor style to enhance its interactive appearance.

Conclusion

In summary, here is a list of key features of custom HTML tags that you should remember from this topic:

• Custom HTML tags allow developers to create their own semantic elements and define their visual representation.
• Custom tags should follow naming rules, such as using a prefix, lowercase letters, hyphens for word separation, and descriptive names.
• Custom attributes can be added to provide additional data or configure specific behavior for custom tags.
• Default CSS properties can be applied to custom tags to define their appearances, e.g. layout, colors, and fonts.

Now that you know more about custom HTML tags, let's put your knowledge to the test!