How do you select an element with ID demo
You do not know, how to select an HTML element with ID. If you do not know how to do it, this article is for you. In this article, I will explain, how you select an element with an ID ‘demo’. To become a frontend or backend developer you need to know all the attributes in HTML. So, you can learn HTML ID and class attributes first
Table of Contents
What is ID “demo” in HTML?
The”demo” is a type of value given by the ID attribute in HTML. Many people use this ID value because it is a commonly used value for the GetElementById Method in JS.
How do I select an element by ID?
HTML:
<tagname id="demo">CSS:
#demo
{
property: value;
}To implement an ID selector, In place of a selector, write the ID attribute value proceeded by the hash symbol(#) in CSS. In CSS Hash symbols (#) indicates the ID selector. For the ID attribute, we can assign any ID attribute value. The ID attributes select every HTML tag which has a specified ID attribute value and apply styles to them. If two or more identical ID values are assigned to the same ID, CSS style applies to all identical ID values
There is an attribute called ID, which is a global attribute. That ID attribute, you can put in almost every HTML element. ID attribute we use to identify an HTML element uniquely select tags by their “ID attribute value” and apply styles to them.
How do you select an element with an ID demo
HTML:
<html>
<head>
<title>selector with ID demo</title>
</head>
<body>
<h1 id="demo">This Heading is with style</h1>
<h2>This Heading is without style</h2>
</body>
</html>CSS:
#demo{
color:red;
font-family: sans-serif;
}Output:
Follow these simple steps to select an ID ‘demo’
- First, create a tag in your HTML.
- Then add an ID attribute to the tag and give it a value called “demo”.
- To select an element with ID demo, in CSS first put the (#) hash symbol and then put your ID value as “demo”.
- After selecting the element, you need to create a floral bracket { } to style and write the styles within that bracket.
How do you select elements with the class name ‘demo’
HTML:
<html>
<head>
<title>class name demo</title>
</head>
<body>
<p class="demo">This paragraph is in style</p>
<p>This Paragraph tag is without style</p>
</body>
</html>CSS:
.demo{
text-decoration: underline;
size:
}Output:
Follow these simple steps to select an element with the class name demo
- First, create a tag in your HTML.
- Then add a CLASS attribute to the tag and give it a value called “demo”.
- To select an element with the CLASS demo, in CSS first put the (.) dot and then put your CLASS value as “demo”.
- After selecting the element, you must create a floral bracket{ } to write the style.
Conclusion
So when you use ID and CLASS attribute you can give it any value or name. You do not have to specify a specific demo value. A demo is a type of ID and Class value that people use a lot. Hope this article was helpful to you. If you have any doubts about this, ask in the comments.
