CSS is a programming language used in a wide variety of industries and jobs. Here at Career Karma, we have compiled excellent resources and articles to help you learn CSS. You will learn about the best courses, books, and resources, as well as fundamental terminology, event lists, and exercises and quizzes. There are also in-depth guides to specific CSS protocols and practices.
Learn CSS
CSS Keyframes
Building animations is a breeze with CSS. And the fun part is that you don't need any third party frameworks or plugins. The @keyframes CSS rule is a tool we need under our belt to build these animations. @keyframes Syntax…
CSS Input Type
When we are building forms, we want to make them unique and appealing to our clients or customers. It is true that the way we present our forms makes the user-experience much better. In order to style our forms, we…
CSS Shapes
Let's go ahead and create some fun CSS shapes! Follow my Codepen for all the code. Let's do this. Rectangles and Squares All our shapes will be wrapped in a div. The most basic shape is the square and the…
CSS Background Image: Step-by-Step Guide
The CSS background image property changes the background of a website to an image. A background image is set using the background-image: url(url_of_image) property. You can specify multiple background images that overlap using the background-image property. Background images are a…
ID and Class Attributes in HTML and Their CSS Selectors
When using CSS for styling web pages, you'll often want to target certain parts of your page. One of the ways you can select one or more element(s) is by either their ID and/or Class attributes. As you go through…
CSS Font-Style
With the font-style CSS property we can style our font with a set of characteristics in order to give emphasis to our text. As always, checkout my Codepen so you can code-along with me. font-style Syntax and Options We have…
CSS Z-Index
When you are designing your layout with CSS, you'll often position elements either up/down or left/right. The z-index allows us to move elements on a 3rd dimension on the Z-axis, with a stacking effect (on top of each other). The…
CSS Font-Size: A Tutorial on Text Sizing in CSS
The CSS font-size property sets the font size of any text element on your page or website. The font-size property can be applied to any class, ID, or element that includes text content. The property accepts values in px, em,…
Use the Bootstrap Framework to Create Tabs
Tabs are a user interface (UI) element that allow us to see different panes of information without using up extra space. Just like tabs in a binder or book, they mark a placement on the page for more information and…
Using the Bootstrap Framework to Create a Modal
A modal is a window that is separate from the main window of a web page. It’s main purpose is to disable the main window from user interaction and to share information or confirm something with the user. Modal windows…
CSS Tricks – Centering an Image
Today we'll try to center a Susuwatari. These little creatures commonly referred as 'soots' like to move around a lot so we need to keep on still and center so we can take picture of one or more of them.…
CSS Colors Tutorial
When it comes to making your UI standout, there's nothing like choosing the right color pallette. With this tutorial you'll learn how easy it is to assign colors to elements, fonts, and pretty much anything as you build your UI.…
Bootstrap Card Component
Bootstrap Cards The Bootstrap card is one of its most popular components, and with good reason. They serve as a very flexible media container, and have some nice preset styling and formatting. Card content can be anything from text, images,…
How to Make a Dropdown Menu with Bootstrap
No matter if you’re making a simple one page portfolio website, a monolithic app for a huge company, a blog, or a forum, chances are you’re going to need a dropdown menu. A dropdown menu is especially useful when you…
Bootstrap Buttons
The button element is one of the more useful Hypertext Markup Language (HTML) elements in the sense that it enables the user to interact with a page. Logging in, subscribing, deleting or opening something, showing a menu, changing the color…
Learn How to Customize Checkboxes and Radio Buttons with Pure CSS
Sometimes when we create forms, we need to use checkbox and radio button inputs to collect user preferences, agreeing to terms, or demographic data. HTML input elements like checkboxes or radio buttons have a default appearance. If you would like…
What is the CSS :First-of-Type Pseudo-Class?
Sometimes when we create our CSS, we want to target a certain element. Let’s say if we had an HTML document full of <div> tags and <span> tags, but only wanted to target the first of each type to style…
CSS Background Position: What Is It and How Does It Work?
Web developers use the CSS background-position property when they need to adjust the starting position for the background image they are working with. In this article, we’ll take a look at the background-position property and how to adjust it to…
A Guide to the CSS Cursor Property
Cursors have been around since “The Mother of All Demos” where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space…
CSS Variables
As a developer, the languages I have encountered so far have had a system of pointing to something in memory and giving it a name so that I could reference it later. As a student, you may have encountered this…
CSS Specificity
The CSS Specificity concept is not only a little bit of a tongue twister (try to say it three times fast!), but it can also be a bit of a mind bender too! It’s one of the more difficult concepts…
Creating Tabs in CSS Without Using JavaScript
CSS Tabs are really great at displaying associated information in one easy-to-navigate place. They essentially look like tabbed dividers that you would see in a recipe box or a binder. Here are some examples of websites using tabbed navigation: Southwest…
When and How to Use the CSS Clearfix Hack
As coders and programmers in the generation of CSS Flexbox and CSS Grid, we don’t often consider CSS Clearfix. CSS Flexbox and Grid solve the position of elements a little better (and a little easier!) than using floats. Nevertheless, we…
CSS !important Rule: When to Use it
The !important rule is used to override the styling of a webpage. In all honesty, there are more instances of why you shouldn’t use the !important rule vs why you should. Let’s discuss how it’s used and then why it…
CSS Padding vs Margin: How to Tell the Difference
When I first started learning how to write markup using HTML and CSS, it took some time to actually wrap my mind around the differences between margin and padding in the box model. In this article, I will share how…
How to Create a Basic CSS Overlay
An overlay is an effect used on a website to steer users in the right direction of the next action they must take. Correct usage has the ability to create a positive user experience, which will keep users on your…
Create Line Breaks Without Having to Use br in HTML
A line break can be added to HTML elements without having to utilize a break return <br> by using pseudo-elements. Pseudo-elements are used to style a specific part of an element. Here we will use ::after to style an HTML…
How to Use Text-Indent in CSS
The CSS indent property, known as the text-indent property, appears similar to a standard indent on the first line of every paragraph in an essay or paper you may have written in school; it indents the first line of every…
CSS Cropped Images
There are several ways to crop an image in CSS; however, the simplest and most effective of these are: Using object-fit: When using object-fit: cover, we can easily crop the image and still maintain the picture’s aspect ratio. You can…
CSS Font-Kerning, Letter-Spacing and Word-Spacing Property
When learning CSS basics, we tend to focus on the box model, how to position components on the page, and the design system elements, like font-family and font sizes. If we dive even deeper into how the font looks on…
