Learn CSS: The Complete

Guide
So you want to learn CSS?

If you want to be a successful web designer, a solid grasp of CSS is a

must. Even if you don't do the coding yourself, understanding how it works
will help you design for the web. We've built a comprehensive guide to help
you learn CSS online, whether you're just getting started with the basics or
you want to explore more advanced CSS. This Learning Guide will help
you:

● Learn CSS and HTML from scratch.

● Build on your CSS experience to write better code faster.
● Explore the most recent developments in CSS.

We'll start with a basic explanation of what CSS is and how it works. Then
we'll get into the fundamentals of CSS, such as typography, layout, colors,
and backgrounds. After that, we'll explore some more complex areas of
CSS and take a peek at what the future of CSS may hold. And we'll finish
by looking at CSS preprocessors and animation.
In each section, we'll provide plenty of resources for you to use to learn
more about a particular area. With this CSS guide and the courses and
tutorials we link to within it, you have all the information you need to go
from CSS novice to pro.

1. What is CSS?

CSS stands for Cascading Style Sheets, documents that contain styling
rules that describe how HTML elements are displayed. CSS allows you to
control the layout of multiple web pages all at once.

How Does It Work?

CSS works hand in hand with HTML; HTML sorts out the page structure,
while CSS adds style, makes it look pretty, and allows you to introduce
subtle levels of interaction.

Multiple style rules can point to one HTML element, in which case there
needs to be a way to determine which rule should take effect. The term
cascading describes the process of filtering down from general rules, until
the most specific rule is encountered. That rule is then chosen to do its
work.

CSS is read by web browsers. They take the HTML markup document, and
then they apply the CSS styling rules to the elements within that document.

Learn HTML Basics

This guide assumes that you already have a basic understanding of HTML.
If you don't, you can get up to speed quickly in our short course on HTML
basics. By the end of this short course you’ll know what HTML is, how it
works, and how to use its most common elements.
2. The Fundamentals of CSS

CSS Specificity and Selectors

CSS is all about targeting elements and styling them. These two tutorials
will get you started on the right foot:

Typography, Layout, Colors, and Backgrounds

It's time to master the fundamentals of CSS: typography, layout, colors, and
backgrounds.

In Start Here: Learn CSS Typography, you'll start by learning how CSS
affects the way a website displays, what CSS selectors are, what CSS
properties are, and the coding syntax you’ll need to know to write your own
CSS.

In our Start Here series of courses, Kezz Bracey will go on to show you
how to build the typographic foundation of your site, how to create the most
common types of layouts in web design, and how to breathe some life into
the site you’ve been creating using CSS colors and backgrounds.

Once you've got to grips with the basics of backgrounds, check out this
tutorial for an in-depth look at the upgraded background property and the
new capabilities beyond just adding a CSS background image or color.

CSS Positioning
CSS positioning is arguably the most fundamental skill in web design; it
powers layouts and hence forms the foundation of everything inside those
layouts. That said, it can be quite tricky to wrap your head around when
you are first starting out.

By the time you’ve finished this course, you’ll have a firm grasp of the
essential principles you need to drive your layouts. You’ll learn each of the
four types of positioning used in CSS, as well as how to work around some
of the oddities that can pop up when using them.
Keep Learning CSS
Follow the Masters

CSS is constantly evolving, and the best way to stay on top of your game is
to immerse yourself. Pay attention to what CSS celebrities are doing and
you will learn plenty. Here are just a few people on Twitter you should be
following:

● @chriscoyier
● @LeaVerou
● @csswizardry
● @rachelandrew
● @snookca
● @vlh
● @MeyerWeb
● @zeldman
● @jensimmons
● @simplebits

Weekly Digests

Make sure you're also subscribed to our weekly digests to get a

comprehensive summary of all our new web design tutorials each week,
delivered straight to your inbox.

Learn in a Community

Why not find your own heroes on a social coding site like GitHub or
CodePen? The best thing about networks like these is the advice
everybody gives each other; if you have a CSS problem, someone will
have had it before you and will be willing to lend a hand. Remember, you
can always ask for help in our forum!

Get to Grips With Browser Support

Browsers don't always interpret style rules the same as each other, and as
browsers develop, so too does their support of newer styling proposals. It's
important to understand how the major desktop and mobile browsers will
treat your CSS.

