CSS 102: Basic Properties That Matter

This guide covers the essential CSS properties that every beginner must understand in order to style and structure web pages effectively.

CSS Colors

In CSS, colors can be defined using:

• Predefined color names (e.g., red, blue, green).

• HEX values (e.g., #ff0000).

• RGB values (rgb(255, 0, 0)).

• HSL values (hsl(0, 100%, 50%)).

• RGBA / HSLA values (with transparency support).

Where You’ll Use These Most

• Color names → quick prototypes, simple styles.

• HEX values → brand colors, UI themes, professional projects.

• RGBA / HSLA → overlays, shadows, hover effects, gradients with transparency.

Example:

h1 {
  color: red;
}
div {
  background-color: rgb(255, 0, 0); /* red */
}
div {
  background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
}
h2 {
  color: hsl(0, 100%, 50%); /* red */
}
h2 {
  color: hsla(0, 100%, 50%, 0.3);
}

Properties Where Colors Apply

• Text color → color

• Background color → background-color

• Border color → border, border-color

• Outline color → outline-color

• Shadow effects → box-shadow, text-shadow

• Gradients → (backgrounds, buttons, etc.)

CSS Backgrounds

The background properties allow you to add visual effects behind elements.

Key Properties

• background-color – sets the background color.

• background-image – sets an image as background.

• background-repeat – defines repetition (repeat, no-repeat, repeat-x, repeat-y).

• background-attachment – defines if the background scrolls (scroll, fixed, local).

• background-position – sets the starting position of a background image.

• background – shorthand for all the above.

Example with Code

/* 1. Background Color */
div {
  background-color: lightblue;
}

/* 2. Background Image */
div {
  background-image: url("pattern.png");
}

/* 3. Background Repeat */
div {
  background-image: url("stars.png");
  background-repeat: no-repeat;
}

/* 4. Background Attachment */
body {
  background-image: url("wallpaper.jpg");
  background-attachment: fixed;
}

/* 5. Background Position */
div {
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: center top;
}

/* 6. Background Shorthand */
div {
  background: url("banner.jpg") no-repeat center top fixed;
}

What are CSS Borders?

Borders define the boundary of an element.

Properties

• border-style – e.g., solid, dashed, dotted, double, none.

• border-width – thickness (px, em, etc.).

• border-color – color of the border.

• border – shorthand for all.

Shorthand Example

.box1 {
  border: 3px dashed red; /* width style color */
}

Rounded Borders with border-radius

/* 1. Simple rounded corners */
.box1 {
  border: 2px solid black;
  border-radius: 10px;
}

/* 2. Fully rounded (circle/ellipse) */
.circle {
  width: 100px;
  height: 100px;
  border: 3px solid blue;
  border-radius: 50%;
}

/* 3. Different radius for each corner */
.box2 {
  border: 2px solid green;
  border-radius: 10px 20px 30px 40px;
}

What Are CSS Margins?

Margins are the empty space around the outside of an element’s box, pushing it away from other elements.

How to Set Margins

1. Individual sides

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 15px;
}

2. Shorthand (All in one line)

.box {
  margin: 20px 10px 30px 15px;
}

Order: Top → Right → Bottom → Left (clockwise).

Margin Values

• auto → lets browser decide (often used for centering).

• length → fixed size (10px, 2rem).

• % → percentage of parent’s width.

• inherit → takes parent’s margin.

Example: Centering an Element

.box {
  width: 300px;
  margin: 0 auto;
}

What is CSS Padding?

Padding creates space inside the element, between the content and the border.

• Individual sides:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

• Shorthand:

/* 1. Two values → top/bottom, left/right */
padding: 10px 20px;
/* Top & Bottom = 10px
   Left & Right = 20px */


/* 2. Three values → top, left/right, bottom */
padding: 10px 15px 20px;
/* Top = 10px
   Left & Right = 15px
   Bottom = 20px */


/* 3. Four values → top, right, bottom, left (clockwise) */
padding: 5px 10px 15px 20px;
/* Top = 5px
   Right = 10px
   Bottom = 15px
   Left = 20px */

Value types: px, em, %, inherit.

Styling Links (States)

Links can be styled based on interaction states:

• :link → unvisited.

• :visited → visited.

• :hover → when hovered.

• :active → when clicked.

Order Rule

• :hover must come after :link and :visited.

• :active must come after :hover.

/* HMTL*/
<a href="https://example.com">Visit Example</a>

/* CSS*/
/* Unvisited link */
a:link {
  color: blue;
  text-decoration: none;
}

/* Visited link */
a:visited {
  color: purple;
}

/* Hovered link (comes after :link and :visited) */
a:hover {
  color: orange;
  text-decoration: underline;
}

/* Active link (comes after :hover) */
a:active {
  color: red;
}

CSS Styling Lists

• <ul> → unordered (bullets).

• <ol> → ordered (numbers).

List Properties

• list-style-type → Defines the type of bullet or number.
  Example values: disc, circle, square, decimal

• list-style-image → Uses a custom image as the list marker.
  Example value: url("star.png")

• list-style-position → Sets whether the marker is inside or outside the content flow.
  Example values: inside, outside

• list-style → Shorthand to set type, image, and position in one line.
  Example: circle inside

Example Code

<h3>Unordered List Example</h3>
<ul class="custom-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h3>Ordered List Example</h3>
<ol class="custom-ordered">
  <li>Frontend</li>
  <li>Backend</li>
  <li>Database</li>
</ol>

/* Unordered list with custom style */
.custom-list {
  list-style-type: square;         /* Bullet shape */
  list-style-position: inside;     /* Marker inside */
}

