References: Headings, Paragraphs

Reference: w3schools.com/html/html_formatting.asp

Live Demo:

Reference: w3schools.com/html/html_links.asp

Reference: w3schools.com/html/html_images.asp

Reference: w3schools.com/html/html_lists.asp

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Reference: w3schools.com/html/html_tables.asp

Tables are used to display data in rows and columns. Use `<thead>` for headers and `<tbody>` for the main data.

Code Example:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td>A</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>B+</td>
    </tr>
  </tbody>
</table>

Live Demo:

These are general properties used for styling text and layout, outside of the core Box Model dimensions.

The Box Model is the most important concept in CSS. Every HTML element is treated as a rectangular box, and this model explains how space is added around its content. Understanding this is key to sizing and positioning elements.

The Content is the actual text or image.
The Padding is the space inside the element, between the content and the border.
The Border is the line that surrounds the padding and content.
The Margin is the clear space outside the element, separating it from other elements.

Box Model Properties

CSS properties rely on units of measurement to define size, distance, and spacing. These units are split into two main types: absolute units (fixed size) and relative units (based on another element or the viewport).

The position property specifies the type of positioning method used for an element. This is key for creating complex layouts and overlapping elements.

Live Demo:

Scroll inside the demo container to see sticky in action. The fixed box is positioned relative to the whole browser window.

Example Code:

/* The parent container *must* be positioned for 'absolute' to work predictably */
.container {
  position: relative;
}

.box-relative {
  position: relative;
  top: 10px;
}

.box-absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.box-fixed {
  position: fixed;
  bottom: 10px;
}

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

Used when display: flex; is set on a container. For a good flex property reference: CSS-Tricks Flexbox Guide.

Live Demo:

Use the dropdowns to see how the flex properties change the layout of the blue boxes inside the dashed container.

Example Code:

/* The Parent Container */
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 300px;
}

/* The Child Items */
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

These properties allow you to set images or color gradients as the background of any element and control how they are displayed and scaled.

Demo:

Filters let you apply visual effects to elements, like blur, saturation, or color shift. They are often used for image effects or interactive elements.

Demo: Hover over the image to apply a grayscale and blur filter, and a subtle drop-shadow effect.

Transitions create a smooth, timed animation when a CSS property value changes (e.g., on hover or active states).

Demo: Hover over the box to see its background color and size smoothly transition over 0.5 seconds.

Animations allow complex, multi-step motion without user interaction, defined using @keyframes.

Demo: This box is continuously running a simple bounce animation.

Centering elements

To center a block element (e.g., a <div>) that has a defined width, you use margins, as explained in the Box Model section. For inline elements (like <a> or <img>), you need to set display: block; first.

selector {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

Select Child Elements (Descendant Selector)

Use a space between two selectors to target an element (the child) that is nested anywhere inside another element (the parent). This is useful for styling elements in a specific area of your page without using a class name on the child.

/* Styles any <h1> that is inside an element with class "my-class" */
.my-class h1 { 
                    color: red; 
                    border-bottom: 2px solid red;
                }

Remove default margin

Elements like <h1> and <p> have default top/bottom margin. Set margin: 0px; to remove it.

h1 {
    margin: 0px;
}

Give multiple selectors the same style

Separate selectors with a comma to apply the same styles to all of them.

h1, #title, p {
    background-color: red;
}

Change look when element is hovered

Use the selector:hover pseudo-class to apply different styles when the element is hovered over with a mouse pointer.

a:hover {
                    color: red;
                    text-decoration: underline;
                }