Best Resources to Learn CSS, LESS, and Sass

As a web designer or developer, one should understand that having a deep understanding of CSS is imperative to creating beautiful websites. Cascading Style Sheets (CSS) is the basic of website development and design. Are you a UI designer? Take note of the importance of having the basic understandings of CSS.

There are many resources and tools out there to help you learn CSS. This post will review a few of the best ones for beginners, intermediate learners, and experts looking to find new ideas. I have compiled a list of the best resources to help you learn CSS. Whether you are looking for a place to start, or want to brush up on your skills, this blog post will give you all the information you need!

Table of Contents

What is CSS, LESS, and Sass?

CSS

CSS stands for Cascading Style Sheets, which is a language that lets you create the look and feel of your website without having to use code. It makes it easier to make changes on sites by updating only one file instead of finding and changing everything throughout the site. With CSS, you can change font size, colors, spacing between paragraphs, and so much more! Not sure how? Check out this blog post series about CSS basics.

LESS

LESS is a CSS preprocessor that allows you to write more maintainable and scalable stylesheets. It’s an alternative to the traditional method of using pure CSS, which doesn’t have any logic built into it. LESS provides features like variables, functions, mixins, nested rules and other useful tools for simplifying your code.

Sass

Sass is a CSS extension language which adds power and elegance to the basic stylesheet. The syntax allows for variables, mixins, and selector inheritance, all of which make it easier to create complex layouts without sacrificing maintainability. Sass can be compiled into standard CSS using either the command line or GUI applications such as CodeKit or Adobe Dreamweaver.

Tutorials and Courses

CSS

Build Websites from Scratch with HTML & CSS – Another course from Udemy, this one is composed of over seventy-seven lectures and eight hours of content, presenting you with a basic, yet inclusive understanding of both CSS and HTML. The course specializes in having you start creating code so you could learn through doing, and make your own functional CSS and HTML webpage at the end.
CSS Learning Path (from Beginner to Advanced) – This CSS tutorial helps you learn everything from cascading and inheritance in CSS, layouts with CSS, CSS3 components features, and SASS & LESS, among others. The learning path will bring you from the fundamentals of CSS to a live coding session.
CSS: Refactoring Style Sheets – Led by web designer and web developer Morten Rand-Hendriksen, this CSS course aims to talk about how to make stylesheets leader while keeping the stylesheets power. He will cover tools such as Gulp, Purgecss, Code, Visual Studio, Prettier, stylelint and nmp.
Learn to Code HTML & CSS – This CSS online course is an interactive guide for beginners with one goal. It strives to teach you how to create and style websites with CSS and HTML. It will outline the basics and covers all the vital elements of front-end designs as well as development.
The Complete Flexbox Tutorial – This tutorial from Udemy aims to teach you how to utilize the new CSS3 Flexbox model to make responsive web layouts efficiently. Topics from how to write quality and reusable CSS codes to wonderful responsive galleries with Flexbox are tackled in this lesson.

LESS

LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for website.

Lesscss – Getting started with configuration, basic usage of LESS.
Learning LESS – This course will guide you through the basics of setting up LESS within your workflow, understanding variables and how to use them, creating maintainable CSS using mixins and extends.

SASS

Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, and inheritance that make writing CSS faster and more robust.

Sass-lang – This site is all you need to learn about Sass and Scss.
Advanced CSS and Sass – Through this course, you will learn tons of modern CSS techniques to create stunning designs and effects.

Tools

Bourbon – Bourbon is a lightweight Sass tool set. It is pure Sass.
RSCSS – Styling CSS without losing your sanity.
ITCSS – A sane, scalable, managed CSS architecture for large UI projects.
idiomatic CSS – The following document outlines a reasonable style guide for CSS development.
CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS.
Sass Guidelines – An opinionated styleguide for writing sane, maintainable and scalable Sass.

CSS Frameworks

