Tag: CSS

css intermediate html

How to add an icon to an HTML element using the ::before pseudo class in CSS

Monday, March 27, 2023

How to add an icon using the CSS ::before pseudo class? In this article, we go in-depth in answering this using several different approaches.

html css beginners basics

CSS position sticky

Friday, September 25, 2020

Position:sticky in CSS; what is it, how it works, and a few practical examples can be found in this CSS tutorial.

css javascript beginners

Replace all instances of a CSS class using vanilla JS

Saturday, March 7, 2020

How to use vanilla JavaScript to replace all instances of a CSS class with another CSS class on a web page? That's what we'll learn in this article.

javascript css

Dynamically change styles using JavaScript

Sunday, November 24, 2019

In this tutorial, we'll work with events to change the background color of an element dynamically, using JavaScript.

html css beginners basics

HTML and CSS Basics, part 24: CSS tips and tricks for beginners

Friday, September 27, 2019

This article shows 10 practical tips and tricks in CSS for beginners and junior frontend developers. We cover these topics: centering a div, why not override framework CSS directly, how to make narrow containers in Bootstrap, which HTML element to use to style navigation, what are over-qualified CSS selectors, and more!

html css beginners basics

HTML and CSS Basics, part 23: CSS grid

Thursday, September 26, 2019

What is the difference between CSS flexbox and CSS grid? How to use the former and the latter? Learn all of this and more in our in-depth introductory article on using CSS grid.

html css beginners basics

HTML and CSS Basics, part 22: CSS variables

Wednesday, September 25, 2019

This tutorial is a genle introduction to CSS variables. We'll start with a CSS example layout that uses no variables, and we'll convert it to a layout that uses CSS variables. During this process, we'll learn why CSS variables are so useful.

html css beginners basics

HTML and CSS Basics, part 21: CSS animations and transitions

Wednesday, September 25, 2019

Learn the basics of using CSS transitions and animations, what makes them similar, and what makes them different. Additionally, learn the basic rules of using CSS transitions and animations in this tutorial.

html css beginners basics

HTML and CSS Basics, part 20: Building a layout with Bootstrap

Wednesday, September 25, 2019

How to build a simple layout with Bootstrap 4? We'll learn all about it in this tutorial, the twentieth in the HTML and CSS basics article series.

html css beginners basics

HTML and CSS Basics, part 19: Building a layout with our micro CSS framework

Wednesday, September 25, 2019

In this tutorial, we'll continue learning HTML and CSS layout techniques by using the micro CSS framework we've built in the previous tutorial. We'll use our own micro CSS framework to build a simple HTML and CSS-powered website layout.

html css beginners basics

HTML and CSS Basics, part 18: Build your own micro CSS framework

Tuesday, September 24, 2019

This practical tutorial shows how to build your own CSS micro-framework. This tutorial is aimed at understanding the thinking behind popular CSS frameworks, and realizing that it's not some magical thing - it's just a collection of reusable HTML and CSS code snippets.

html css beginners basics

HTML and CSS Basics, part 17: Introduction to SCSS

Monday, September 23, 2019

In this introduction to SCSS and Sass, we'll see how to easily get started with these supersets of CSS and what are the benefits of using them. We also learn about how to use SCSS in our computer, and about using Node-sass.

html css beginners basics

HTML and CSS Basics, part 16: Frontend CSS frameworks

Saturday, September 21, 2019

In this tutorial, we go through an overview of a few very popular frontend frameworks: Bootstrap, Bulma, and Material Design Light.

html css beginners basics

HTML and CSS Basics, part 15: Column-based CSS layouts

Saturday, September 21, 2019

What are column-based CSS layouts and what led to them? What problems do they solve, and how to build a column-based CSS layout from scratch? That's what we'll learn in this tutorial. We'll finish the tutorial by learning how to make our column-based CSS layouts responsive.

html css beginners basics

HTML and CSS Basics, part 14: CSS resets and Emmet

Friday, September 20, 2019

Emmet helps us write HTML and CSS code faster. In this tutorial, we learn the basics of Emmet alongside CSS resets.

html css beginners basics

HTML and CSS Basics, part 13: Converting our first layout into a responsive one

