In the previous video we applied CSS styles to our online store. In this video, we will explore the basic concepts of CSS, including selectors, the display property, the box model, and inline styles.

Nowadays, CSS is the only way to style HTML elements. In the past, there were other ways to style HTML elements, but they are no longer used. For example, the <font> tag was used to change the font size, color, and other properties of text. The <font> tag is no longer supported in HTML5, and it should not be used. Instead, you should use CSS to style HTML elements. CSS is an easy-to-learn language, and it is used by all modern websites.

Inline styles

Before we dive into CSS, it’s crucial to understand inline styles. Inline styles provide a method to apply styles directly to HTML elements. Here’s an example of what inline styles look like:

<p style="color: red">This is a paragraph.</p>

Let’s open it with Live Server extension for VS Code.

The style attribute can contain any CSS property. In the example, the style attribute contains the color property. The value of the color property is red. The style attribute can contain multiple CSS properties separated by semicolons. For example, let’s also add a font-size property with a value of 20px to the style attribute:

<p style="color: red; font-size: 20px">This is a paragraph.</p>

To make the text bold let’s also add a font-weight: bold property.

<p style="color: red; font-size: 20px; font-weight: bold">This is a paragraph.</p>

Adding a CSS stylesheet

To get rid of inline styles, we need to move our styles to a separate file where we can manage them.

Let’s consider an example of a simple HTML document that contains a header, some paragraphs, and a list with links. We are going to style this document using CSS.

To start using CSS, we must first create a file that will contain our CSS code, which we’ll call style.css. This file must then be linked to our HTML page. We can accomplish this by adding a link tag to the head section of our HTML page <link rel="stylesheet" href="style.css">.

To be able to see both the HTML and CSS code at the same time, I’m going to split the editor into two parts.

At this point, the HTML elements are displaying with the browser’s default styles, as we have not yet added any CSS code. Let’s fix that!

Structure of a CSS file

Every CSS file is composed of one or more CSS rules.

A CSS rule consists of a selector and a declaration block.

The initial part of a CSS rule is the CSS selector. It’s used to identify HTML elements based on their id, class, type, attribute, among other things. The selector is always followed by a declaration block. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Now we need to discover how to apply styles to multiple elements, this means we want to match css properties with html elements by their tag name, class name, id, etc, and apply styles to them. To do that we need to use CSS selectors.

To start, we’ll style the entire document by setting the font size and font family. We’ll also choose a dark gray color for the text and a light purple for the background, just like in the previous video. To do this, we’ll use an element selector (popup Element Selector).

html { /* Element Selector */
  font-size: 20px; /* the property name is font-size, and the value is 20px */
  font-family: sans-serif; /* the property name is font-family, and the value is sans-serif, sans-serif is a generic font family name */
  color: #333; /* the property name is color, and the value is #333, it's a dark gray color */
  background-color: #f5e5f8; /* the property name is background-color, and the value is #f5e5f8 */
}

It’s an element selector because it selects a tag with name HTML.

Also, you can see that while we specified the font size and font family just for the HTML element, all other elements on the page also have the same font size and font family. This is because of inheritance. Inheritance is a mechanism that allows elements to inherit properties from their parent elements. In our case, the HTML element is the parent element of all other elements on the page, so all other elements inherit properties from the HTML element. This is why all other elements have the same font size and font family as the HTML element. Some properties are inherited, and some are not. For example, the font size and font family are inherited, but the background color is not inherited. If we want to set the background color for all elements on the page, we have to specify it for each element separately. And the most complicated property in the example is the color property. It is inherited by text elements, but not by link elements.

Let’s have a fun and add more element selectors to our CSS code.

h1 { /* let's underline all h1 elements */
  text-decoration: underline;
  font-style: italic;
}

p { /* let's make all paragraphs bold */
  font-weight: bold;
}

a { /* let's make all links blue */
  color: blue;
  text-decoration: none; /* and remove the underline */
}

But it’s inconvenient to use element selectors, because a single tag can appear multiple times on a page, each instance potentially requiring a different style. To solve this problem, we can use id and class selectors. Let’s start with id selectors.

Type of selectors

ID selectors

In the example, you can see an h1 tag with an id attribute with the value some-id. We can use this id to style this h1 tag without mentioning the tag name. For instance, to make the text color brown, we would add the following CSS:

#some-id {
    color: brown;
}

Note that the id selector starts with a hash sign (#).

The id value must be unique on the page. While it’s not a major issue if you have multiple elements with the same id, it’s still considered bad practice, and it will render the HTML document invalid.

Class selectors

ID selectors are good for styling a single element, but what if we want to style multiple elements?

Every element can be marked with a class attribute. In our example we have a p tag with a class attribute with the value blue, another p tag with a class attribute with both green and alert, and a unordered list with a class attribute with the value links.

We can use these classes to style these elements without mentioning the tag names. For instance, to make the text color blue, we would add the following CSS:

.blue {
    color: blue;
}

Similarly, to make the text color green, we would add the following CSS:

.green {
    color: green;
}

Note that the class selector starts with a dot (.). Also, you can notice that the second p tag has two classes: green and alert. We can use both classes to style this p tag. Let’s add a red line to the left of every element with the alert class:

.alert {
    border-left: 5px solid red;
    padding-left: 10px; /* add some padding to the left to make the text look better */
}

But in the future you may want to change the colors of your website. And you will have to change the color names in all places where they are used. To avoid this, it’s recommended to use semantic class names. Semantic class names are class names that describe the purpose of the element, but not its appearance.

For example, instead of using the class name blue, we can use the class name primary. Instead of using the class name green, we can use the class name success.

It’s much easier to manage semantic class names, because you can change the color of your website by changing the color values in your CSS file, without changing the class names in your HTML file.

Combinators

We can use multiple selectors to style elements. For example, we can style our list items like this:

ul.links > li {
  list-style-type: "👉";
}

Here we’ve used two selectors: ul.links and li. The first selector selects all ul tags with a class attribute with the value links. The second selector selects all li tags. The >(angle bracket) symbol is called a child combinator. It selects only those li tags that are direct children of ul tags with a class attribute with the value links.

Let’s make the links bold:

ul.links a {
  font-weight: bold;
}

In this example, we’ve used two selectors: ul.links and a. The first selector targets all ul tags that have a class attribute of links. The second selector targets all a tags. The space between the selectors represents a descendant combinator. This combinator selects all a tags that are descendants (not necessarily direct children) of ul tags with a class attribute of links.

You can create more complex selectors by combining multiple selectors.

Pseudo-classes

Pseudo-classes are used to define a special state of an element. For example, the :hover pseudo-class is used to apply styles when an element is hovered over. Let’s make the links red when they are hovered over:

a:hover {
  color: red;
}

Let’s check if it works.

Another example of a pseudo-class is the :first-letter pseudo-class. It is used to select the first letter of an element. Let’s make the first letter of the heading red and bigger:

h1::first-letter {
  color: red;
  font-size: 50px;
}

There are many other pseudo-classes, like :active, :focus, :visited, first-child, last-child, nth-child, and many more. You can find a full list of pseudo-classes on the Mozilla Developer Network website.