Introduction

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and formatting of HTML documents.

CSS is used to style and layout web pages by altering the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

By keeping the styling separate from the HTML content, it becomes easier to update the appearance of multiple pages without modifying the underlying structure.

Prerequisites

This guide assumes you have the following background:

• General understanding of computers and the web.
• Working knowledge of basic HTML.
• Good understanding of how to create and manage files.

CSS Syntax

In CSS, selectors are used to target HTML elements that require styling. Common selectors include element selectors, class selectors, ID selectors, and attribute selectors.

          
/* Element Selector */

p {
  color: blue;
}
          
          

          
/* Class Selector */

.my-class {
  font-size: 16px;
}
          
          

          
/* ID Selector */

#header {
  background-color: #f2f2f2;
}
          
          

          
/* Attribute Selector */

input[type="text"] {
  border: 1px solid #ccc;
}
          
          

CSS properties define the various styling options, and values determine the appearance of the selected elements. Properties and values are written in pairs, separated by a colon.

          
/* Property: Value */

body {
  font-family: "Arial", sans-serif;
  background-color: #f9f9f9;
}
          
          

Box Model

• The margin is the space between the element's border and any adjacent elements. It provides the distance between one element and another.
• The border surrounds the padding and content and forms a visible boundary around the element. It can be solid, dashed, dotted, or have other styles.
• The padding is the space between the content area and the element's border. It creates an area of extra spacing around the content.
• The content area is the innermost part of the box, representing the actual content of the HTML element, such as text, images, or other media. It is determined by the width and height properties of the element.

Layout and Positioning

Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of one another or by always remaining in the same place inside the browser viewport.

The display property determines how an element should be rendered in the document flow.

          
.element {
  display: block; /* or inline, inline-block, flex, grid, etc. */
}
          
          

The position property controls the positioning of an element relative to its containing element. The top, right, bottom, and left properties determine the final location of positioned elements.

          
.element {
  position: relative; /* or absolute, fixed, sticky, static */
  top: 20px;
  left: 10px;
}
          
          

Flexbox is a layout model that provides an efficient way to align and distribute space among items in a container.

          
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
          
          

Responsive Web Design

Media queries enable developers to apply different styles based on the device's screen size and resolution.

          
@media (max-width: 768px) {
  /* Styles for smaller screens */
}
          
          

The viewport meta tag ensures that a web page scales properly on different devices.

          
meta name="viewport" content="width=device-width, initial-scale=1.0"
          
          

Reference

• All documentation found on this page is taken from MDN