Friday, September 20, 2019

In this tutorial we'll convert a static HTML layout into a responsive one. We'll introduce flexbox layout in CSS, and we'll make our flexbox-based layout responsive using media queries in CSS.

html css beginners basics

HTML and CSS Basics, part 12: Responsive web layouts with media queries

Thursday, September 19, 2019

With media queries, we can build layouts that respond to devices they're viewed on. In this tutorial, we'll see how media queries work, and how to get started using them in our CSS.

html css beginners basics

HTML and CSS Basics, part 11: Building the first layout

Thursday, September 19, 2019

In this tutorial, we'll build our first HTML and CSS layout. We'll learn about mocking up a web page, adding it structure using HTML, and styling it with CSS. We'll use the calc function in CSS, and style the header, sidebar, main area, and a footer.

html css beginners basics

HTML and CSS Basics, part 9: Images and floats in CSS

Tuesday, September 17, 2019

In this tutorial we learn all about images and floats in CSS. We see how floats were used in the past to build layouts, and we learn that it's not such a good idea today, because we have better layout techniques at our disposal. Additionally, we learn that images are inline elements, and we learn how to clear floats.

html css beginners basics

HTML and CSS Basics, part 10: CSS selectors and CSS targeting revisited

Tuesday, September 17, 2019

Learn about the most commonly used CSS selectors, and the role of CSS specificity in how the browser determines what CSS selectors to apply to a part of a web site.

html css beginners

All the CSS selectors

Tuesday, September 17, 2019

All the CSS selectors with examples are listed in this one single article. Learn about more than 35 CSS selectors in this ultimate list of CSS selectors, sure to cover any CSS targeting use case.

html css beginners basics

HTML and CSS Basics, part 8: Relative, absolute, fixed, and sticky positioning

Monday, September 16, 2019

In this tutorial we'll examine the differences between relative, absolute, and fixed positioning, and what happens when we position a parent element relatively, and a child element absolutely in our HTML layouts.

html css beginners basics

HTML and CSS Basics, part 7: CSS positioning

Sunday, September 15, 2019

What is CSS positioning about? How does relative positioning work with top, right, bottom, and left values specified? Find the answers to these questions in the seventh article in our HTML and CSS basics article series.

html css beginners basics

HTML and CSS Basics, part 6: the box model

Saturday, September 14, 2019

What is the box model in CSS and how to preview it in our browser's developer tools? This tutorial answers these questions. Additionally, we look at how to controll the box model using CSS, and how to specify individual paddings and margins to our HTML elements.

html css beginners basics

HTML and CSS Basics, part 5: block vs inline elements

Friday, September 13, 2019

In the fifth article in our series titled HTML and CSS basics, we discuss the interplay between display property and block-level and inline HTML elements.

html css beginners basics

HTML and CSS Basics, part 4: controlling document flow via display property

Friday, September 13, 2019

We can control the document flow of HTML documents using the display property in CSS. This allows us to swtich block-level elements to inline elements, and vice-versa. In this tutorial, we'll see exactly how this is done.

html css beginners basics

HTML and CSS Basics, part 3: CSS element selectors VS class selectors

Thursday, September 12, 2019

How to style block-level HTML elements? How to style them using CSS classes? We discuss these questions in the third article in our HTML and CSS basics article series. We conclude this tutorial with the benefits of using CSS classes over CSS element selectors.

html css beginners basics

HTML and CSS Basics, part 2: normal document flow, block elements, inline elements

Tuesday, September 10, 2019

In the second article of our HTML and CSS basics, we'll learn about normal document flow of web pages, as well as the differences between block HTML elements and inline HTML elements.

html css beginners basics

HTML and CSS Basics, part 1: whitespace, HTML elements, and CSS selectors

Tuesday, September 10, 2019

We'll begin learning HTML and CSS basics by learning about whitespace, HTML elements, and CSS selectors. We'll learn how HTML and CSS work together to build web pages.

html css javascript beginners

Table border css

Friday, October 19, 2018

In this quick tip tutorial, we see how easy it is to add a border to a table HTML element using CSS, in all the different ways.

Feel free to check out my work here: