CSS

CSS Quick Reference

Here's a quick reference for common CSS properties and selectors:

CSS Properties

• color: Sets the color of text.
  Example: color: red;
• font-size: Sets the size of the font.
  Example: font-size: 16px;
• font-family: Specifies the font family for text.
  Example: font-family: Arial, sans-serif;
• font-weight: Sets the boldness of the font.
  Example: font-weight: bold;
• text-align: Aligns text horizontally.
  Example: text-align: center;
• background-color: Sets the background color of an element.
  Example: background-color: #f0f0f0;
• margin: Sets the margin around an element.
  Example: margin: 10px;
• padding: Sets the padding inside an element.
  Example: padding: 5px;
• border: Sets the border of an element.
  Example: border: 1px solid black;
• width: Sets the width of an element.
  Example: width: 200px;
• height: Sets the height of an element.
  Example: height: 100px;
• display: Specifies how an element is displayed.
  Example: display: block;
• text-decoration: Sets the decoration of text (underline, overline, line-through, etc.).
  Example: text-decoration: underline;
• line-height: Sets the height of a line of text.
  Example: line-height: 1.5;
• letter-spacing: Sets the spacing between characters in text.
  Example: letter-spacing: 2px;
• text-transform: Controls the capitalization of text.
  Example: text-transform: uppercase;
• text-shadow: Adds a shadow effect to text.
  Example: text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
• box-shadow: Adds a shadow effect to elements.
  Example: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
• border-radius: Rounds the corners of an element's border.
  Example: border-radius: 10px;
• overflow: Specifies how overflowed content should be handled.
  Example: overflow: hidden;
• position: Specifies the positioning method of an element.
  Example: position: relative;
• z-index: Sets the stack order of positioned elements.
  Example: z-index: 10;
• transition: Adds smooth transitions between property values.
  Example: transition: color 0.3s ease-in-out;

CSS Selectors

• element: Selects all elements of a specific type.
  Example: p { color: blue; }
• #id: Selects an element with a specific id attribute.
  Example: #header { font-size: 24px; }
• .class: Selects all elements with a specific class attribute.
  Example: .btn { background-color: green; }
• *: Selects all elements.
  Example: * { margin: 0; padding: 0; }
• selector1, selector2: Selects all elements that match either selector1 or selector2.
  Example: h1, h2 { color: red; }
• selector1 selector2: Selects all elements that are descendants of selector1 and match selector2.
  Example: div p { font-style: italic; }
• selector1 > selector2: Selects all elements that are direct children of selector1 and match selector2.
  Example: ul > li { list-style-type: none; }
• selector:hover: Selects an element when the mouse is over it.
  Example: a:hover { text-decoration: underline; }