CSS Properties Guide

Detailed explanations of CSS properties and their values.

Typography Properties

Properties that control the appearance of text.

Font Properties

  • font-family: Specifies the font to use
  • font-size: Sets the size of the text
  • font-weight: Sets the thickness of the text
  • font-style: Specifies italic, oblique, or normal text
  • font-variant: Displays small caps or normal text
h1 {
    font-family: "Arial", sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
}

p {
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: normal;
}

Text Properties

  • color: Sets the color of the text
  • text-align: Aligns the text horizontally
  • text-decoration: Adds decorations to text
  • text-transform: Controls capitalization of text
  • letter-spacing: Sets spacing between letters
  • line-height: Sets the space between lines
  • word-spacing: Sets spacing between words
.heading {
    color: #333;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.paragraph {
    line-height: 1.6;
    word-spacing: 1px;
}

Advanced Typography Properties

  • text-shadow: Adds shadow effects to text
  • text-indent: Indents the first line of text
  • white-space: Controls how whitespace is handled
  • word-break: Specifies line break behavior
  • overflow-wrap: Controls line breaks within words
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.indent-paragraph {
    text-indent: 2em;
}

.preformatted {
    white-space: pre-line;
}

.break-word {
    word-break: break-all;
    overflow-wrap: break-word;
}

Colors and Background Properties

Properties that control colors and backgrounds.

Color Properties

  • color: Sets the foreground color (text)
  • background-color: Sets the background color
  • opacity: Sets the transparency level
.element {
    color: #ff6b6b;             /* Hex value */
    background-color: rgb(100, 150, 200);  /* RGB value */
    opacity: 0.8;               /* 80% opacity */
}

/* Other color formats */
.alt-colors {
    color: hsl(120, 100%, 50%); /* HSL value */
    background-color: red;      /* Named color */
}

Background Properties

  • background-image: Sets a background image
  • background-repeat: Controls image repetition
  • background-position: Positions the background image
  • background-size: Sets the size of the background image
  • background-attachment: Controls scrolling behavior
  • background: Shorthand for all background properties
.bg-example {
    background-image: url('pattern.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

/* Shorthand property */
.bg-shorthand {
    background: #333 url('bg.jpg') no-repeat center center/cover;
}

Gradient Properties

  • linear-gradient(): Creates a linear gradient
  • radial-gradient(): Creates a radial gradient
  • conic-gradient(): Creates a conic gradient
  • repeating-gradient(): Repeats a gradient pattern
.linear-gradient {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.radial-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b);
}

.conic-gradient {
    background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);
}

.repeating-gradient {
    background: repeating-linear-gradient(
        45deg,
        #ff7e5f,
        #ff7e5f 10px,
        #feb47b 10px,
        #feb47b 20px
    );
}

Layout and Positioning Properties

Properties that control element positioning and layout.

Box Model Properties

  • width/height: Sets the dimensions of the content area
  • margin: Space outside the border
  • padding: Space inside the border
  • border: Border around the content and padding
  • box-sizing: Controls how the box model calculates dimensions
.box {
    width: 300px;
    height: 200px;
    margin: 20px;                   /* All sides */
    margin-top: 10px;              /* Specific side */
    padding: 15px 10px;            /* Vertical Horizontal */
    border: 2px solid #ccc;
    box-sizing: border-box;        /* Include padding/border in width */
}

/* Border shorthand */
.border-styles {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    /* Or use shorthand: border: 2px solid #333; */
}

Positioning Properties

  • position: Defines the positioning scheme
  • top/right/bottom/left: Offsets for positioned elements
  • z-index: Stacking order of positioned elements
.relative {
    position: relative;
    top: 10px;
    left: 15px;
}

.absolute {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.sticky {
    position: sticky;
    top: 0;
}

Display and Visibility Properties

  • display: Defines how an element is displayed
  • visibility: Controls visibility without affecting layout
  • overflow: Handles content that overflows the element
.display-options {
    display: block;         /* Block-level element */
    display: inline;        /* Inline element */
    display: inline-block;  /* Inline-block element */
    display: flex;          /* Flex container */
    display: grid;          /* Grid container */
    display: none;          /* Hidden, takes no space */
}

.visibility-options {
    visibility: visible;    /* Visible */
    visibility: hidden;     /* Hidden but still takes space */
}

.overflow-options {
    overflow: visible;      /* Content overflows normally */
    overflow: hidden;       /* Clips overflowing content */
    overflow: scroll;       /* Adds scrollbars */
    overflow: auto;         /* Adds scrollbars when needed */
}

Visual Effects Properties

Properties that add visual enhancements to elements.

Border Radius and Shadows

  • border-radius: Rounds the corners of an element
  • box-shadow: Adds shadow effects to an element
  • text-shadow: Adds shadow effects to text
.rounded-corners {
    border-radius: 10px;
    /* Individual corners: */
    border-top-left-radius: 5px;
    border-top-right-radius: 15px;
}

.shadow-effects {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    /* Multiple shadows: */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1),
                0 4px 8px rgba(0,0,0,0.1);
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Transform and Transition Properties

  • transform: Applies transformations to an element
  • transform-origin: Sets the origin point for transformations
  • transition: Defines transition effects
  • transition-property: Specifies which properties to animate
  • transition-duration: Sets the duration of the transition
  • transition-timing-function: Sets the speed curve of the transition
  • transition-delay: Sets a delay for the transition
.transform-element {
    transform: rotate(45deg);
    transform: scale(1.2);
    transform: translate(10px, 20px);
    transform: skew(10deg);
    /* Multiple transforms: */
    transform: rotate(30deg) scale(1.1) translate(5px, 10px);
    
    transform-origin: center center;
}

.transition-element {
    width: 100px;
    height: 100px;
    background: blue;
    transition: width 2s, height 2s, background 1s;
}

.transition-element:hover {
    width: 150px;
    height: 150px;
    background: red;
}