How can you change the style of a div with CSS?

  • Post category:Uncategorized
  • Post last modified:February 6, 2023
  • Reading time:3 mins read

You can change the style of a div with CSS by using selectors to target the specific div and applying styles to it. Here are a few ways to target a div in CSS:

  • Using an ID selector: To target a div with a specific ID, you can use an ID selector. The syntax for an ID selector is #ID-name, where ID-name is the value of the id attribute of the div.
<div id="myDiv">This is a div</div>
<style>
  #myDiv {
    background-color: lightblue;
    padding: 20px;
  }
</style>
  • Using a class selector: To target a div with a specific class, you can use a class selector. The syntax for a class selector is .class-name, where class-name is the value of the class attribute of the div.
<div class="myDiv">This is a div</div>
<style>
  .myDiv {
    background-color: lightblue;
    padding: 20px;
  }
</style>
  • Using an element selector: To target all div elements on a page, you can use an element selector. The syntax for an element selector is simply the tag name of the element.
<div>This is a div</div>
<div>This is another div</div>

<style>
  div {
    background-color: lightblue;
    padding: 20px;
  }
</style>

Once you’ve targeted the desired div element or elements, you can apply styles to it by using CSS properties and values. For example, to change the background color and padding of a div, you could use the following styles:

div {
  background-color: lightblue;
  padding: 20px;
}

Leave a Reply