CSS 20/20

Menu
Menu

We have a few more HTML elements to get to the 20 but let's take a break and start to look CSS to make more sense of how they work together.

We will start with by exploring 20 essential CSS properties that correspond to our 20 HTML elements. Understanding what these properties are capable of doing is crucial, but mastering CSS also involves grasping the concepts of selectors and how to store and organize your styles effectively.

Typography

  1. color: Sets the color of the text.
  2. font-family: Specifies the font of the text.
  3. font-size: Defines the size of the text.
  4. font-weight: Sets the weight (boldness) of the text.
  5. text-align: Aligns the text (left, right, center, justify).
  6. text-decoration: Adds decoration to text (underline, overline, line-through).

Background Styling

  1. background: A shorthand property for setting background colours, gradients and images.

Box Model

  1. border: Sets the border around an element.
  2. border-radius: adding rounded corners.
  3. padding: Sets the padding inside an element, creating space between the content and the border.
  4. margin: Sets the margin outside an element, creating space between the element and its neighbors.
  5. width: Sets the width of an element.
  6. height: Sets the height of an element.

Page Layout

  1. display: Sets the display behavior of an element (block, inline, flex, grid, etc.).
  2. gap: Sets the gap (gutter) between rows and columns in Flexbox and Grid layouts.

Flexbox Properties

  1. flex-wrap: Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis lines.
  2. flex-basis: Defines the initial main size of a flex item.
  3. justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).

CSS Grid Properties

  1. grid-template-columns: Defines the columns of the grid with a space-separated list of values.
  2. grid-template-rows: Defines the rows of the grid with a space-separated list of values.

Understanding these core properties will take you a long way into the wonderful world of CSS. Each property has its nuances and combined with selectors and proper organization, they give you powerful control over the presentation of your web content.