CSS
Training Course

Goldaniatech image

Introduction

  • CSS (Cascading Style Sheets) is a style sheet language used to define the visual appearance of a web page.
  • It applies styles to HTML elements to change their color, fonts, margins, borders, and other properties.

For a more technical description, we can highlight that selectors are used to target specific HTML elements (or tags), which are then modified using various declarations, each consisting of a property and a value.

SCSS

However, we will focus specifically on SCSS, which is actually a simple scripting language (as opposed to CSS), featuring concepts such as functions, mixins, and variables. However, it lacks programming paradigms such as classes and is much simpler than TypeScript in that regard. Thus, it might be more difficult to learn than vanilla CSS at first, but it’s more rewarding, as you have more possibilities since it’s a programming language.

Goldaniatech image

3 Styling Approaches

In order to understand styles, I would argue that we have 3 choices when it comes to styling:

  • Vanilla CSS
  • SCSS (Sass)
  • CSS Utility Libraries

CSS libraries such as Tailwind, Bootstrap, or Bulma offer rapid prototyping and consistent design systems. The question is whether or not those should be used, and if they can actually replace vanilla CSS or SCSS. In my opinion, I firmly believe that keeping an open mind is incredibly important, and both ways are actually good for different projects.

Goldaniatech image

CSS Short History

CSS was proposed in 1994 by Håkon Wium Lie and officially released by the W3C in 1996

CSS2 followed in 1998, and CSS3 introduced modular features like Flexbox and Grid. Today, modern CSS includes advanced tools like variables, container queries, and the :has() selector.

1. Getting Started!

There are three primary methods for adding CSS to pure HTML document:

Additionally, there are more methods using frameworks such as Astro or Next.js, which I’ll cover below.

The most common method to use a stylesheet across your entire website is to use an external stylesheet with the <link> HTML tag inside the <head>.

<head>
    <link href="main.css" rel="stylesheet">
</head>

The internal method uses the <style> tag in the head for page-specific styles but is limited to a single HTML file.

Finally, the inline method applies styles directly with the <style> attribute inside any HTML elements.

In Astro, import your SCSS (or CSS) file only in Layout if you want to apply it to your layout.

1.1. User Agent Reset

A user agent reset in CSS is a technique used to create a consistent styling baseline across different browsers by overriding the default styles applied by user agents, which are the web browsers or applications that interpret HTML and CSS.

Now, there are either very simple reset, taking as much as 10 lines, but there are also very complex and long reset. I would suggest keeping it simple, up to 10 lines unless you are making an extremely complex website, using almost every existing HTML tag 😅!

Here is an example of a very basic User Agent Reset, along with an extra part for the <body>, to avoid issues.

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	line-height: 2;
	font: inherit;
}

*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
}

Web fonts

Stylesheets can include custom fonts using the @font-face at-rule or by importing them through external services like Google Fonts with the @import at-rule.

Priority

!important & !default

2. Selectors & Combinators

Selectors are fundamental building blocks in SCSS, allowing to target specific elements for styling.

3. Style Layout

SCSS provides powerful tools to manage layout and alignment with display properties such as Flexbox and Grid.

4. Transitions & Animations

SCSS animations offer a powerful way to create dynamic and engaging visual effects with minimal overloading with keyframes and transitions. With the ability to reuse animation rules through mixins, SCSS makes it easier to maintain consistency across a project while optimizing performance.

5. Media Queries

Media queries are very helpful to adjust styles based on device characteristics such as screen size, resolution, and orientation. The most common way of adding media queries is with the @media at-rule.

6. SCSS Specific Features

The true power of SCSS lies in its advanced features, which significantly enhance CSS and make writing and maintaining styles much simpler and more efficient. Personally, after using variables, nesting, and mixins in SCSS, I can’t imagine going back to vanilla CSS!

References