CSS Properties and Values

In CSS, properties define what you want to style, and values define how you want it styled.

Basic Syntax:

property: value;

Example:

color: red;
font-size: 18px;

Each declaration ends with a semicolon ;, and lives inside a selector block:

p {
  color: red;
  font-size: 18px;
}

🔧 Common Properties

🔢 Types of CSS Values

1. Keywords – predefined values
   auto, inherit, none, block, inline
2. Color values –
   Named (red), HEX (#ff0000), RGB (rgb(255, 0, 0)), HSL
3. Length units –
   px, em, rem, %, vh, vw
4. URLs –
   For images or fonts
   url('image.jpg')
5. Functions –
   calc(), rgba(), var()

✅ Example: Putting It All Together

.box {
  width: 300px;
  height: 200px;
  background-color: #fefefe;
  border: 1px solid #ccc;
  padding: 20px;
  color: #333;
}

🧠 Tips

• Don’t forget the semicolon ; at the end of each line.
• Use a code editor with IntelliSense to explore available properties.
• Not all properties work with all elements—check documentation if unsure.