/* Ordered list with shorthand */
.custom-ordered {
  list-style: decimal outside;     /* Numbers outside */
}

/* Example of using an image as list marker */
.custom-list li {
  list-style-image: url("star.png");
}

The CSS display Property

Controls how an element behaves in layout.

• Block-level → new line, full width (<div>, <h1>–<h6>, <p>).

• Inline → no new line, only necessary width (<span>, <a>, <img>).

What Are the Different Position Values in CSS?

The position property defines how elements are placed on a webpage.

• static → default, normal flow.

• relative → relative to itself.

• absolute → relative to nearest ancestor.

• fixed → relative to viewport.

• sticky → switches between relative & fixed.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Position Example</title>
  <style>
    .box {
      width: 120px;
      height: 120px;
      margin: 15px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    /* 1. static (default) */
    .static {
      background: steelblue;
      position: static; /* Normal document flow */
    }

    /* 2. relative */
    .relative {
      background: seagreen;
      position: relative; 
      top: 20px;  /* Moves 20px down from its normal place */
      left: 20px; /* Moves 20px right */
    }

    /* 3. absolute */
    .absolute-container {
      position: relative; /* Parent for absolute positioning */
      height: 200px;
      border: 2px dashed gray;
      margin: 20px 0;
    }
    .absolute {
      background: tomato;
      position: absolute; 
      top: 20px;   /* 20px from top of container */
      right: 20px; /* 20px from right of container */
    }

    /* 4. fixed */
    .fixed {
      background: purple;
      position: fixed; 
      bottom: 20px; /* Always 20px from viewport bottom */
      right: 20px;  /* Always 20px from viewport right */
    }

    /* 5. sticky */
    .sticky {
      background: orange;
      position: sticky; 
      top: 0; /* Sticks to top when scrolling */
    }
  </style>
</head>
<body>
  <h2>CSS Position Examples</h2>

  <div class="box static">Static</div>
  <div class="box relative">Relative</div>

  <div class="absolute-container">
    <div class="box absolute">Absolute</div>
  </div>

  <div class="box sticky">Sticky (Scroll me)</div>

  <p style="height: 1000px;">
    Keep scrolling to see how <b>sticky</b> and <b>fixed</b> behave differently.
  </p>

  <div class="box fixed">Fixed</div>
</body>
</html>

How Does the CSS z-index Property Work?

Controls stack order of positioned elements.

• Higher z-index = on top.

• Lower (or negative) = behind.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS z-index Example</title>
  <style>
    .container {
      position: relative;
      height: 250px;
      border: 2px dashed gray;
      margin-top: 20px;
    }

    .box {
      width: 150px;
      height: 150px;
      position: absolute; /* z-index only works on positioned elements */
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
    }

    .box1 {
      background: steelblue;
      top: 30px;
      left: 30px;
      z-index: 1; /* Below box2 */
    }

    .box2 {
      background: tomato;
      top: 60px;
      left: 60px;
      z-index: 2; /* On top of box1 */
    }

    .box3 {
      background: seagreen;
      top: 90px;
      left: 90px;
      z-index: 0; /* Behind both */
    }
  </style>
</head>
<body>
  <h2>CSS z-index Example</h2>
  <p>Higher <code>z-index</code> = appears on top.</p>

  <div class="container">
    <div class="box box1">z-index: 1</div>
    <div class="box box2">z-index: 2</div>
    <div class="box box3">z-index: 0</div>
  </div>
</body>
</html>

How it works:

• box2 (z-index: 2) is on top.

• box1 (z-index: 1) is below it.

• box3 (z-index: 0) is behind both.

This creates a stacking order like layers in Photoshop.

Why Is the CSS max-width Property Important?

• Defines the maximum width of an element.

• Crucial for responsive layouts.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>max-width Example</title>
  <style>
    /* Problem: Fixed width (not responsive) */
    .fixed-box {
      width: 600px;
      background: lightcoral;
      color: white;
      padding: 20px;
      margin: 10px auto;
    }

    /* Solution: max-width (responsive) */
    .responsive-box {
      max-width: 600px;  /* Will shrink on smaller screens */
      background: seagreen;
      color: white;
      padding: 20px;
      margin: 10px auto;
    }
  </style>
</head>
<body>
  <h2>CSS max-width Example</h2>

  <div class="fixed-box">
    I use <b>width: 600px;</b> → On small screens, I overflow. 
  </div>

  <div class="responsive-box">
    I use <b>max-width: 600px;</b> → I resize nicely on small screens.
  </div>
</body>
</html>

Why it matters:

• width: 600px; → Forces the element to always be 600px wide (not mobile-friendly).

• max-width: 600px; → Makes it responsive. It never grows bigger than 600px, but will shrink on smaller screens.

CSS Table Borders

• Use border shorthand → border: 2px solid black;.

Collapsing Borders

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Borders Example</title>
  <style>
    table {
      width: 60%;
      margin: 20px auto;
      border-collapse: collapse; /* Merge borders */
    }
    th, td {
      border: 2px solid black; /* Table border */
      padding: 10px;
      text-align: center;
    }
    th {
      background: lightblue;
    }
  </style>
</head>
<body>
  <h2>CSS Table Borders Example</h2>

  <table>
    <tr>
      <th>Language</th>
      <th>Level</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>Beginner</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Intermediate</td>
    </tr>
  </table>
</body>
</html>

border-collapse: collapse; → Ensures borders don’t double up.

Final Note

Practice > Reading
Start implementing each CSS property on small HTML examples. Observe changes instead of memorizing.

At first, you may feel confused — that’s normal.
With consistent practice, you’ll gain confidence and start combining properties creatively for real-world layouts.