_

Introduction

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. It is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS allows you to control the layout, colors, fonts, and overall visual appearance of web pages.

CSS contains a wide range of properties for styling elements, such as margin, padding, font-size, and color, and it supports various selectors and combinators to target specific elements in a document. The flexibility and power of CSS can be extended in different contexts, including:

What you should already know

This guide assumes you have the following basic background:

HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two fundamental technologies for creating web pages. While they work closely together, they serve different purposes and have distinct characteristics.

HTML provides the structure and content of a web page, using a set of markup elements to define headings, paragraphs, links, images, and other content. HTML uses a tag-based syntax where elements are enclosed in angle brackets, such as h1, p, and img. This markup creates the document's structure and organizes its content into a hierarchy.

In contrast, CSS is used for styling and layout. It applies visual and design rules to HTML elements, controlling aspects like color, font, spacing, and positioning. CSS employs selectors to target HTML elements and apply styles through a set of properties, such as color, font-size, and margin. Unlike HTML, which defines content, CSS enhances the presentation and user experience.

While HTML is concerned with the content and structure of a page, CSS deals exclusively with how that content is displayed. HTML elements can be styled with CSS by linking external style sheets or embedding styles within the HTML document. CSS provides flexibility with its box model, layout techniques, and responsive design capabilities, enabling developers to create visually appealing and adaptable web pages.

HTML and CSS complement each other by separating content from presentation. HTML provides the foundational structure, while CSS adds the styling and layout, allowing for a clear distinction between a web page's content and its visual design.

Margin

To get started with understanding margins in CSS, let’s create a simple example. This will help you see how margins affect the spacing around elements.

In your CSS file, write the following code:

          
  .box {  
    width: 200px; 
    height: 100px;  
    background-color: #4E4E4E;  
    margin: 20px; 
  }

This code defines a .box class with a width of 200px, a height of 100px, a background-color, and a margin of 20px on all sides. The margin creates space around the .box element, pushing it away from other elements and the edges of its container.

Apply the .box class to an HTML element and view the result in your browser to see the margin effect:

          
  <div class="box"></div>
Padding

To get started with understanding padding in CSS, let’s create a simple example. This will help you see how padding affects the space within elements.

In your CSS file, write the following code:

          
  .box {
    width: 200px;
    height: 100px;
    background-color: #4E4E4E;  
    padding: 20px;
  }

This code defines a .box class with a width of 200px, a height of 100px, a background-color, and padding of 20px on all sides. The padding creates space inside the .box element, between its border and its content. This means the content inside the box will have additional space around it, pushing the content inward from the edges of the box.

Apply the .box class to an HTML element and view the result in your browser to see the padding effect:

          
  <div class="box">Content inside the box</div>

Select the CSS and HTML in your editor and refresh your browser to observe how the padding impacts the layout and the spacing within the element!

Custom Properties (Variables)

To get started with understanding CSS custom properties (variables), let’s create a simple example. This will help you see how variables can simplify your styling and make it easier to manage colors, sizes, and other values.

In your CSS file, write the following code:

          
  :root {
    --primary-color: #3498db;   
    --padding-size: 20px;
  }

  .box {
    width: 200px;
    height: 100px;
    background-color: var(--primary-color);   
    padding: var(--padding-size);
  }

This code defines two CSS custom properties (variables) in the :root pseudo-class: --primary-color and --padding-size. The .box class then uses these variables to set the background-color and padding. Using variables allows you to easily change the values in one place, which automatically updates all instances where the variable is used.

Apply the .box class to an HTML element and view the result in your browser to see the effect of the custom properties:

          
  <div class="box">Content inside the box</div>

Select the CSS and HTML in your editor and refresh your browser to observe how the custom properties impact the styling of the element. Try changing the values of the variables to see how it updates the design throughout your stylesheet!

Flexbox Layout

To get started with understanding Flexbox in CSS, let’s create a simple example. This will help you see how Flexbox enables efficient layout design by distributing space and aligning items within a container.

In your CSS file, write the following code:

Apply the .box class to an HTML element and view the result in your browser to see the effect of the custom properties:

          
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #4E4E4E;
  }

  .item {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 10px;
  }

This code defines a .container class that uses Flexbox by setting display: flex;. The justify-content: center; property centers the items horizontally within the container, and align-items: center; centers the items vertically. The .item class represents the child elements within the container, which are styled with a width, height, and background-color.

Apply the .container class to a parent element and the .item class to child elements to see the Flexbox layout in action:

Select the CSS and HTML in your editor and refresh your browser to observe how Flexbox manages the alignment and spacing of the items within the container. Experiment with different values for justify-content and align-items to see how they affect the layout!

Grid Layout

To get started with understanding CSS Grid, let’s create a simple example. This will help you see how Grid enables precise layout design by dividing a container into rows and columns.

In your CSS file, write the following code:

          
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);    
    grid-gap: 10px;
    height: 200px;
    background-color: #4E4E4E;
  }

  .item {
    background-color: #3498db;
    padding: 20px;
  }

This code defines a .container class that uses CSS Grid by setting display: grid;. The grid-template-columns: repeat(3, 1fr); property creates a grid with three equal-width columns. The grid-gap: 10px; property adds space between the grid items. The .item class represents the child elements within the grid container, styled with a background-color and padding.

Apply the .container class to a parent element and the .item class to child elements to see the Grid layout in action:

          
  <div class="container">
    <div class="item">1</div>   
    <div class="item">2</div>   
    <div class="item">3</div>   
    <div class="item">4</div>   
    <div class="item">5</div>   
    <div class="item">6</div>   
  </div>

Select the CSS and HTML in your editor and refresh your browser to observe how CSS Grid arranges the items into a grid layout. Experiment with different values for grid-template-columns and grid-gap to see how they affect the grid structure!

Reference