Menu
CSS

CSS Properties

CSS Properties

CSS properties are used to define the styles that will be applied to HTML elements. Each property has a specific set of possible values and affects the appearance or behavior of the element in different ways. Here is a comprehensive overview of various CSS properties categorized by their functions:

 

1. Text Properties

 

1.1. color

  • Sets the color of the text.
p {
  color: blue;
}

 

1.2. font-family

  • Specifies the font for the text.
body {
  font-family: Arial, sans-serif;
}

 

1.3. font-size

  • Sets the size of the text.
h1 {
  font-size: 24px;
}

 

1.4. font-style

  • Specifies the style of the text (e.g., normal, italic, oblique).
em {
  font-style: italic;
}

 

1.5. font-weight

  • Sets the weight (or boldness) of the text.
strong {
  font-weight: bold;
}

 

1.6. text-align

  • Sets the horizontal alignment of the text.
h1 {
  text-align: center;
}

 

1.7. text-decoration

  • Specifies the decoration added to the text (e.g., none, underline, overline, line-through).
a {
  text-decoration: underline;
}

 

1.8. text-transform

  • Controls the capitalization of the text.
h2 {
  text-transform: uppercase;
}

 

1.9. line-height

  • Sets the height of each line of text.
p {
  line-height: 1.5;
}

 

1.10. letter-spacing

  • Sets the space between characters.
p {
  letter-spacing: 2px;
}

 

2. Background Properties

 

2.1. background-color

  • Sets the background color of an element.
div {
  background-color: #f0f0f0;
}

 

2.2. background-image

  • Sets the background image of an element.
body {
  background-image: url('background.jpg');
}

 

2.3. background-repeat

  • Sets how the background image is repeated.
body {
  background-repeat: no-repeat;
}

 

2.4. background-position

  • Sets the starting position of the background image.
body {
  background-position: center center;
}

 

2.5. background-size

  • Specifies the size of the background image.
body {
  background-size: cover;
}

 

2.6. background-attachment

  • Sets whether the background image is fixed or scrolls with the rest of the page.
body {
  background-attachment: fixed;
}

 

3. Box Model Properties

 

3.1. width

  • Sets the width of an element.
div {
  width: 200px;
}

 

3.2. height

  • Sets the height of an element.
div {
  height: 100px;
}

 

3.3. padding

  • Sets the padding space inside the element.
div {
  padding: 20px;
}

 

3.4. margin

  • Sets the margin space outside the element.
div {
  margin: 10px;
}

 

3.5. border

  • Sets the border around an element.
div {
  border: 1px solid black;
}

 

3.6. box-sizing

  • Defines how the total width and height of an element are calculated.
div {
  box-sizing: border-box;
}

 

4. Positioning Properties

 

4.1. position

  • Specifies the type of positioning for an element (e.g., static, relative, absolute, fixed, sticky).
div {
  position: relative;
}

 

4.2. top, right, bottom, left

  • Sets the offset from the respective edge of the containing element.
div {
  position: absolute;
  top: 10px;
  left: 20px;
}

 

4.3. z-index

  • Sets the stack order of an element.
div {
  position: absolute;
  z-index: 10;
}

 

4.4. float

  • Specifies whether an element should float to the left, right, or not at all.
img {
  float: left;
}

 

4.5. clear

  • Specifies what elements can float next to the cleared element.
div {
  clear: both;
}

 

5. Flexbox Properties

 

5.1. display

  • Defines a flex container and enables flex context for its children.
.container {
  display: flex;
}

 

5.2. flex-direction

  • Specifies the direction of the flexible items.
.container {
  flex-direction: row;
}

 

5.3. justify-content

  • Aligns flex items along the main axis.
.container {
  justify-content: center;
}

 

5.4. align-items

  • Aligns flex items along the cross axis.
.container {
  align-items: center;
}

 

5.5. flex-wrap

  • Specifies whether the flex items should wrap or not.
.container {
  flex-wrap: wrap;
}

 

6. Grid Properties

 

6.1. display

  • Defines a grid container and enables grid context for its children.
.grid-container {
  display: grid;
}

 

6.2. grid-template-columns

  • Specifies the columns of the grid.
.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

 

6.3. grid-template-rows

  • Specifies the rows of the grid.
.grid-container {
  grid-template-rows: 100px 200px;
}

 

6.4. gap

  • Specifies the gap between grid items.
.grid-container {
  gap: 10px;
}

 

6.5. grid-area

  • Specifies a grid item’s position and size.
.item1 {
  grid-area: 1 / 1 / 2 / 3;
}

 

7. Transition and Animation Properties

 

7.1. transition

  • A shorthand property for setting transition properties in one line.
div {
  transition: background-color 0.5s ease;
}

 

7.2. transitoin-property

  • Specifies the name of the CSS property the transition effect is for.
div {
  transition-property: background-color;
}

 

7.3. transition-duration

  • Specifies how many seconds or milliseconds a transition effect takes to complete.
div {
  transition-duration: 0.5s;
}

 

7.4. transition-timing-function

  • Specifies the speed curve of the transition effect.
div {
  transition-timing-function: ease-in-out;
}

 

7.5. animation

  • A shorthand property for setting animation properties in one line.
div {
  animation: example 5s infinite;
}

 

7.6. @keyframes

  • Specifies the keyframes of an animation.
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

 

CSS