Add html element with css

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Exploring the Element in Practice

Let’s try a hands-on exercise to study how the element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:

div  background-color: green; height: 100px; width: 100px; > 

Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:

Notice that the element has opening and closing tags but does not require any content. Save the index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).

Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:

Note that you have added the class as an attribute to the tag by adding the class attribute and class name to each opening tag. Save the file and reload it in your browser. You should receive something like this:

Adding and Styling Text in a Container

You can put text inside a container by inserting text in between the opening and closing tags. Try adding text inside each of the elements in your index.html file:

div class="div-1">Bluediv> div class="div-2">Reddiv> div class="div-3">Yellowdiv> 

Save the file and reload it in your browser. You should now have text displayed in each of your containers:

You can add additional HTML elements to your text inside the elements. For example, try adding the HTML heading tags ( to ) to your text inside the tags in your index.html file:

div class="div-1">h2>Blueh2>div> div class="div-2">h3>Redh3>div> div class="div-3">h4>Yellowh4>div> 

Save the file and reload it in your browser. The text inside the containers should now be styled according to the default properties of the to tags:

Note that the elements have also adjusted their positions slightly. This repositioning is caused by the default margin properties of the through elements. You’ll learn more about margins in the next tutorial on the CSS Box Model, but for now it is fine to ignore them

To style text inside the containers, you can specify text property values in the rulesets for your classes. Try adding the properties and values to your rulesets in your styles.css file as highlighted in the in the following code snippet:

.div-1  background-color: blue; height: 50px; width: 50px; font-size: 10px; color: white; iu > .div-2  background-color: red; height: 100px; width: 100px; font-size: 20px; color: yellow; > .div-3  background-color: yellow; height: 200px; width: 200px; font-size:30px; color: blue; > 

Save your styles.css file and reload the index.html file in your browser. The text inside the containers should now be styled according to the CSS rules in your styles.css file:

How to Create a HTML Custom Element

A custom element is a new HTML element that we can create ourselves. Unlike browser built-in elements like

, etc, custom elements are created through custom HTML, Javascript & CSS.

Once a custom element is created, it can be used like a normal HTML element in the page. Multiple instances can be declared in the page, Javascript DOM methods can be used (e.g. document.querySelector ), event listeners can be attached & so on.

Example Custom Element For This Tutorial

We will create a simple custom element having the tag .

This element behaves like a «quantity button» that allows to increase or decrease a given quantity by 1. This functionality is commonly found in shopping carts.

Here is a working demo of this custom element :

Custom Element Has Its Own HTML, CSS & Javascript

A custom element has its own HTML, CSS & Javascript.

• Its HTML contains a text input type & 2 buttons.
• It has CSS rules for styling text input & buttons.
• Its Javascript contains click event handlers on each button that changes the value in the textbox.

Shadow DOM

The custom element’s HTML, CSS & Javascript may clash with the code present in other sections of the page. To prevent this, we need the element’s code kept isolated to itself.

The browser does exactly this — it isolates the HTML, CSS & Javascript of the custom element from the rest of the page. This isolation is implemented in the form of Shadow DOM. Consider the Shadow DOM to be a «mini-DOM» holding just the DOM inside the custom element.

Defining Custom Element’s HTML & CSS

Using a , we define HTML & CSS for .

Due to the isolation provided by the Shadow DOM, we can be sure that the classes, IDs, etc defined inside the custom element won’t clash with the rest of the page.

We have handled the custom element’s HTML & CSS. Now we will look at the Javascript involved.

Registering the Custom Element With Javascript

Before the custom element can be used, it needs to be registered using Custom Elements API. In browser, this API is implemented by the global property customElements .

The customElements.define() method registers a new custom element. Parameters required are the element’s tag name & a Javascript class that extends the base HTMLElement .

The code below is the bare minimum Javascript required to create a custom element.

// custom element's class class InputPlusMinus extends HTMLElement < constructor() < super(); // rest of the Javascript functionality >> // register the custom element customElements.define('input-plus-minus', InputPlusMinus); 

In the next step we will see how to include element’s specific Javascript (event handlers etc).

Defining Custom Element’s Specific Javascript

The custom element’s specific Javascript can be included in the same class that was used to create it.

Due to the isolation provided by the Shadow DOM, the element’s Javascript cannot clash with other Javascript in the page.

First we need to render the custom element’s HTML & CSS from the tag.

/* this code is present inside the defined class */ let template = document.querySelector('#input-plus-minus-template').content; this.attachShadow(< mode: 'open' >).appendChild(template.cloneNode(true)); 

// access #add within the custom element's DOM let add_button = this.shadowRoot.querySelector("#add"); let subtract_button = this.shadowRoot.querySelector("#subtract"); let count_textbox = this.shadowRoot.querySelector("#count"); // set initial "value" attribute this.setAttribute('value', '1'); // add 1 quantity add_button.addEventListener('click', () => < let current = parseInt(count_textbox.value, 10); count_textbox.value = current + 1; // set "value" attribute of the custom element this.setAttribute('value', count_textbox.value); >); // subtract 1 quantity subtract_button.addEventListener('click', () => < let current = parseInt(count_textbox.value, 10); if(current >1) < count_textbox.value = current - 1; this.setAttribute('value', count_textbox.value); >>); 

With this, the Javascript for our custom element is complete. We can now start using the custom element.

Complete Code

We have set the «value» attribute to hold the current value. This can be used to get the current value of the element.

document.querySelector("#sample").getAttribute('value');

Источник