CSS (Cascading Style Sheets) with AI Copilot

CSS, or Cascading Style Sheets, is what makes the web beautiful. While HTML provides the structure of a webpage, CSS defines its look and feel — colors, spacing, typography, layouts, and much more. Without CSS, all web pages would look like plain, unstyled documents.

In this lesson, we’ll explore core CSS syntax and selectors, layout techniques using Flexbox and CSS Grid, responsive design with media queries, and how to style React components using CSS modules and styled-components.

Core CSS syntax and selectors

CSS syntax basics

A CSS rule consists of a selector and a set of declarations wrapped in curly braces.

1
2
3
selector {
  property: value;
}

Example:

1
2
3
4
h1 {
  color: blue;
  font-size: 32px;
}

Here, h1 is the selector, and color and font-size are properties with their values.

Types of selectors

• Element selector: Targets HTML tags directly (p, h1, a).
• Class selector: Targets elements with a specific class (.container).
• ID selector: Targets a specific element by its ID (#main-header).
• Attribute selector: Targets elements with certain attributes (input[type="text"]).
• Descendant selector: Targets elements inside another element (nav ul li).

Example combining selectors:

1
2
3
4
.container p {
  line-height: 1.5;
  color: #333;
}

Copilot prompt example:

1
// Write CSS to style all buttons with a blue background, white text, and rounded corners

Flexbox and CSS Grid layout

Flexbox

Flexbox is a one-dimensional layout system, ideal for arranging elements in rows or columns.

Example of a Flex container:

1
2
3
4
5
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

• display: flex; makes the container a flexbox container.
• justify-content aligns items horizontally (main axis).
• align-items aligns items vertically (cross axis).

Example HTML:

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

CSS Grid

Grid is a two-dimensional layout system, useful for creating complex layouts with rows and columns.

Example of a grid container:

1
2
3
4
5
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

• display: grid; enables Grid layout.
• grid-template-columns defines the number and size of columns.
• gap sets space between grid items.

Example HTML:

1
2
3
4
5
6
<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Copilot prompt example:

1
// Create a CSS Grid layout with two rows and three columns, with a gap between items

Responsive design with media queries

Responsive design means your website looks and works well on all devices, from large desktop monitors to small mobile screens.

Media queries allow you to apply different CSS rules based on screen size or other device properties.

Basic media query example:

1
2
3
4
5
6
7
8
9
.container {
  width: 80%;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

In this example, .container has a width of 80% on large screens, but on screens narrower than 768px, it stretches to 100%.

Common breakpoints:

• 1200px and above: Large desktops
• 992px to 1199px: Desktops and laptops
• 768px to 991px: Tablets
• Below 768px: Mobile devices

Copilot prompt example:

1
// Write a media query to make an image full width on screens smaller than 600px

Using CSS modules or styled-components in React

When working with React, you have several options for styling components. The two most popular approaches are CSS modules and styled-components.

CSS modules

CSS modules allow you to write CSS that is scoped to a particular component, preventing styles from leaking globally.

How it works:

1. Create a CSS file with a .module.css extension.

1
2
3
4
5
6
7
8
/* Button.module.css */
.button {
  background-color: teal;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

1. Import it in your component.

1
2
3
4
5
6
7
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

Styled-components

Styled-components is a library that lets you write CSS directly in your JavaScript files using template literals.

Installation:

1
npm install styled-components

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: purple;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    background-color: darkviolet;
  }
`;

function App() {
  return <StyledButton>Click Me</StyledButton>;
}

export default App;

Benefits of using styled-components:

• Encapsulates styles to individual components.
• Supports dynamic styling using props.
• Easier to manage when styles depend on component logic.

Copilot prompt example:

1
// Create a styled-component for a card with a shadow, padding, and rounded corners

Final thoughts

CSS is a skill for creating modern, beautiful, and user-friendly websites. Understanding core syntax and selectors lays the groundwork, while mastering Flexbox and CSS Grid allows you to build advanced layouts.

Media queries make your site responsive and accessible across devices. Finally, using CSS modules and styled-components with React helps you write modular, maintainable styles that scale as your application grows.

Experiment with these techniques using Copilot prompts in your code editor. Prompt-driven coding can help you explore variations quickly and learn through hands-on practice.

In the next lesson, we’ll dive deeper into JavaScript fundamentals and ES6+ features that power modern web interactivity and tie everything together with React.