Introduction

CSS (Cascading Style Sheets) is used to control the look and layout of web pages. It allows you to set colors, fonts, positioning, margins, and more to enhance your HTML structure.

There are three main ways to apply CSS to HTML:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS applies directly to HTML elements using the style attribute.

<element style="color: red;">Content</element>

Internal CSS

Internal CSS is written within the HTML file inside the <style> tag in the <head> section.

<style>
body {
  font-family: 'Rubik', sans-serif;
  color: black;
}
</style>

External CSS

External CSS is written in a separate file, and linked to your HTML document using the <link> tag.

<link rel="stylesheet" href="style.css">

CSS Selectors

CSS selectors target specific HTML elements for styling. There are different types of selectors:

  • Element Selector - targets elements like p or h1
  • ID Selector - targets elements by their unique ID, e.g., #header
  • Class Selector - targets elements by class, e.g., .container

CSS Box Model

The CSS Box Model defines how elements are structured. It consists of:

  • Content - The content inside the element
  • Padding - Space between the content and border
  • Border - A border surrounding the padding
  • Margin - The space outside the border
CSS Box Model

CSS Flexbox

Flexbox is a CSS layout model that helps you design flexible and responsive layouts.

  • display: flex; - Defines a flex container
  • justify-content - Aligns items along the main axis
  • align-items - Aligns items along the cross axis

CSS Grid

CSS Grid allows for two-dimensional layouts with rows and columns.

  • display: grid; - Defines a grid container
  • grid-template-columns - Specifies column structure
  • grid-gap - Adds space between grid items
We are in the development phase. More notes will be available soon.