How can we use split tags to style HTML elements?-HTML Tutorial-php.cn

How can we use split tags to style HTML elements?

WBOY

Release： 2023-09-06 13:45:05

forward

1395 people have browsed it

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.

The

tag accepts all CSS properties and uses attributes such as class and id to style the elements within it.

How can we use split tags to style HTML elements?

grammar

The following is the syntax of the tag.

<div class='division'>Content…</div>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!