In this Career Karma article roundup, we’re covering all the best posts from the Career 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 into what 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 is 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.
Using CSS Selectors
Take a deep dive into using 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 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. This tutorial takes a look at how float works with interactive tutorials.
Display
The CSS 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
The CSS 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
The padding 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
The CSS 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 the CSS 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
The 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 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 full beginner’s guide to learning CSS on the Career Karma blog the next time you encounter a CSS problem!
Top comments (0)