Front-End Tutorials: CSS basics

5 min readDec 9, 2022

These Front-End Tutorials articles will be used as my personal learning notes but at the same time as a way to distribute information to everyone interested in learning Front-End Engineering.

This blog post will try to cover the basics of CSS.

What is CSS?

CSS stands for Cascading Style Sheets and it’s what allows us to style the HTML content on a website. Without the CSS the HTML is presented as a boring document without consideration for its design.

Our CSS code is saved on a file with the .css extension and must be declared in the HTML in the <head> section as part of the HTML metadata.

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

CSS Syntax

p {
  color: blue;
}

This is an example of a CSS declaration:

p — is the selector, the way we have to select each element will have this style.
{ … } — everything inside the curly braces is the declaration block.
color: blue; — is the declaration.
color — is the property.
blue — is the value.

CSS can also be presented in-line with the HTML element:

<p style="color: blue;">This is a styled paragraph.</p>

In spite of this approach being a direct way to style an element, it is not commonly used, especially in larger projects, because it can become difficult to maintain and guarantee consistency between elements.

There is also a possibility which is to describe our styles in the HTML code inside the special element <style>:

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

Again, this method is not best practice.

Varieties of CSS Selectors

CSS selectors are used to target specific HTML elements where we want to apply some styling.

Type Selector

p {
  color: blue;
}

In the above example we are targeting all <p> elements in the page.

Universal Selector

* {
  border: 1px solid red;
}

The * makes us target every element in the page.

Class Selector

// <p class='paragraph'>Styled paragraph by class selection.</p>

.blue-paragraph {
 color: blue;
}

With the class selector we follow the syntax with a . before the name of the class: .blue-paragraph.

Since CSS classes are designed to be applied to multiple elements, we can add them to various elements to apply the same style to all of them.

ID Selector

// <p id='paragraph'>Styled paragraph by ID selection.</p>

#paragraph {
 color: blue;
}

With the ID selector we follow the syntax with a # before the name of the class: #paragraph.

Unlike Classes, IDs can only be used on one specific element across the document. This means that we can use this selector for very specific situations.

Attribute Selector

// <a href="#somewhere">Styled anchor by attribute.</a>

[href]{
   color: magenta;
}

We can target elements by their attributes. In the above case, we will target every element that has the href attribute.

// <a href="https://en.wikipedia.org/wiki/Tiger">Styled anchor by attribute.</a>
// <a href="https://en.wikipedia.org/wiki/Lion">Anchor not styled.</a>

a[href*='Tiger']{
   color: magenta;
}

The above example shows a more granular way to select by attribute where we only target the <a> elements with href attributes that contain the string Tiger.

Pseudo-class Selector

p:hover {
  background-color: lime;
}

Elements can have a different state with pseudo-class depending on things like user interaction, site navigation, and location in the document tree. We can find all the pseudo-classes available here.

The above example shows a way to change the background-color of all the <p> elements but only when hovering the mouse on them.

CSS Selectors Chaining

It’s possible to combine multiple selectors if we want for example to style every element type but only if they have a specific class, for example:

p.lime-color {
  background-color: lime;
}

In the example above, we are applying a style to every <p> element that has the class lime-color.

CSS Selectors Descendant Combinator

We can also select specific elements by providing their hierarchy order, for example:

<ul class="lime-color">
  <li>Test A</li>
  <li>Test B</li>
</ul>

-----

.lime-color li {
  background-color: lime;

In the above example we will target all the <li> elements that are descended from the element with class lime-color.

This way we can make the selection more specific because we can choose the elements in a specific context.

CSS Selectors Specificity

CSS Specificity allows to give CSS styles to elements in a specific order that could be easy to override.

This is the order from the more specific to the more generic:

ID Selector
Class Selector
Type Selector

This means that in order to make the styles easy to edit, it’s best to start by using the Type Selector first. If not possible, then use the Class Selector and only, as last resource, use the ID Selector.

Other than the above order, there is a !important tag that can be added to any CSS rules that will override any style no matter how specific it is, for example:

p {
  color: blue !important;
}

Refactor Repetitive CSS Selectors

To avoid repetitive CSS styles, we can add multiple CSS selectors to the same CSS style, for example:

h1 {
  font-family: Georgia;
}
 
p {
  font-family: Georgia;
}

-----

h1, 
p {
  font-family: Georgia;
}

In the example above, we can use the same CSS configuration on multiple CSS selectors (every <h1> and <p> elements).

Visual Rules

Font

h1 {
  font-family: Garamond;
  font-size: 18px;
  font-weight: bold;
}

font-family — Used to change the typeface of text on the webpage. Take into consideration that the selected font must be already installed on the user’s computer or downloaded with the website.
font-size — Used to change the font size. This is usually used to highlight between different parts of the webpage.
font-weight — Used to change how bold or thin the text appears.

More details about font styles can be found here.

Text

h1 {
  text-align: right;
}

text-align — align the text to the parent element. Can be used with right, left, center and justify.

More details about text styles can be found here.

Colors

h1 {
  color: red;
  background-color: blue;
}

color — the color the element will assume.
background-color — the color of the background of that element.

Background Image

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}

There is a possibility of inserting an image as the background of an element.

Thanks for reading. Hope this helps you as much as it helped me. ❤️
If you want to follow my Front-End Learning journey, follow me on Medium and Twitter.