Properties
CSS properties are used to define the style and layout of HTML elements. Each property has a specific purpose and can be used to control various aspects of an element's appearance.
Common CSS Properties
Here are some commonly used CSS properties:
- color: Sets the color of the text.
- background-color: Sets the background color of an element.
- font-size: Specifies the size of the font.
- font-family: Defines the font family for text.
- margin: Sets the margin around an element.
- padding: Sets the padding inside an element.
- border: Defines the border of an element.
- width: Sets the width of an element.
- height: Sets the height of an element.
- display: Specifies how an element should be displayed.
Example
Here's an example of how to use CSS properties:
.example-class {
ㅤcolor: blue;
ㅤfont-size: 16px;
ㅤbackground-color: lightgray;
ㅤpadding: 10px;
ㅤmargin: 5px;
ㅤborder: 1px solid black;
}
Property Categories
CSS properties can be grouped into several categories:
- Text Properties: Control the appearance of text (e.g., color, font-size, text-align).
- Box Model Properties: Control the layout and spacing of elements (e.g., margin, padding, border).
- Background Properties: Control the background of elements (e.g., background-color, background-image).
- Positioning Properties: Control the positioning of elements (e.g., position, top, left).
- Flexbox Properties: Control flexible box layout (e.g., display: flex, flex-direction).
- Grid Properties: Control grid layout (e.g., display: grid, grid-template-columns).
- Animation Properties: Control animations and transitions (e.g., animation, transition).
Understanding and effectively using CSS properties is crucial for creating well-designed and responsive web pages. Each property offers unique capabilities for styling and layout, allowing for precise control over the appearance of HTML elements.