CSS or Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS is used to style web pages, user interfaces, and other applications. CSS properties are used to define the style of an element, such as its color, font, size, and position. In this article, we will discuss some of the most commonly used CSS properties in computer applications.
The background properties are used to set the background color or image of an element. The most commonly used background properties are:
background-color
: sets the background color of an element.background-image
: sets the background image of an element.background-repeat
: sets how the background image should be repeated.background-position
: sets the position of the background image.Example:
<style>
body {
background-color: #f2f2f2;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
The font properties are used to set the font style, size, and color of an element. The most commonly used font properties are:
font-family
: sets the font family of an element.font-size
: sets the font size of an element.font-weight
: sets the font weight of an element.color
: sets the color of an element.Example:
<style>
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
font-weight: bold;
color: #333;
}
</style>
The border properties are used to set the border style, width, and color of an element. The most commonly used border properties are:
border-style
: sets the style of the border.border-width
: sets the width of the border.border-color
: sets the color of the border.Example:
<style>
div {
border-style: solid;
border-width: 2px;
border-color: #333;
}
</style>
The padding and margin properties are used to set the spacing around an element. The padding is the space between the content and the border, while the margin is the space between the border and the surrounding elements. The most commonly used padding and margin properties are:
padding
: sets the padding of an element.margin
: sets the margin of an element.Example:
<style>
div {
padding: 10px;
margin: 20px;
}
</style>
The positioning properties are used to set the position of an element. The most commonly used positioning properties are:
position
: sets the position of an element.top
: sets the top position of an element.bottom
: sets the bottom position of an element.left
: sets the left position of an element.right
: sets the right position of an element.Example:
<style>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>