CSS - Basic CSS Part 1

May 25, 2026 3:00pm UTC (Check your timezone)

Theory Workshop

Instructors: Jess, Carmen, and Eda

Basic CSS

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

What Is CSS: What Is CSS, and What Is Its Role on the Web?

CSS (Cascading Style Sheets) is a markup language to apply styles to HTML. With CSS, we are able to separate the content from its visual presentation.

A common analogy is a webpage as a house. In this analogy, HTML would be the foundation and structure, and CSS would be the paint and decorations.

To apply styles to HTML elements, we select those elements using CSS.

CSS also allows us to create responsive designs so that our websites can look good on any device independent of screen size.

Since styles are cascading, it means they can be overridden or inherited.

We can keep our styles in a separate file using external stylesheets which helps with modularity and maintainability of our websites.

What Is CSS: What Is the Basic Anatomy of a CSS Rule?

We declare styles for HTML elements using what is called a CSS rule. It has two parts:

Some of the basic selectors are type selectors, class selectors, and id selectors.

For example, a selector can be a type selector, such as button. An example for property can be background-color, and the value, purple:

1button {
2  background-color: purple;
3}

Property names are followed by a colon (:), and each declaration ends with a semicolon (;).

All id selectors start with a hash symbol (#). All class selectors start with a dot (.).

We can apply a style to multiple elements, separating them with a comma:

1#title,
2.subheading {
3  color: navy;
4}

What Is CSS: What Is the Meta Viewport Element Used For?

The meta viewport element is a special HTML meta element to instruct the browser to control the dimensions and scaling of a page on different devices. In other words, it instructs the browser on how the viewport should be sized. It’s very important for making our web pages responsive.

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

Here’s what each part of the value of content means:

Without this element, the browsers usually render the pages in desktop screen width and scale it down, which is not easily readable for small screens.

Since this element allows us to control the zooming, we should avoid using user-scalable=no like this:

1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

As many users rely on zoom for better readability, we should ensure that our pages can stay responsive.

What Is CSS: What Are Some Default Browser Styles Applied to HTML?

Default browser styles (“user-agent styles”) provide basic formatting and styles to HTML elements. They can vary from browser to browser.

Some examples are:

What Is CSS: What Are Inline, Internal, and External CSS, and When Should You Use Each One?

We can apply CSS to our page usually in three ways:

Inline CSS is written on an HTML element using the style attribute.

1<p style="color: green;">This is an inline-styled paragraph.</p>

This option takes precedence, and overrides other styles for the element. We should avoid using inline CSS for keeping our structure and styles separate and our code maintainable.

Internal CSS is written using style tags inside the head tags in HTML.

 1<head>
 2  <style>
 3    p {
 4      color: blue;
 5    }
 6  </style>
 7</head>
 8<body>
 9  <p>This paragraph is styled using internal CSS.</p>
10</body>

It can be useful for single-page websites when the styles are not going to be reused elsewhere. But it’s still not the best option in terms of modularity and maintainability as it mixes HTML and CSS in one file.

External CSS is written in a separate file with the extension .css that is linked to the HTML document with the link element inside the head tags.

1<head>
2  <link rel="stylesheet" href="styles.css">
3</head>
4<body>
5  <p>This paragraph is styled using external CSS.</p>
6</body>

In this example, styles.css can include:

1p {
2  color: red;
3}

It’s ideal for reusability and to maintain a consistent style across pages.

What Is CSS: How Do Width and Height Work?

The width and height properties control the dimensions of elements. The values can be in different units such as pixels (px), percentages (%), viewport units (vw, vh), etc.

When it’s not specified, the default width and height are set to auto. In that case, browser determines it based on the content, the parent element and display type.

The min-width and min-height properties specify the minimum width and height an element can be, so that it’s not shorter than the set value.

If min-width or min-height are larger than width and height, they will override those values. For example, even though the width and height are set to 50px, the div element will have 100px width and height as specified by min-width and min-height elements:

 1<head>
 2  <style>
 3    .box {
 4      width: 50px;
 5      min-width: 100px;
 6      height: 50px;
 7      min-height: 100px;
 8      background-color: lightcoral;
 9    }
10  </style>
11</head>
12<body>
13  <div class="box"></div>
14</body>

The max-width and max-height properties specify the maximum width and height an element can be, regardless of the content size.

If max-width or max-height are smaller than width and height, they will override those values. For example, even though the width and height are set to 200px, the div element will have 150px width and height as specified by max-width and max-height elements:

 1<head>
 2  <style>
 3    .box {
 4      width: 200px;
 5      max-width: 150px;
 6      height: 200px;
 7      max-height: 150px;
 8      background-color: lightgreen;
 9    }
10  </style>
11</head>
12<body>
13  <div class="box"></div>
14</body>

What Is CSS: What Are the Different Types of CSS Combinators?

With CSS combinators, we can select elements based on their relationship to other elements.

The descendant combinator, represented by a single space ( ), character helps us select elements that are matched by the second selector if they have an ancestor element matching the first selector:

1<link rel="stylesheet" href="styles.css">
2
3<figure>
4  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Relaxing Cat">
5  <figcaption>A relaxing cat with a border</figcaption>
6</figure>
1figure img {
2  border: 4px solid red;
3}

In this case, border will be applied to the img element.

The child combinator, represented by the character >, helps us select elements that are direct children of the specified parent element.

 1<link rel="stylesheet" href="styles.css">
 2
 3<div class="container">
 4  <p>First</p>
 5  <div>
 6    <p>Second</p>
 7  </div>
 8  <div>
 9    <p>Third</p>
10  </div>
11</div>
1.container > p {
2  color: blue;
3}

In this case, the color will be applied only to the paragraph with the text First because it’s the only direct child of the div with the class container.

The next-sibling combinator, represented with the character +, helps us select the element that immediately follows a specified sibling element.

1<link rel="stylesheet" href="styles.css">
2
3<figure>
4  <img
5    src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
6    alt="A cute orange cat lying on its back."
7  />
8  <figcaption>A cute orange cat lying on its back.</figcaption>
9</figure>
1img + figcaption {
2  border: 4px solid black;
3}

In this case, the border will be applied to the figcaption element.

The subsequent-sibling combinator, represented by the character ~, helps us select the elements that immediately follow a specified sibling element.

1<link rel="stylesheet" href="styles.css">
2
3<div class="container">
4  <h2>Subheading</h2>
5  <p>First paragraph.</p>
6  <p>Second paragraph.</p>
7  <p>Third paragraph.</p>
8  <p>Another paragraph element</p>
9</div>
1h2 ~ p {
2  color: green;
3}

In this case, the color will be applied to all the paragraph elements following h2.

What Is CSS: What Is the Difference Between Inline and Block-Level Elements in CSS?

An HTML element is either an inline or block-level element. This affects how it’s displayed on the page.

Block-level elements:

Some example block-level elements are:

Inline elements:

Some example inline elements are:

What Is CSS: How Does Inline-Block Work, and How Does It Differ from Inline and Block Elements?

Aside from inline and block elements, there are also inline-block elements.

Like inline elements, they flow alongside the other content and don’t start on a new line. But unlike inline elements, they can have their width and height specified. That is, we can control the size of an inline-block element.

What Is CSS: What Are Margins and Padding, and How Do They Work?

Margins are useful for defining layout structure. With margins, we can control the space outside an element and separate it from other elements.

Paddings allow us to control the space inside an element. They improve readability and provide better aesthetic appeal.

The margin property is a shorthand to define the properties margin-top, margin-right, margin-bottom and margin-left. (It goes clockwise.)

1p {
2  margin: 10px 5px 20px 4px;
3}

In this case, the p element will have 10px margin from the top, 5px margin from the right, 20px margin from the bottom, and 4px margin from the left. If we are to write it separately, it might look like this:

1p {
2  margin-top: 10px;
3  margin-right: 5px;
4  margin-bottom: 20px;
5  margin-left: 4px;
6}

If the top and bottom, left and right will have the same value, the shorthand can include just two values:

1p {
2  margin: 10px 5px;
3}

In this case, the p element will have 10px margin from the top and the bottom, and 5px margin from the left and the right.

The padding property is also very similar to margin. It’s a shorthand to define the properties padding properties are padding-top, padding-right, padding-bottom and padding-left. (It also goes clockwise.)

Note that the padding of an element is the space between its content and its border.

1section {
2  padding: 8px 4px;
3}

In this case, the section element will have 8px padding from the top and the bottom, and 4px padding from the left and the right.

Design a Cafe Menu

We’ll take a look at this workshop to practice the basics of CSS!