properties-and-values.md

⚑ Properties and Values

For applying specific CSS styles to the element, there is certain properties exist on each and every element of the HTML.

✦ Understanding Properties:

The element properties are attributes that define the style of an HTML element. They determine how elements look and behave on a webpage.

✦ Setting Values:

The values are assigned to properties to specify the desired style. They can be:

• Keywords: Predefined values like inherit, initial, unset, revert, revert-layer.
• Numbers: Numerical values, often with units.
• Units: Used with numbers to specify measurements, like px, em, rem, %, vh, vw.
• Colors: Specified using color names, hex codes, RGB values, HSL values, etc.
• Functions: Built-in functions that perform calculations or manipulations on values such as calc().

There are almost 12 common properties in CSS.

☴ Overview:

1. color
2. background
3. font
4. margin
5. padding
6. border
7. display
8. position
9. float
10. width
11. height
12. overflow

✦ Color:

It sets the color of the text.

Syntax: color: value;

p {
  color: blue;
}

✦ Background:

It sets the background style of an element.

Syntax: background: value;

div {
  background-color: #f0f0f0;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

✦ Font:

It sets the font family, size, style, and weight.

Syntax: font: value;

h1 {
  font: 24px Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
}

✦ Margin:

It sets the space outside an element.

Syntax: margin: value; or margin: top-bottom left-right; or margin: top right bottom left;

Or it sets margin value to individual side.

Syntax: margin-top: value;, margin-right: value;, margin-bottom: value;, margin-left: value;

p {
  margin: 10px;
}

h3 {
  margin: 5px 10px;
}

span {
  margin: 10px 5px 10px 5px;
}

✦ Padding:

It sets the space inside an element.

Syntax: padding: value; or padding: top-bottom left-right; or padding: top right bottom left;

Or it sets padding value to individual side.

Syntax: padding-top: value;, padding-right: value;, padding-bottom: value;, padding-left: value;

p {
  padding: 10px;
}

h3 {
  padding: 5px 10px;
}

span {
  padding: 10px 5px 10px 5px;
}

✦ Border:

It creates a border around an element.

Syntax: border: value; or border: width style color;

Or it sets border to individual side.

Syntax: border-top: value;, border-right: value;, border-bottom: value;, border-left: value;

button {
  border: 2px solid blue;
}

✦ Display:

It sets the display type of an element.

Syntax: display: value;

.hidden {
  display: none;
}

✦ Position:

It sets the positioning of an element.

Syntax: position: value;

.fixed-element {
  position: fixed;
  top: 0;
  right: 0;
}

✦ Float:

It floats an element to the left or right.

Syntax: float: value;

img {
  float: left;
}

✦ Width:

It sets the width of an element.

Syntax: width: value;

div {
  width: 500px;
}

✦ Height:

It sets the height of an element.

Syntax: height: value;

img {
  height: 200px;
}

✦ Overflow:

It specifies how content is handled if it overflows the element's box.

Syntax: overflow: value;

div {
  overflow: hidden;
}

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page