Most common CSS properties

CSS properties are used to define the styles and layout of HTML elements. Here’s a comprehensive list of some of the most common CSS properties, categorized by their functionality:

1. Text Properties

• color: Sets the color of the text.
  css

  color: #333; /* Dark gray text color */

• font-family: Specifies the font to be used.
  css

  font-family: Arial, sans-serif; /* Font stack */

• font-size: Sets the size of the text.
  css

  font-size: 16px; /* Font size in pixels */

• font-weight: Defines the thickness of the text.
  css

  font-weight: bold; /* Bold text */

• text-align: Aligns the text within its container.
  css

  text-align: center; /* Center-aligns text */

• text-decoration: Adds decorations to text (e.g., underline, overline).
  css

  text-decoration: underline; /* Underlined text */

• line-height: Sets the height of a line box, affecting spacing between lines of text.
  css

  line-height: 1.5; /* 1.5 times the font size */

• letter-spacing: Adjusts the spacing between characters.
  css

  letter-spacing: 0.1em; /* Adds space between characters */

• text-transform: Controls capitalization of text.
  css

  text-transform: uppercase; /* Transforms text to uppercase */


2. Box Model Properties

• width: Sets the width of an element.
  css

  width: 100px; /* Fixed width */

• height: Sets the height of an element.
  css

  height: 50px; /* Fixed height */

• margin: Defines the space outside the element’s border.
  css

  margin: 10px; /* Space outside the border */

• padding: Defines the space inside the element’s border.
  css

  padding: 10px; /* Space inside the border */

• border: Sets the border around an element.
  css

  border: 1px solid #ccc; /* 1px solid border with light gray color */

• box-sizing: Controls how the width and height of an element are calculated.
  css

  box-sizing: border-box; /* Includes padding and border in the element’s total width and height */


3. Layout Properties

• display: Specifies how an element is displayed on the page.
  css

  display: block; /* Element is displayed as a block */


  display: inline; /* Element is displayed as inline */


  display: flex; /* Element is a flex container */


  display: grid; /* Element is a grid container */

• position: Specifies the type of positioning method used for an element.
  css

  position: static; /* Default position */
position: relative; /*

  Position relative to its normal position */
position: absolute; /*

  Position relative to the nearest positioned ancestor */


  position: fixed; /* Position relative to the viewport */


  position: sticky; /* Sticky positioning */

• top, right, bottom, left: Used with position to set the position of an element.
  css

  position: absolute;
top: 10px; /*

  Distance from the top of the positioned ancestor */


  left: 20px; /* Distance from the left of the positioned ancestor */

• float: Allows elements to float to the left or right.
  css

  float: left; /* Floats the element to the left */

• clear: Controls the behavior of floating elements.
  css

  clear: both; /* Clears both left and right floats */

• overflow: Specifies what happens if content overflows an element’s box.
  css

  overflow: auto; /* Adds scrollbars if necessary */
overflow: hidden; /* Hides overflowing content */


4. Background Properties

• background-color: Sets the background color of an element.
  css

  background-color: #f0f0f0; /* Light gray background */

• background-image: Sets an image as the background of an element.
  css

  background-image: url('image.jpg'); /* Background image */

• background-repeat: Defines how a background image is repeated.
  css

  background-repeat: no-repeat; /* No repetition of the background image */

• background-size: Defines the size of the background image.
  css

  background-size: cover; /* Scales the background image to cover the entire element */

• background-position: Sets the initial position of a background image.
  css

  background-position: center center; /* Centers the background image */


5. Flexbox and Grid Properties

• Flexbox
  • flex: Defines the ability of a flex item to grow or shrink.
    css

    flex: 1; /* Flex item grows to fill the available space */

  • justify-content: Aligns flex items along the main axis.
    css

    justify-content: center; /* Center-aligns flex items */

  • align-items: Aligns flex items along the cross axis.
    css

    align-items: center; /* Center-aligns flex items vertically */

• Grid
  • grid-template-columns: Defines the number and size of columns in a grid.
    css

    grid-template-columns: repeat(3, 1fr); /* Three equal columns */

  • grid-template-rows: Defines the number and size of rows in a grid.
    css

    grid-template-rows: 100px auto; /*

    Two rows: 100px high and auto-sized */

  • grid-area: Defines a grid item’s location within a grid.
    css

    grid-area: header; /* Places the item in the "header" area */


6. Transitions and Animations

• transition: Defines the transition effects between property changes.
  css

  transition: all 0.3s ease; /* Smooth transition for all properties */

• animation: Defines animations using @keyframes.
  css

  @keyframes slideIn {
from { transform: translateX(-100%); }
to

  { transform: translateX(0); }
}


  .animated {
animation: slideIn 0.5s ease-out;
}


7. Miscellaneous Properties

• opacity: Sets the transparency level of an element.
  css

  opacity: 0.5; /* 50% opaque */

• z-index: Controls the stacking order of positioned elements.
  css

  z-index: 10; /* Higher numbers are closer to the front */

• cursor: Specifies the type of cursor to be displayed.
  css

  cursor: pointer; /* Pointer cursor for clickable elements */

• visibility: Controls the visibility of an element without affecting layout.
  css

  visibility: hidden; /* Hides the element but still occupies space