awsm.css – awsm.css is a CSS library for beautify semantic HTML markup without classes, attributes, etc. Use tags only.
Bonsai – Bonsai CSS is a super lightweight, fully responsive, utlity complete framework. All you need to build beautifully crafted web interfaces with ease.
Bootstrap – Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Bulma – Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.
Butter Cake – Butter Cake is a free, open source modular responsive front-end CSS framework based on Flexbox.
Chota – A micro (~3kb) CSS framework.
Cirrus – A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
Foundation – A CSS framework for any device, medium, and accessibility.
Gralig – A modest, grayish CSS library.
Halfmoon – Halfmoon is a responsive front-end framework, designed for quickly building beautiful dashboards and product pages.
Hasser CSS – A lite and flexible CSS framework (Inspired by Skeleton CSS).
Materialize – A modern responsive front-end framework based on Material Design.
Pure.css – A set of small, responsive CSS modules that you can use in every web project. Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped.
Semantic UI – Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Shorthand Framework – Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using .scss only.
Spectre.css – Lightweight (~10KB gzipped) starting point for your projects.
Strawberry – Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox’s utilities focused on making your life easier and faster with nested flexboxes.
Tachyons – Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
Tailwindcss – A utility-first CSS framework for rapid UI development.

Blog Posts

How to Center an Image Horizontally and Vertically with HTML and CSS

There are three ways to center an image in HTML by using CSS properties - text-align, margin, and flex Text-align This is a common CSS property we use to make text center-aligned in an element. We can use it for...

Add Double Quotes to a Paragraph with CSS

CSS provides a means of specifying how text should be quoted. The quote property can be used to set the type of quotation marks used, as well as the angle at which they are displayed. The quotes property in CSS...

CSS Triangular List Bullets with Arrow List Style

If you feel like the default style of a HTML list is boring, you can try applying these styles to make triangular list bullets. In this post, we're going to learn how to create CSS triangular list bullets using the...

Convert Your Website to Dark Mode with CSS filter

Have you ever been in the position where your screen brightness is so low that it becomes difficult to see what's on the screen? If this sounds like you, then dark mode might be something worth looking into. Dark mode...

CSS :is() Functional Pseudo Class Selector Examples

The :matches() pseudo-class selector is the same as the :is() pseudo-class selector. Actually, :matches() has been renamed as :is(). The :is() pseudo-class function takes a list of selectors as its parameter, and picks any element matching at least one of...

Disable selection when set html select tag as readonly

HTML select field is a common way to get user input. However, when you need the field to be read-only, it can become difficult because users can still change the value of a selection using the select field's arrow despite...

What are the differences between :first-child and :first-of-type in CSS

CSS allows developers to style an element via its pseudo-class which is used to define a special state of an element. The most common cases are visited links and hovering links. In this article we talk about the misunderstanding of 2...

What is Sass?

Cascading Style Sheets (CSS) is used by web developers to control the visual presentation of a website. Imagine CSS as the exterior covering or "skin" of a website, which determines the overall visual style. CSS is not a true programming...

Modern CSS Layouts

Super center

With place-items: center, content inside the wrapper will be placed at the middle center.

.wrapper{
	display: grid;
	place-items: center;
	height: 300px;
	width: 300px;
	margin: 100px auto;
	border: 1px solid red;
}

Responsive with flex

<div class="wrapper">
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
	</div>

.wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}
.wrapper .box-stretched {
	background: red;
	width: 100px;
	height: 100px;
	margin: 5px;
	flex: 1 1 100px;	
}

.wrapper .box-no-stretched {
	background: green;
	width: 100px;
	height: 100px;
	margin: 5px;	
	flex: 0 1 100px;
}

Sidebar with grid-template-columns

<div class="wrapper">
		<div class="sidebar">Sidebar<br>Min: 200px, Max: 30%</div>			
		<div class="content">Main content</div>					
	</div>

.wrapper{
	display: grid;
	grid-template-columns: minmax(200px, 30%) 1fr;
	height: 300px;
}

.wrapper .sidebar{
	background-color: red;
}
.wrapper .content{
	background-color: green;
}

Grid area

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

<div class="wrapper">
	<header class="box">Header</header>			
	<nav class="box">Navigation</nav>			
	<div class="sidebar box">Sidebar</div>			
	<main class="box">Main content</main>									
	<footer class="box">Footer</footer>						
</div>

.sidebar {
	grid-area: sidebar;
}
nav{
	grid-area: nav;
}
main {
	grid-area: content;
}

header {
	grid-area: header;
}
footer {
	grid-area: footer;		
}
.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 30%  70%;
	grid-template-areas:
           "header  header" "nav nav" "sidebar content" "sidebar footer";    
}

.box {
	background: #EEE;	
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;

}