How to change the style of DIV through CSS

CSS is an indispensable part of front-end development. In the website design process, the application of CSS gives us more creativity and helps us better realize website functions and beautification. DIV is a part of HTML and an essential part of website design. How to change the style of DIV through CSS?

1. Add background color

To change the background color of a DIV, you only need to set the background-color property in CSS. You can choose a color or use RGB color value or hexadecimal Color codes are used to define colors. For example:

div {
    background-color: #000;
}

2. Set the border

You can use CSS to set the border of the DIV, and you can set the color, type, width and other properties of the border. For example:

div {
    border: 1px solid #000;
}

This code will add a 1 pixel wide solid black border around the DIV.

3. Adjust the size of the DIV

To adjust the size of the DIV, you can use the width and height attributes to set the width and height of the DIV. For example:

div {
    width: 300px;
    height: 200px;
}

In this example, the DIV has a width of 300 pixels and a height of 200 pixels.

4. Add shadow effect

In CSS3, you can use the box-shadow attribute to add a shadow effect. For example:

div {
    box-shadow: 2px 2px 2px #000;
}

This code will add a 2 pixel wide black shadow around the DIV.

5. Change the font and text color

To change the text style in the DIV, you can set the font-family, font-size, color and other attributes. For example:

div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #fff;
}

This will use the Arial font, a text size of 14 pixels and a white text color.

Summary

CSS styles We have only introduced some commonly used styles. Of course, there are many style choices that need to be used as appropriate. By changing the style of DIV, we can achieve better website layout and aesthetics.

The above is the detailed content of How to change the style of DIV through CSS. For more information, please follow other related articles on the PHP Chinese website!