It's often the browser manufacturers themselves who experiment with CSS
properties, in the hope that their suggestions will be adopted by users.
Ultimately, it's down to the World Wide Web Consortium (W3C) whether
CSS properties are standardized or not.

Fortunately, all modern browsers (such as Google Chrome, Mozilla Firefox,

Apple Safari, Opera, and Microsoft Edge) have proactive updating
management, which should stop older versions floating around for too long.

However, there are differences between each of these browsers,

irrespective of how up-to-date they happen to be. Some CSS will be well
supported in one browser but interpreted differently in another, so for this
reason it's sound advice to pay attention to browsers.

Here are some useful resources which will help you on your way:

● BrowserStack is quite simply the best cross-browser testing tool

available today. Use it to see how different browsers and platforms
mess with your CSS.
 ● Can I Use... is an invaluable website for checking which CSS
properties are supported in which browsers.

3. Next-Level CSS
Once you've mastered the fundamentals, there's still lots to learn to really
make the most out of everything CSS has to offer, from frameworks that
help you organise your CSS to CSS libraries and creating flexible grid-
based layouts using the box model.

SMACSS
SMACSS (Scalable and Modular Architecture for CSS) is a set of CSS
guidelines which organizes your CSS rules into reusable modules. In this
course, Adi Purdila will introduce you to this great front-end framework!

Essential CSS Libraries

In this next course, you’ll learn how to use ten essential CSS libraries for
web designers. You’ll learn about resets, animations, transitions, and
typography related libraries. You’ll be using Bower to manage your
projects, to make sure that everything stays up to date and is easily
maintainable.

CSS Layout
CSS was never really intended for laying out complex interfaces; it was
created with simple documents in mind. As such, its journey has been a
difficult one.
Nowadays, however, CSS is capable of a great many things where layout
is concerned, as these courses will testify. Follow our instructors to master
the box model, take control of grid-based layouts, and use Flexbox to
create flexible interfaces.

CSS Grid Layout

How we approach layout on the web is changing, and at the forefront of
that change is CSS Grid Layout. This quick start guide will skip the details
and nuances, instead helping you get stuck in, right now.

The New CSS Layout

If you want to get ahead with CSS Grid Layout, this new book from Rachel
Andrew and A Book Apart is exactly what you need. Take advantage of this
pivotal moment in the evolution of layout with The New CSS Layout.

CSS Projects
Now it's time to build on what you've learned by trying some practical
projects! These three courses use CodePen so you can easily follow along.

Next-Level Courses
Take some time to explore the incredible results you can achieve using
next-level CSS. These CSS courses and tutorials are perfect for expanding
your knowledge and digging further into clipping, masking, grids, blending
modes, counters, and units.

The Future of CSS

CSS is constantly evolving, and you can remain current and ahead of the
field by knowing what the future is likely to look like. In these courses and
tutorials, you'll learn about some of the bleeding-edge features of CSS,
such as CSS selectors, layout modules, filters, pseudo-elements, and
adding drop caps so you can take your designs to the next level.

4. CSS Preprocessors
What Is a CSS Preprocessor?
A CSS preprocessor is a scripting language that extends CSS and allows
you to do a number of things and can dramatically improve your workflow.
Preprocessors help you to write well organised code that's easier to
maintain and allow you to use code shared by other people, but the biggest
advantage is that they save you time.

Learn Sass, LESS, and Stylus

Sass, LESS, and Stylus are the three most mature and stable CSS
extension languages around. We have courses that will get you up to
speed with all three!

You can learn more about CSS preprocessors by checking out these
resources:

● Sass tutorials by Hugh Giraudel

● LESS: Beyond the Basics
● Preprocessor category on Envato Tuts+

5. CSS Animation
Motion has become a really important part of the web design field in recent
years. Motion and animation add layers of dimension to an interface, aiding
the user, offering feedback, delighting, and engaging along the way.

CSS animation techniques are often a web designer’s gateway into the
world of motion, and the best way to get started is to check out our
complete guide:

● Web Animation: The Complete Guide

6. Learn CSS: The Complete Guide

This Learning Guide will continue to be updated with all the latest and
greatest CSS tutorials and courses to help you stay at the very top of your
game!

To keep up with all the CSS content we publish, remember to sign up to

our weekly digests to get a comprehensive summary of all our new web
design tutorials each week, follow @tutsplus on Twitter, and like the Envato
Tuts+ page on Facebook.

https://webdesign.tutsplus.com/series/learn-css-the-complete-guide--cms-
1065