Home >Web Front-end >HTML Tutorial >How can we use split tags to style HTML elements?
How can we use split tags to style HTML elements?
- WBOYforward
- 2023-09-06 13:45:051398browse
The
tag serves as a container for HTML elements. With the help of this tag we can easily define a part of the HTML document. It is also used to group most HTML elements together and format them easily. tags are used with block-level elements.
Thetag accepts all CSS properties and uses attributes such as class and id to style the elements within it.
grammar
The following is the syntax of the tag.
<div class='division'>Content…</div>
Example 1
Given below is an example of adding styles to a div tag in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
The following is the output of the above example program.
We can add more styles to tags.
Example 2
Another example of adding styles to div tags in HTML is given below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
text-transform: uppercase;
text-decoration: underline;
font-family: cursive;
font-size: 1.2rem;
font-weight: bolder;
font-style: italic;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
The following is the output of the above example program.
Example 3
You can try running the following code to style an HTML element using the tag. The added style rule will be applied to elements with id="content". The id here is the CSS selector.
<!DOCTYPE html>
<html>
<head>
<style>
#container p {
line-height: 15px;
margin: 20px;
padding-bottom: 15px;
text-align: justify;
width: 130px;
color: blue;
}
</style>
<title>HTML div Tag</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div id = "container">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
The above is the detailed content of How can we use split tags to style HTML elements?. For more information, please follow other related articles on the PHP Chinese website!