CSS Tutorial Library from Career Karma
Tags: css, codenewbie, webdev, tutorial
Published: 2020-07-10 20:36:21

_In this Career Karma article roundup, we’re covering all the best posts from the [Career Karma blog](https://careerkarma.com/blog?utm_source=Dev.to&utm_medium=Roundup&utm_campaign=September) 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 into [what CSS is](https://careerkarma.com/blog/what-is-css/), 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 is [CSS syntax](https://careerkarma.com/blog/css-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 to [link CSS and HTML](https://careerkarma.com/blog/link-css-to-html/). 


## Using CSS Selectors

Take a deep dive into using [CSS Selectors](https://careerkarma.com/blog/css-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

The [position property in CSS](https://careerkarma.com/blog/css-position/) 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 the [CSS float property](https://careerkarma.com/blog/css-float/). This tutorial takes a look at how float works with interactive tutorials. 


### Display

The [CSS display](https://careerkarma.com/blog/css-inline-block/) 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

The [CSS margin property](https://careerkarma.com/blog/css-margin/) 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

The [padding property in CSS](https://careerkarma.com/blog/css-padding/) 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

The [CSS border property](https://careerkarma.com/blog/css-borders/) 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 the [CSS color property](https://careerkarma.com/blog/css-font-color/), we learn about not only color but also background color and how to use it on text blocks. 


### Font-Size

[CSS font-size](https://careerkarma.com/blog/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

The [CSS Box Model](https://careerkarma.com/blog/css-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

The [CSS Flexbox Model](https://careerkarma.com/blog/css-flexbox/) 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](https://careerkarma.com/blog/css-media-queries/) 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 full [beginner’s guide to learning CSS ](https://careerkarma.com/blog/beginners-guide-to-css/)on the Career Karma blog the next time you encounter a CSS problem!_