Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What does * { mean in HTML?
Overview
A *{ in HTML (Hyper Text Markup Language) is a universal symbol which depicts a whole HTML document. In another word we can say that this symbol is used to target a HTML body element or a HTML DOM which is Document Object Model. This symbol is mostly used in the CSS (Cascading Style Sheet) to select the whole HTML DOM to reflect the certain changes to it. In the CSS generally we use the class name, id name or tag name to define some CSS properties, but to make a common change to the page we can use this symbol.
Syntax
The given below shows the syntax to use the above symbol in HTML −
*{
// Content goes here
}
Algorithm
Create a HTML document file and write a HTML boilerplate code in it.
Now add some content in the body of the HTML document.
<h3> Tutorialspoint.com </h3>
Now use the internal style sheet in the head of the HTML and add the style tag to the document
<style></style>
Use the above symbols *{ as the selector to select the HTML DOM.
<style>
*{
// CSS styling properties
}
<style>
Now add some CSS styling to the selector.
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
background-color: green;
color: white;
}
</style>
Open the file in the browser and see the result.
Example
In this example we will learn the use case of the symbol *{, so for this we will create a HTML page which will contain default properties. We will be using the styling properties to reset the styling properties.
<html>
<head>
<title> use of *{ in HTML</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3>Tutorialspoint.com</h3>
</body>
</html
When a user load the above HTML document in the browser, will get a green background window and a text as “Tutorialspoint.com” on the screen because, the whole green background is a HTML DOM which is targeted by *{. On targeting this symbol a developer has defined certain styling properties which is reflected to all the child elements of the body.
CONCLUSION
The advantage of using this symbol is that we can define all the CSS styling to the property at once. We do not need to define and target all the child elements of the DOM. In the whole scenario the *{ symbol acts as a tag or the HTML DOM. When using this symbol in the real time, the developer usees this for resetting the predefined CSS of the page. Resetting the pre defines styling means, there must be some margin or padding given to the page which will disturb the user interface of our page, so by defining the styling propertied tp *{ it will override the styling to the page.
151 Views
