CSS Properties and Values Tutorial
In CSS, properties are used to specify the visual styles and behaviors of elements on a webpage. Each property has a corresponding value that determines the specific characteristics or settings applied to the element. Let’s explore some commonly used CSS properties and their respective values:
| Property | Description | Values |
|---|---|---|
| color | Sets the color of the text content. | Any valid color value, such as named colors (e.g., “red”, “blue”), hexadecimal values (e.g., “#FF0000”), RGB values (e.g., “rgb(255, 0, 0)”), or HSL values (e.g., “hsl(0, 100%, 50%)”). |
| font-size | Sets the size of the font. | Any valid length unit (e.g., “px”, “em”, “rem”), or keywords (e.g., “small”, “medium”, “large”). |
| background-color | Sets the background color of an element. | Any valid color value. |
| border | Sets the border properties of an element. | Various values to specify border width, style, and color (e.g., “1px solid black”, “3px dashed #888”). |
| margin | Sets the margin space around an element. | Various length units to define the margin size (e.g., “10px”, “2rem”, “1em”). |
| padding | Sets the padding space inside an element. | Various length units to define the padding size (e.g., “10px”, “2rem”, “1em”). |
| display | Defines how an element is displayed on the page. | Values like “block”, “inline”, “inline-block”, “flex”, “grid”, and more. |
| position | Sets the positioning scheme for an element. | Values like “static”, “relative”, “absolute”, “fixed”, and “sticky”. |
| width | Sets the width of an element. | Any valid length unit or percentage value (e.g., “px”, “em”, “%”). |
| height | Sets the height of an element. | Any valid length unit or percentage value (e.g., “px”, “em”, “%”). |
These are just a few examples of CSS properties and their respective values. CSS offers a wide range of properties that can be combined to achieve various visual effects and layout designs for your webpages. Experiment with different properties and values to customize and style your elements according to your desired look and feel.
Remember to always refer to official CSS documentation and resources for detailed information and examples on specific properties and their values.