In this Career Karma article roundup, we’re covering all the best posts from theCareer Karma blog on how to create the styling for our front end projects with CSS using industry best practices.

Cascading Style Sheets, otherwise known as CSS, was created to solve a big problem when it came to HTML: adding the interior decoration to the frame of the website. When Hypertext Markup Language (HTML) started to implement styling, it became burdensome for developers. So, CSS was created by the W3Consortium to solve the styling problem cluttering up the markup language.

If you’re looking for a progressive tutorial that walks through how to get started with CSS – this post is for you! We are featuring links from some of our resources and interactive tutorials so you can get up to speed on CSS in no time.

CSS Tutorials from Career Karma

CSS – What is it?

Cascading Style Sheets makes up one part of the trifecta that is primarily responsible for frontend web development. In this article, we take a deep dive intowhat CSS is, how it works, and how to get started when it comes to learning how to style your HTML.

CSS Syntax

The first thing you will want to start to master isCSS syntax. Here, we will talk a little bit about how selectors work and how to write declaration blocks using basic CSS Style rules.

How Do You Link CSS to HTML?

As your projects grow in size, we need to move our CSS from in between style tags in the head of our HTML Document to its own .css file. In this article, we examine how tolink CSS and HTML.

Using CSS Selectors

Take a deep dive into usingCSS Selectors by learning about class, id, universal and descendent selectors – this will pave the way for creating declaration blocks with CSS properties and values that will affect how the UI looks.

CSS Properties

Position

Theposition property in CSS affects how elements are positioned on the web page. We use the position property, for example, to fix a navigation bar up at the top of a web page so that it can be seen the entire time a user is scrolling on the page. We’ll take a look at the five different values we can use for the position property and how they are used in CSS.

Float

Let’s take a look at how to position elements on a web page by using theCSS float property. This tutorial takes a look at how float works with interactive tutorials.

Display

TheCSS display property is arguably one of the most important properties to understand in CSS. In this article, we look into the inline, inline-block, and block display values and the differences between each.

Margin

TheCSS margin property is one of the four components of the box model. Here we take a look at how to write out the margin property and what role it plays in the layout of a web page.

Padding

Thepadding property in CSS is another one of the four components of the box model. Here we take a look at how to write out the padding property and what role it plays in the layout of a web page.

Border

TheCSS border property is another one of the four components of the box model. Here we take a look at how to write out the border property and what role it plays in the layout of a web page.

Color

In this article on theCSS color property, we learn about not only color but also background color and how to use it on text blocks.

Font-Size

CSS font-size comes into play when we talk about accessibility. Here, we take a look at the different types of font-sizes we can use on text: pixels, rems, ems and vw/vh.

CSS Models

Box Model

TheCSS Box Model is the oldest layout pattern in CSS. We use properties like float, vertical-align, display: inline, display: inline-block, and display: block to map out the layout of our web page. In addition, we will take a deep dive on margin, padding, and border, and content and how those items affect the container(s) that have our elements.

Flexbox Model

TheCSS Flexbox Model uses display: flex and all the flex properties to create a more responsive layout in CSS. We’ll discover the different flex properties, including flex-direction, flex-wrap, flex-flow, justify-content and align-self, and align-items to create highly flexible, responsive layouts that help to make our lives as developers a little easier. Read on to find out more!

Media Queries

Media queries in CSS are special selectors that allow us to use CSS selectors at different breakpoints. This is especially important to implement if we want to ensure a responsive layout for our site. When you’re ready to make your site responsive, you’re well on your way to earning your membership to the CSS dojo.

This is just the beginning! Our library of programming tutorials is constantly expanding to cover more topics and functions, so be sure to check the fullbeginner’s guide to learning CSSon the Career Karma blog the next time you encounter a CSS problem!