0% found this document useful (0 votes)

65 views

Master CSS

Uploaded by

Bùi Thị Như Quỳnh

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

65 views

Master CSS

Uploaded by

Bùi Thị Như Quỳnh

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 106

Conquer CSS

Master Cascading Style Sheets and

Learn How to Create a More Beautiful
Website

Ryan Boddy
COPYRIGHT PAGE

Conquering CSS © Copyright 2022 Ryan Boddy

All rights reserved. No part of this publication may be reproduced, distributed

or transmitted in any form or by any means, including photocopying,
recording, or other electronic or mechanical methods, without the prior
written permission of the publisher, except in the case of brief quotations
embodied in critical reviews and certain other noncommercial uses permitted
by copyright law.

Although the author and publisher have made every effort to ensure that the
information in this book was correct at press time, the author and publisher
do not assume and hereby disclaim any liability to any party for any loss,
damage, or disruption caused by errors or omissions, whether such errors or
omissions result from negligence, accident, or any other cause.

Adherence to all applicable laws and regulations, including international,

federal, state and local governing professional licensing, business practices,
advertising, and all other aspects of doing business in the US, Canada or any
other jurisdiction is the sole responsibility of the reader and consumer.

Neither the author nor the publisher assumes any responsibility or liability
whatsoever on behalf of the consumer or reader of this material. Any
perceived slight of any individual or organization is purely unintentional.

The resources in this book are provided for informational purposes only and
should not be used to replace the specialized training and professional
judgment of a health care or mental health care professional.

Neither the author nor the publisher can be held responsible for the use of
the information provided within this book. Please always consult a trained
professional before making any decision regarding treatment of yourself or
others.

For more information, email ryanboddyweb@gmail.com.

GET YOUR FREE TEMPLATE!
Read This First

As a thank you for downloading/purchasing my book, I want to give

you this free product landing page template!

This template is free to you and does not require attribution! You can
use it as many times as you’d like, in perpetuity. You can use it for
marketing material, or you can simply examine the files to see how concepts
from this book are applied in a practical way.

I stand by the idea that the web should be a beautiful place, which is
why I wrote this book! I hope this template helps you in pursuit of that
same goal!

To Download visit:

https://conquercss.com/free
z

DEDICATION
This book is dedicated to my wonderful wife, Baylee. I could not have
achieved my dream of completing my first book without her belief in me.
Time after time, I’ve presented her with idea after idea that would become
my next big project and she has dived in with me each time. This book was
different for me but no different for her. She was by my side out of the gate,
just like with every other crazy idea I’ve come up with. I knew that I was
going to finish what I started with this book, but she kept me going when I
felt like giving up.

Thank you, sweetheart. You have my love and gratitude forever.

TABLE OF CONTENTS
Introduction .............................................................................................................. 1

Chapter 1
A Brief History of CSS ............................................................................................. 2

Chapter 2
CSS Syntax .................................................................................................................. 4
Selectors ........................................................................................................................................ 7
Properties .................................................................................................................................. 14
Specificity ................................................................................................................................... 15

Chapter 3
CSS Organizational Methods .............................................................................. 22
Stylesheets ................................................................................................................................. 22
Comments .................................................................................................................................. 26
Organizational Patterns ..................................................................................................... 28
There Is No Right Answer ................................................................................................... 36

Chapter 4
The Box Model ........................................................................................................ 37
Margin ......................................................................................................................................... 38
Padding ....................................................................................................................................... 41
Border.......................................................................................................................................... 43
Content........................................................................................................................................ 46
The Secret Fifth Category? ................................................................................................. 46

Chapter 5
Responsive CSS ....................................................................................................... 51
Responsive Units ..................................................................................................................... 51
Media Queries .......................................................................................................................... 60
Mobile Considerations.......................................................................................................... 62
Responsive Design Can Be Even Simpler ..................................................................... 65
Chapter 6
Flexbox and Grid ................................................................................................... 66
Flexbox ........................................................................................................................................ 66
Grid ............................................................................................................................................... 74

Chapter 7
CSS Frameworks.................................................................................................... 82
Advantages ............................................................................................................................... 82
Disadvantages ......................................................................................................................... 83
Bootstrap ................................................................................................................................... 84
Material Design ...................................................................................................................... 85
Foundation................................................................................................................................ 86
Tailwind CSS............................................................................................................................. 87
Wrapping Up ............................................................................................................................ 88

CHAPTER 8
Preprocessors and Postprocessors ................................................................. 89
SASS/SCSS ................................................................................................................................. 89
LESS.............................................................................................................................................. 92
Postprocessors ......................................................................................................................... 93
Pleeease ...................................................................................................................................... 93
PostCSS ....................................................................................................................................... 94

CHAPTER 9
This Is Only the Beginning ................................................................................. 96

Author Bio ............................................................................................................... 97

Introduction

I never intended to write a programming book. I always thought that I would

write a sci-fi book or some epic tale that took place in a fantastical realm. I
have always been creative, and I wanted to use that creativity to create a world
for others to enjoy. However, as time went on, I realized that creativity creeps
into all mediums one way or another. Besides, the fantastical realm is already
here. As web developers, we communicate, build, and (oftentimes) joke
around in it already. The World Wide Web is the place for our creativity to
flourish.

If the web is our canvas, then the code we write is the paint. The
problem is that not all “paint” is created equal—and some is downright
wacky. Cascading Style Sheets (CSS) is some of the wackiest there is, and this
is not lost on most web developers. I often scroll through Twitter and find
sentiments from other web developers about their love-hate relationship with
the language. When it works, it’s a delight to see your design come to life.
When you are a beginner and you have to center a div, it becomes a seemingly
impossible task.

These feelings of disdain toward CSS are what drove me to start writing
this book. I have been writing CSS for over 10 years now, and I have always
enjoyed growing this skill. I want to share this knowledge with other web
developers. I want to show them that CSS doesn’t have to be scary. Even the
most technical backend developers can pick up CSS and create beautiful,
responsive web pages and apps. This is not a magic skill that people are born
with, despite the CSS wizards we all look up to.

This book is aimed at beginners, but my hope is that there is something

here for even the most experienced web developers. This is the book I wish
I had when I was starting to learn CSS so many years ago. From the bottom
of my heart, I want to thank you for purchasing this book and trusting me to
be a guide in your CSS journey. It means a lot.

—Ryan Boddy

1
CHAPTER 1

A Brief History of CSS

I
n the beginning, there was nothing. Then, in 1993, Tim Berners-Lee gifted
the world with HyperText Markup Language (HTML). This birthed the
modern web as we know it. While HTML allowed developers to structure
web pages, styling options were incredibly limited. As the artists of the web,
developers were painting in black and white, which couldn’t be blended to
create gray. Information could be displayed on a web page, but the
information wasn’t any fun to look at.

Even scientists and researchers want a little bit of flair when they’re
getting their information. Shortly after the release of HTML, several
proposals were floated to create “stylesheets” that would define how HTML
would look. One such proposal was for a stylesheet language called Cascading
Style Sheets by Håkon Wium Lie. The World Wide Web Consortium (W3C)
combined this proposal with others to create the first public release of their
CSS recommendation, or endorsement and set of instructions for CSS, in
1996. HTML has been in its fifth major version since 2014. As HTML grew,
CSS grew alongside it. The latest and greatest CSS version is CSS 3, which
was introduced in 2011. Here is a graphic showing the timeline of CSS over
the years:

2
Conquer CSS

While it is important to know where CSS came from, we won’t linger on

it for long. Web styling practices have evolved significantly, which is why the
current specification for CSS is so large. There are approximately 520 official
properties in CSS (you will learn what a property is in the following chapter),
which can make it feel like knowing EVERYTHING about CSS is
impossible. The good news is that you don’t have to know everything to learn
how to create beautiful web pages. The combination of HTML5 and CSS3
has created the opportunity to bring our creativity to the web in full force.
Some background knowledge of HTML will be helpful but not required as
we move through this book. Now, let’s move on to the syntax of CSS as it
stands today and get started on some code!

3
CHAPTER 2

CSS Syntax

C
SS is unique among web languages. It’s not a full-fledged programming
language because it doesn’t have many logic features. It’s not a markup
language like HTML or XML because it doesn’t (for the most part)
determine what content is displayed. CSS is a stylesheet language. It is used
for styling. There are options for it to perform some logic, and there are
options to use it to set content, but these are not the primary purposes of
CSS.

We can’t start writing CSS without having a little bit of content to style.
Let’s start with some basic HTML that will allow us to see our changes. Here
we have some simple HTML for a Header 1.

And here is what that looks like without any CSS:

4
Conquer CSS

Alright. This is absurdly boring to look at. We have a heading with a very
plain font, black lettering, and no text decoration. Let’s throw some CSS on
it and see what we can do. The following CSS will transform our heading to
make it look less bland. Add a <style> tag to your header in your HTML,
along with the CSS inside like so:

Now our boring old header looks like this:

Maybe not the best design in the world, but it is much more appealing
to look at. Now, let’s break down exactly what our CSS is doing.

5
Ryan Boddy

Let’s start with the <style> tag. The style tag is an HTML tag that allows
us to write CSS directly in our HTML document. I am using it here to show
the example CSS, but it won’t always be our method of injecting CSS into our
HTML (more on this later). For now, if you want to experiment with CSS as
a total beginner with minimal HTML knowledge, you can use the style tag
to write your code.

You might be wondering, “What about the rest of the code?” We won’t
get into what each property is doing here, but let’s get familiar with the syntax.
Here is a diagram that shows the biology of a CSS rule, which is a grouping
of CSS properties for the purpose of being applied to certain HTML
elements:

6
Conquer CSS

Selectors
Let’s take another look at the code:

h1 {
color: #002699;
font-family: Arial, Helvetica, sans-
serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
}

What is the h1 doing in our code? This is what’s known as a selector.

Selectors allow us to select which markup we want to apply changes to with
our CSS. Selectors are always followed by an opening and closing bracket to
indicate which properties will be applied to that selector (more on properties
in a moment). In this case, we are modifying every h1 on this page. Since there
is only one, our changes get applied to the <h1> tag on the page.

But what happens if I put another <h1> tag on the page? Let’s find out:

Adding another h1 gives us a header with the exact same styling since
we’re targeting all h1s. This is a handy way of styling all the elements on a
page that have the same tag.

7
Ryan Boddy

But what if we only want to style the first h1? Well, we have a few options
when it comes to selectors that we can use to do that. Let’s change our code
a little bit and introduce the first way:

<h1 class="header">Hello World!</h1>

<h1>Another H1</h1>

This code changes our output to look like this:

So, what’s happening here that allows us to only style the first header
tag? We have just created a class. In CSS, classes are custom selectors that

8
Conquer CSS

allow developers to choose styling for whichever elements get assigned that
class. You can see here that we have assigned the class to our first <h1> tag
by giving it an HTML attribute of class followed by the same name we put in
our CSS. To create a class, simply put a dot (.) in front of the class name in
your CSS selector, and then use class=“className” with className being the
class name you chose without the dot. You can include multiple classes if
you’d like the element to get styling from multiple CSS rules. Just ensure that
your classes are separated by a space in your class attribute.

There is another method of selecting only one element per page, and
that’s by setting an ID. Let’s look at the following code:

<h1 id="header">Hello World!</h1>

<h1>Another H1</h1>

The code above will have the exact same output as the class, but instead
of using a class, we use the id HTML attribute to assign our style. IDs are
delineated in CSS by putting a # (pound, hashtag, number) symbol in front
of our ID name. IDs should be unique for each element on the page and
shouldn’t be repeated. This means that it’s okay to use IDs to style one
element on the page but no more than one. In the instance where you need
to style a set of elements, you should create a class. Furthermore, classes also

9
Ryan Boddy

work for single elements, so it’s common practice not to use IDs at all in your
CSS and stick to classes.
You can also chain selectors together to get more and more specific with
your selections. Let’s say that you have a paragraph with a class, and within
that paragraph, there is an anchor tag—the text designating the start and end
of a hypertext link—and you want to target that particular anchor tag. Here’s
an example of how we can do that. Consider the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Conquering CSS</title>
</head>
<body>
<p class="red-paragraph">
This is a red paragraph. But I want my
anchor tags to be green. Like <a href="/">this
one!</a>
</p>
<style>
.red-paragraph {
color: red;
}
.red-paragraph > a {
color: green;
}
</style>
</body>
</html>

10
Conquer CSS

And here is the output:

Here you can see that by using the greater-than sign, or right carrot sign,
you can chain together selectors to target elements that are subelements of
other elements. This symbol is called the child combinator. It only works if
you have chained together selectors that have a parent-child relationship. So,
if I were to change the code to look like this:

<div>
<p class="red-paragraph">
This is a red paragraph. But I want
my anchor tags to be green. Like <a href="/">this
one!</a>
</p>
</div>
<style>
div {
color: red;
}
div > a {
color: green;
}
</style>

…our anchor tag will no longer be green:

11
Ryan Boddy

So, how would we go about making it green again? Well, if we remove

the child combinator, the CSS will now target all anchor tags within the div
and apply the styling. Go ahead and remove the child combinator symbol and
you will see that your anchor tag is green again.

What if you want to apply the same CSS styling to multiple selectors?
That’s pretty simple in CSS. All you need to do is comma separate your
selectors before your CSS rule. For example, if you want to apply the color
red to all your paragraphs and anchor tags, you can do the following:

p, a {
color: red;
}

Now both elements will be red. Simple as that.

The final topic we’ll cover regarding selectors is pseudo-selectors.

Pseudo selectors allow us to apply styling based on the state of the selector.
The most common example is the :hover pseudo-selector, which we can use
to apply different styling to an element that is being hovered over with the
mouse. Let’s use the code from our previous example. We’ll add the :hover
pseudo-selector to our anchor tag to change the color when the user hovers
over our link:

12
Conquer CSS
<div>
<p class="red-paragraph">
This is a red paragraph. But I want
my anchor tags to be green. Like <a href="/">this
one!</a>
</p>
</div>

Now you can see that when you hover over the link, the color changes
to purple. This is just one of many pseudo-selectors.

There is another way to style individual elements without the use of

selectors, and that is by using inline styles. HTML actually has a style attribute
that allows you to set styles directly in your HTML tag with CSS. While it can

13
Ryan Boddy

be handy when prototyping a quick change, it can quickly make your HTML
code very verbose and sloppy. For the purposes of this book, we won’t be
using inline styles, but I want to bring it up before we get into the topic of
specificity at the end of the chapter.

Properties
This is where the magic happens. We know how to target our elements using
element, class, and ID selectors. But how do we make them look the way we
want them to? This is where properties come into play. In CSS, a property
is exactly what it sounds like. It is a property of the HTML element that
determines the style of what gets put on the page. Let’s take a look at the CSS
from the code example we’ve been using:

.header {
color: #002699;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
}

In this example, we have five CSS properties. Can you guess what they
are?

Let’s list them out:

● Color
● Font-family
● Text-decoration
● Text-transform
● Font-style

When pairing these properties with their values, you can easily see what
they do. We’re setting the color to a hex value for a navy blue color. We will

14
Conquer CSS

then set the font family to Arial, underline the text, transform all the letters
to uppercase, and finally make the header italic.
At the time of this writing, there are 520 official CSS properties, and
each of them have different acceptable values. While that may seem
overwhelming, modern tooling makes it so that we don’t have to remember
all of the properties. With modern code editors, we have tools like
autocomplete and IntelliSense that suggest properties as we start typing or
give us a list of common properties to choose from. We can then use the
same tools to list out acceptable values. We will cover plenty of important
properties as we move through this book, but not all 520.

Properties are always lowercase and dash separated between words.

They are followed by a colon (:) and then the desired value. Each property is
closed using a semicolon (;). Finally, values within a property can be separated
by commas to indicate fallback options. In this example, if the browser
doesn’t support the Arial font, it falls back on Helvetica. If the browser
doesn’t support Helvetica, it then defaults to a sans-serif font. Properties and
their values will be covered more in this book. This is simply an introduction
to their syntax.

Specificity
So, now you know about selectors and properties, but we need to talk about
specificity. In CSS, specificity refers to the order in which conflicting styles
are applied. We’ve looked at element selectors, class selectors, and ID
selectors. Now, what if I have properties designated for all three? Which one
is chosen to be the style that gets applied? Let’s look at the following code:

<h1 id="headerId" class="headerClass">Hello

World!</h1>

<h1>Another H1</h1>

15
Ryan Boddy
font-family: Arial, Helvetica, sans-
serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
}
.headerClass {
color: red;
font-family: Arial, Helvetica, sans-
serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
}
h1 {
color: yellow;
font-family: Arial, Helvetica, sans-
serif;
text-decoration: underline;
text-transform: uppercase;
font-style: italic;
}
</style>

What color do you think the first header is going to be?

What about the second header?

I’ll give you a second to think. I encourage you to try it out on your own.

Let’s break down what is happening here to our headers. Maybe you
took a guess or you tried it out. If you try it, you’ll see our first header—the
one that says, “Hello World!”—is blue. The second header—the one that says
“Another H1”—is yellow. This all has to do with specificity. In CSS, IDs are

16
Conquer CSS

more specific than classes. This is due to the fact that they are only supposed
to be used to style one element, and classes can be used to style multiple
elements. The next highest specificity when it comes to selectors are classes.
If I removed the ID attribute from the first header, it would become red
instead of yellow. That is because our lowest specificity selector is the element
selector. In this example, the second header doesn’t have an ID or class,
which means it falls back to the styling from the h1 element selector. That
leaves us with headers that look like this:

Not the prettiest headers to look at, but this example drives home the
idea of specificity.

Let’s cover some exceptions to the rules of specificity.

If you want to ensure that the styling that you are setting receives the
highest priority in the specificity weighting process, you can use the !important
keyword. This is generally bad practice and shouldn’t be relied on too heavily,
but there are cases where you may need it. Sometimes CSS frameworks or
platforms you’re working on that have their own CSS need to be completely
overridden, thus calling for the use of the !important keyword workaround.

Let’s take a look at the previous example but with one slight
modification:

17
Ryan Boddy
<h1 id="headerId" class="headerClass">Hello
World!</h1>

<h1>Another H1</h1>

What color are the headers now?

18
Conquer CSS

You can see here that I have put the !important keyword in the element
selector for h1. This means that despite our first headings, which have an ID
and class set that define different colors, both headers are now yellow as you
can see here:

Yikes! This is hard to look at. However, it demonstrates the !important

keyword at work. Again, be conservative in your use of !important. If you need
to work with another developer and you’ve used the !important keyword to
override specificity in a bunch of different places, it could be really difficult
for them to pick up on.

There are a few more rules about specificity that we will cover when they
become relevant in future chapters, but we’ll end this chapter with one more.
Remember those inline styles from the selector section? They have the
highest priority overall (as long as !important isn’t in the mix somewhere). If
you use an inline style on an element that has an ID or class, the inline style
will take precedence. Let’s look at an example of this:

19
Ryan Boddy
<h1 id="headerId" class="headerClass">Hello
World!</h1>

<h1 style="color: purple">Another H1</h1>

20
Conquer CSS

Here you can see that I’ve put the style attribute on the second header
and used it to set the color to purple. When we refresh the page, we see the
following:

Now we have a purple header despite the element selector that is being
used to set the color to yellow. Pretty handy if you need to override some
styling and you don’t want to use the !important keyword.

As I said, there are some additional rules to consider when it comes to

specificity, so it will be helpful to have this idea in mind as we move forward
into future chapters. Take some time to continue to play with the example
that we’ve laid out here so that you become familiar with not only specificity,
but also selectors, properties, and the overall syntax of CSS.

21
CHAPTER 3

CSS Organizational Methods

I
n the last chapter, we covered the CSS syntax rules that are the foundation
of writing CSS. In this chapter, we will be covering methods of organizing
your CSS code. This will give you the lumber to build on those syntax
foundations. That being said, there are quite a few ways to build a house. We
will cover some popular methods of organizing CSS and some things to
consider when arranging your code, but it is ultimately up to you to determine
the best way that works for you. The information provided here is meant to
be a starting point to help you make those decisions.

Stylesheets
CSS is called Cascading Style Sheets, but so far, we haven’t really made a
stylesheet. We’ve put some CSS in a <style> tag, but that wasn’t a stylesheet.
Allow me to explain. Let’s start with a simple directory:

In this directory, we have an index HTML file with some markup, and
an app.css file with some CSS in it. The app.css file is a stylesheet and by
referencing it in our HTML file, we can organize our CSS in a different
document. Let’s look at what these documents look like:

22
Conquer CSS

app.css

p {
color: red;
}
h1 {
color: blue;
}
li {
color: green;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css" />
<title>Conquering CSS</title>
</head>
<body>
<h1>Hello Readers!</h1>

<p>This is a paragraph! It can be styled with

CSS!</p>

<ul>
<li>This is a list!</li>
23
Ryan Boddy
<li>It can also be styled with CSS!</li>
</ul>

<div>
<p>And this is another paragraph, but it
is contained within a div tag! It too, can be styled
with CSS</p>
</div>
</body>
</html>

We have some color properties in the app.css file for some elements on
the page in our HTML file. The way we link the two together is shown in the
<head> tag. To reference a stylesheet in HTML, create a <link> tag in the
head with the attributes of rel and href. The rel attribute tells the browser what
kind of link the tag is referring to. In this case, it’s a stylesheet. The href
attribute gives the location of the CSS file. In this case, it’s in the same
directory, so we can simply use “./app.css”. Now, if we refresh our page, it
looks like this:

You can see that our styles are included and that everything is working!
Awesome. This means that we now have a separate place to organize our CSS
and we don’t have to clutter up our HTML files with it. This is the most

24
Conquer CSS

common means of infusing CSS into your HTML documents and is generally
preferred over style tags.

Separating your CSS into stylesheets ensures that you have a dedicated
space to write your CSS, and it doesn’t mix with any other code, making it
easy to keep track of. Before the proliferation of component-based web
design, there was a popular concept called separation of concerns, a best
practice which called for all code to be self-contained in its own document.
For example, all the HTML goes into an HTML document, all the CSS goes
into a CSS document, and all the JavaScript goes into a JavaScript document.
As I noted, this paradigm is no longer enforced in modern web development,
but it’s good to know about it.

I mentioned that we would be covering specificity again in this chapter.

With stylesheets, there is another layer added to specificity. We covered inline
styles on HTML elements and how they are the most specific level of CSS
that you can write.

Let’s set aside selector specificity for a moment.

The next level of specificity above inline styles is the <style> tag within
the HTML document. Code in the stylesheet itself is the lowest level of
specificity there is. Let’s take a look at an example of this.

We’re going to change our code a bit in this example. Make the following
changes to your index.html from the previous example and then try and guess
which color the header will be:

<h1 style="color: black">Hello Readers!</h1>

<p>This is a paragraph! It can be styled with

CSS!</p>

<ul>
<li>This is a list!</li>
<li>It can also be styled with CSS!</li>

25
Ryan Boddy
</ul>

<div>
<p>And this is another paragraph, but it
is contained within a div tag! It, too, can be styled
with CSS</p>
</div>

As you know, the inline style is going to take precedence here, so the
heading will be black.

But what if the inline style isn’t there?

Well, the heading would be yellow as per the style tag at the bottom of
the page. If the style tag is removed altogether, the heading will be blue
because that’s what’s in our app.css file. These specificity rules give you the
option of overriding the CSS in your stylesheet with a style tag. This allows
for quick testing of a change without going through your stylesheet. Style tags
also load faster than external stylesheets do, so if there is styling you need to
prioritize for users with slow connections, you can include the most
important code in a style tag while you wait for your stylesheet to load. This
still isn’t the final note we will have on specificity, so be ready to revisit the
topic again.

Comments
There are many different ways to organize your stylesheets to produce clean
CSS code. We will take a look at some of these patterns so that you can judge

26
Conquer CSS

which one may be best for you. Before we get started, though, I want to bring
up an organizational tool that is ubiquitous across programming languages,
and that’s comments.

Comments are lines of code that are not evaluated by the browser that
allow developers to leave notes to others who may be reading their code.
Comments are best practice in any code and should be used to explain code
to others who are going to read it. It’s also helpful to leave yourself notes
about work left to do, how something works, or areas of confusion.

So, how do we leave comments in CSS? Let’s take a look at the code
below:

/* This will make my paragraphs red */

p {
color: red;
}
/* This will make my header blue */
h1 {
color: blue;
}
/* This will make my list items
green. */
li {
color: green;
}

Here, you can see multiple comments in the code. The first two
comments are single lines and show the syntax for comments. You start a
comment with a /* and close it with a */. The good thing about CSS is there
is no difference between single and multi line comments. Unlike many other
languages, everything between your open comment symbol (/*) and your
closing comment symbol (*/) will be considered a comment. You can put a

27
Ryan Boddy

whole paragraph in there and it would be considered a comment. It’s as

simple as that.

Remember to leave useful comments in your code whenever necessary.

Organizational Patterns
There are methodologies for writing your CSS that offer guidelines on
organizing and naming your selectors. When you are working on a large app
or website, you may have hundreds or even thousands of class names and
selectors in your CSS file. How do you organize them all so that they are easily
maintained? Let’s take a look at some of the organizational patterns that are
popular in the frontend development industry today.

BEM (Block, Element, Modifier)

The BEM organizational pattern has grown in popularity since its beginnings
in 2005. Since then, more web developers have adopted it as their standard
for writing CSS over most other CSS architecture patterns. Designed with
organization and modularity in mind, this approach to organizing your
stylesheets focuses on three descriptors when naming CSS classes. These
three are block, element, and modifier.

The block is comparable to a component in today's component-based

web design. It may be a navbar, header, table, or anything that is composed
of other smaller elements.

An element is exactly what it sounds like. If the header is the block, the
element may be a header image. Elements should be semantically related to
their blocks.

The modifier portion of the name refers to a flag that changes behavior
or appearance.

Let’s look at an example of this pattern with some real code:

28
Conquer CSS

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css" />
<title>Conquering CSS</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar--list">
<li class="navbar--listItem navbar--
listItem-active">
<a class="navbar--link"
href="/home">Home</a>
</li>
<li class="navbar--listItem">
<a class="navbar--link"
href="/about">About</a>
</li>
<li class="navbar--listItem">
<a class="navbar--link"
href="/contact">Contact</a>
</li>
</ul>
</nav>
</body>
</html>

29
Ryan Boddy

app.css
body {
margin: 0;
}
.navbar {
background-color: #2e2e2e;
height: 50px;
width: 100%;
}
.navbar--list {
list-style: none;
margin: 0;
}
.navbar--listItem {
display: inline-block;
margin: 15px 15px 0px 0px;
}
.navbar--listItem-active {
text-decoration: underline;
}
.navbar--link {
color: white;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

30
Conquer CSS

Here is the output:

You can see that we are creating a navbar with some links to Home,
About, and Contact. Furthermore, we’ve given the navbar some styling and
given the current active page an underline in the menu. This is the first
example of CSS code that you may see in the real world, so be sure to become
comfortable with what each of the selectors and their properties are doing
before moving on.

If you feel comfortable with the code here, let’s discuss where BEM
comes into play. Here, you can see that we have one block, which is a navbar.
There are some elements within that block, such as a list, list items, and links.
There is a modifier on our list items that underlines the active page. As you
can see, the BEM syntax is BLOCK–ELEMENT-MODIFIER. That’s the
block, followed by two dashes, then the element, followed by one more dash,
and finally the modifier.

The strength of BEM is shown here. It gives me very granular control

over the element styling for each element, but they are all organized into their
block. If we were to comment above this chunk of code, it may say /*This is
the navbar block styling*/. I can single out specific kinds of modifications to
core elements using the modifier nomenclature. This allows me to create one
class with most of the styling, and a follow-up class with some more specific
styling for that one instance of the element.

BEM touts three main advantages: modularity, reusability, and structure.

From this example, we can clearly see why. But what are the downsides? Well,

31
Ryan Boddy

I definitely could have written less code for this example, and that’s not out
of the norm for BEM. It is very detailed but not always succinct.
Furthermore, blocks, elements, and modifiers may not always communicate
everything you were thinking when styling that element. This is the perfect
time to add some comments to add context so that other developers may
better understand what they’re looking at.

That’s BEM in a nutshell. Try and style some other elements with this
organizational method and see if you can really get a feel for how it’s all laid
out. Once you’re comfortable, we can move on to our next organizational
pattern.

SMACSS

Pronounced “smacks,” this pattern’s main goals are scalability and

modularity. SMACSS is actually an acronym for Scalable and Modular
Architecture for CSS. As I mentioned when we covered BEM, the more
blocks you have, and the more elements there are within them, the more long
class names you are keeping track of. In opposition to this approach,
SMACSS maintains short class names, and categorizes your classes into five
types:

● Base
● Layout
● Module
● State
● Theme

Base styles are the default styles for elements on the page. For example,
it’s very common to remove the default margin on the body element with body
{ margin: 0 }. This is a perfect example of what it means to create a base style.
Base styles will almost always apply to single element selectors, and it’s
common to see the same rule applied to multiple selectors.

Layout styles are responsible for laying out your content on the page.
For example, you may have a page with three columns or a grid system. These
styles would be in the layout section of your CSS file. Layout is an important

32
Conquer CSS

factor of page design. We’ll be discussing it much more in the coming

chapters. For now, in relation to SMACSS, you can think about it as the
positioning of elements on the page.

Next up, we have the module category. Modules are akin to blocks in
BEM in that you can consider them to be the components that make up your
page. Common examples are navbars, headers, footers, or sidebars. This
category is pretty self-explanatory. It’s where most of the CSS classes will live
since it has the largest effect on the content of our web app or page.

The state category refers to the look and behavior of our modules when
their state changes. For example, we may have a button that is being used to
cancel a subscription. The state of this button may be “danger” because it is
a permanent action that cannot be undone. We may make the button red or
the text in the button red to communicate this to the user. The class .button-
danger would be used to apply these styles, and it would be in our state
category.

And lastly, there is the theme category. This is where you may set
common theme colors for your application or your custom fonts. Any aspect
of how your modules look in relation to the theme of your website or web
application would be stored in this category.

At first glance, it may seem like it would be difficult to keep track of all
of these categories. However, once you get better at sorting your CSS rules
into these categories, it helps keep things organized in places where they
would be easy to find and modify. This methodology also allows you to keep
short class names at all times, making it easier to find exactly what you’re
looking for and keep your HTML more succinct. If this sounds like it would
match your organizational style, give SMACSS a try. If neither BEM nor
SMACSS appeal to you, I’ll cover one more organizational method that is
growing in popularity in today's web architecture.

Component-Scoped CSS

In today’s modern web design and development, component-based web

design has come out on top of competing methodologies. The advantages of

33
Ryan Boddy

component-based web design are many. It allows developers to write code

once and reuse it many times, reducing the amount of code they have to write.
It allows developers to build applications and sites faster once their
components are built. It’s also the approach of all the major players when it
comes to frontend development frameworks. The introduction of
component-based web design left frontend developers scratching their heads
over the best way to organize their CSS.

For many developers, the answer to this question came in the form of
scoped CSS. Scoped CSS refers to the concept that only the CSS that belongs
to a specific component is included in that component's base code. This
means that you are only changing the CSS related to that one particular
component and you can reuse it as many times as you need. Libraries for
“CSS-in-JS” and stylized components have been rising in popularity as
component-based frameworks have become more prevalent. Let’s take a look
at an example of component-scoped CSS in a framework that supports it out
of the box—Svelte:

header.svelte

34
Conquer CSS
45deg,
hsl(188deg 85% 35%) 0%,
hsl(194deg 100% 36%) 11%,
hsl(199deg 100% 40%) 22%,
hsl(209deg 70% 52%) 33%,
hsl(232deg 63% 64%) 44%,
hsl(269deg 56% 62%) 56%,
hsl(305deg 52% 55%) 67%,
hsl(324deg 80% 55%) 78%,
hsl(332deg 100% 49%) 89%,
hsl(344deg 100% 50%) 100%
);
}
.header > h1 {
text-align: center;
width: 100%;
font-family: "Bebas Neue", cursive;
font-size: 50px;
}
</style>

In this .svelte file, you can see that we have a component with features
like any other component-based framework, such as properties. These are not
to be confused with CSS properties. (Don’t worry if you don’t know what
these are—they’re not in the scope of this book.)

You can also see that through the use of a style tag, all the relevant styling
for this component is included in the component file. This means that
everywhere I use this component, styling will be applied.

The advantages of this approach are numerous. First off, I can change
the styling of this component and change it everywhere it’s being used
throughout the application. This is not an advantage that’s inherent to this
approach, but it’s worth mentioning. It’s also easier to organize CSS because
you know that the CSS is only affecting this one component and nothing else
35
Ryan Boddy

on the page. It also cuts down on the amount of CSS you have to look
through when making changes. With all that being said, it’s not without its
disadvantages. This method does away with separation of concerns in the
traditional sense. If that’s important to you, this may not be the approach for
you.

To get started with scoped CSS, either use a framework with support for
it like Svelte or Next.js, or install a CSS-in-JS library for popular frameworks
like React or Vue.

There Is No Right Answer

Again, the way that you organize your CSS is up to you. While there are small
technical benefits to organizing CSS in different manners, it mostly comes
down to the preference of the developer. Take some time to learn different
methodologies and figure out what matches your style the best.

Up to this point, we’ve talked a lot about CSS, but haven’t written much
of it. Let’s dive in and see how we can start rethinking the way we use CSS to
make beautiful websites and applications.

36
CHAPTER 4

The Box Model

A
t its core, CSS is all about boxes. Of course, that is a vast
oversimplification, but a lot of people forget this simple fact when
writing their CSS. Remember reading about layout styling in the
SMACSS section of the last chapter? Well, we’re going to go over a principle
that will make layout creation much simpler for you as a developer. We’re
going to cover the box model.

The box model consists of four parts: margin, padding, borders, and
content. These four properties can be applied to any element that you style
with CSS. When considered altogether, you can see why they are collectively
called the box model. Let’s look at the image below:

This is the box model illustrated. Notice how the header here is in a box.
That’s because it has the four elements of the box model. Let’s break them
down:

● Margin is the space around an element that is outside of the box.

Think about it as a buffer between one element and other elements
on the page.
37
Ryan Boddy

● Padding is the space surrounding the content inside an element.

Let’s compare our element to a football player. The human
underneath all the pads is the important part, but the padding around
them is still part of the player.
● Border represents everything on the border of our element. In this
example, it’s a black, solid border with rounded edges.
● The content here is the word “header”.

If you keep these four characteristics of your elements in mind when

styling them, it makes it much easier to write clean, organized code. We’re
going to go over some of the CSS properties that affect each of the
characteristics in this chapter.

Margin
If everything in CSS is a box, margin is the space around that box. Margin
allows us to move elements on the page in relation to other elements.

Let’s say you had two cardboard boxes that contained items you cared
about. If you moved those boxes one foot apart from one another, the margin
in between would be one foot.

Here is an example on a web page where we’ve changed our index.html

to look like this:

38
Conquer CSS
<body>
<div class="box-1">
<p>This is box 1!</p>
</div>
<div class="box-2">
<p>This is box 2!</p>
</div>

39
Ryan Boddy

The output will look like this:

As you can see, we set some base styles for our divs with the div selector
(for visibility’s sake). We set a left margin of 30 pixels on the first box, which
pushes it away from the left edge of the document by 30 pixels. We set a top
margin of 50 pixels on the second box, which pushes it under the first box
by 50 pixels.

Margin is a handy tool when you need to move something around on a

page, but don’t rely on it too heavily. There are more advanced utilities to
position our elements that we will be covering later on in this book.

You may have noticed that the boxes were already spaced away from the
edge of the document ever so slightly. This is because the body element has
a default margin of eight pixels on all sides when you first start. For this
reason, you’ll often see the following as the first line of any CSS document:

body {
margin: 0;
}

This will remove the default margin from the body and allow you to
make your element’s edges touch the sides of the document.

40
Conquer CSS

There is a shorthand for writing margin rules. You can remember it by

the acronym TRBL (pronounced “terrible” 😃). This stands for “top, right,
bottom, left.”

Let’s say I wanted to give the first box from our previous example a top
margin of 50 pixels, a right margin of 10 pixels, a bottom margin of 15 pixels,
and a left margin of 30 pixels. I could write it like this:

.box-1 {
margin: 50px 10px 15px 30px;
}

Furthermore, I can compress this down. Maybe I want to set the margin
to be equal on all sides. Instead of writing values for margin-top, margin-right,
margin-bottom, and margin-left, I can simply write the following:

.box-1 {
margin: 50px;
}

Now the first box has a margin of 50 pixels on all sides.

Margin is simple, and it can be very helpful in adding spacing between

elements to create a visual separation.

Padding
Padding is like margin in that it is a measurement of space. Padding, however,
is a measurement of space inside an element. Let’s take a look at our example
with the two boxes. If we remove all the margin rules, our output will look
like this:

41
Ryan Boddy

You may notice that the content—the words in the boxes—is essentially
touching the edge of the boxes. This makes it harder to read as it looks
disorganized. Let’s change our CSS to match the following:

div {
width: 100px;
height: 100px;
background-color: lightblue;
}
p {
padding: 10px;
}

As you can see, the text within our paragraph tags now has some padding
and it seems much more readable. Let’s take a look:

42
Conquer CSS

What we’ve done is add space between the content in the paragraph tag
and the inner edges of the paragraph tag. This allows it to become more
readable for our website visitors or application users. You see padding almost
everywhere in modern web design because without it, content would be hard
to look at.

There are a couple of things about padding that you need to keep in
mind.

The first thing is that TRBL comes back into play. You can use the same
shorthand for padding if you want different padding values on any given side.

The other thing to remember is that padding is not considered part of

an element’s size dimensions by default. This means that if you set a width
and height on your element and then give it padding, the padding can make
the element larger. To mitigate this, you can change the box-sizing property to
border-box, or you can lower your measurements to include padding.

Border
Border is the fun one in the box model bunch. You can do a lot with it, and
it’s a great way to make elements stand out on a page. That being said, it’s
also very easy to go overboard with border properties and make your page
look busy. But this isn’t a book on design, so let’s take a look at what you can
do with borders. Let’s change our CSS code from the previous example:

43
Ryan Boddy
div {
width: 150px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
margin-top: 10px;
box-sizing: border-box;
}
p {
padding: 10px;
}

Let’s take a look at the output and see how our boxes are looking:

As you can see, we now have borders around our boxes that are solid
black lines. Let’s break down the code here to get an idea of how we set
borders.

We have the following:

1. A size: This sets the width of the border. If we set the border to 2px
solid black we’d get the same border, but twice as thick.

44
Conquer CSS

2. A style: This delineates the pattern of our border. In CSS, we have a

few defaults, the most popular one being solid.
3. A color: This is the color of your border. Pretty straightforward.

That’s all there is to setting a visible border on your elements.

You can also use borders to change the corners of your elements. Let’s
change our CSS in our example a little more:

div {
width: 150px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
border-radius: 15px;
margin-top: 10px;
box-sizing: border-box;
}
p {
padding: 10px;
}

Notice the addition of a border-radius property. This allows us to set how

rounded we want our edges. In this example, I use a radius of 15 pixels to
give a nice, rounded edge to our boxes. The choice between rounded and
square edges is a classic debate, with both approaches conveying different
feelings when presented on a web page. It’s common practice to pick one
approach and keep it as consistent as possible throughout your website or
application.
A neat trick you can do with border radius is create circular elements.
Go ahead and set the border radius of your boxes to 90px. You’ll notice that
your divs are now completely circular.

45
Ryan Boddy

Content
This characteristic is anything you put inside the box, including headers,
paragraphs, lists, forms, and inputs. This category is easy to understand on
the surface, but it’s also where we have the most options when it comes to
properties. Here are just some of the most common properties that modify
content:

● Font-family
● Font-size
● Font-weight
● Color
● Background-color
● Text-decoration
● Text-transform

While we will be covering many of these properties in this book, it’s

important to remember that CSS has a lot more options for content styling
than what is included here.

The Secret Fifth Category?

We’re getting into industry secrets here! What if I told you there was a fifth
category in the box model—one that a lot of beginners skip learning about
despite it being so important? I’m talking, of course, about display. Display
is the characteristic that determines how the element is shown on the page,
and it’s used in a few different ways. Let’s take a look. Take a moment to
think about what the following code would do if we tweaked our previous
example from this chapter:

div {
width: 150px;
height: 150px;
background-color: lightblue;
border: 1px solid black;

46
Conquer CSS
border-radius: 90px;
margin-top: 10px;
box-sizing: border-box;
display: none;
}
p {
padding: 10px;
}

Can you guess what our boxes look like now?

Well, this is sort of a trick question. Our boxes aren’t even there.

If you refresh the browser page, you’ll see that they are gone. They aren’t
just invisible either (which could be achieved by setting the visibility property
to hidden). Our boxes are gone altogether. This is because we have removed
their display property by using none. This comes in handy when you need to
hide something by default and then potentially show it again later with
JavaScript.

So, what else can we do with display? Well, we can use it to change how
the rest of the box model behaves. Remove the display: none property from
our two boxes example. It should now look something like this:

These boxes stack on top of each other because by default, they have
the display value of block.

47
Ryan Boddy

If we want them side by side, we can set our display property to inline-
block and watch the magic happen. Change your code so that the div selector
has a property of “display: inline-block;”. The result will now look like this:

Pretty cool, right? You can probably see how being able to move blocks
around like this can come in handy when creating layouts.

With newer properties such as Flexbox or Grid, we can gain full control
over the positioning of our elements on the page. Let’s check this out in
action by using Grid to align some divs in a neat pattern. Go ahead and
change your code to match the following:

48
Conquer CSS
<div>I'm a div</div>
</div>

As you can see, to use Grid, we must set a parent container element like
a div that has a display value of grid. We use grid-template-columns to delineate
how much space we want our columns to take up. In this case, we use 2fr
twice. This means that the four child divs will be split into two fractional
columns that will automatically be pushed into a second row since there are
more divs than fractional units.

If we were to set the boxes as “grid-template-columns: 4fr;”, they would go

in a straight line across the page in one row.

49
Ryan Boddy

Let’s look at the output we would get if set a grid gap using gap to
separate our boxes:

This is very well organized and structured. Grid and Flexbox are both
dynamic tools that allow developers to have more granular control over
where the elements on their page are layed out. We will discuss them in more
detail in Chapter 6.
Keeping the box model in mind while writing your CSS will help you
style elements concisely and efficiently. It may take some time to shift your
mindset to think of everything as a box, but once you do, layouts become
much simpler to create. In the next chapter, we will be discussing responsive
web design and how we can use CSS to make our web pages work on all
devices. Having the box model at the forefront of your mind will be
instrumental in this effort.

50
CHAPTER 5

Responsive CSS

C
SS was initially intended to be a stylesheet language that would
aestheically enhance the look of the internet on a computer screen, but
over the next 25 years, the web would completely transform. Over 50%
of all web browsing is now done on a mobile device, whether that be a phone
or a tablet.

Responsive web design refers to the design of interfaces that can be

scaled down and adjusted to fit on any device. Before responsive interfaces,
separate interfaces had to be designed for smaller devices. This was time-
consuming and inefficient. Now, with a combination of design choices and
modern CSS features, we have the ability to write code once and have it work
on all devices.

In this chapter, we’ll be covering the following topics:

● Responsive measurement units

● Media queries
● Mobile considerations

As a disclaimer, there is just as much art to responsive design as there is

science. Everyone approaches this problem a little differently, so be sure to
work with different methods to ensure you find what works best for you.

Responsive Units
In CSS, pixels have been traditionally used to delineate sizes, but as CSS
evolved, more units of measurement were added that could be better
interpreted by responsive interfaces. We have some options when it comes
to responsive units of measurement. To explore these options, let’s change
our code to match the following:

51
Ryan Boddy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Conquering CSS</title>
</head>
<body>

As you can see, we have a box that has been set up with static
measurements. The box may look okay on our desktop, but how can we know
what happens when we switch to mobile?

52
Conquer CSS

Most modern web browsers have the ability to check mobile views by
using the developer tools feature. If you’re using Google Chrome, open the
Developer Tools tab. To do so, click F12 on your device, or right-click and select
“Inspect”. Now click the Device Type button in the top left as shown here:

After swapping to mobile view, you can see that our box is far too large
for phone screens and would stretch off the screen. So, what can we do to
ensure that the box looks good on both screens? Instead of static pixels, we’re
going to measure our boxes using percentages. Change the code to match the
following:

div {
width: 50%;
background-color: orange;
margin: 0 auto;
height: 200px;
padding: 20px;
box-sizing: border-box;
font-size: 20px;
}

By swapping to percentages, we set the width of our box to a size that

is relative to its containing element. In this case, the containing element is the
<body> element, so our box will always be half of the page (50%). Let’s take
a look at the desktop and mobile view now:

53
Ryan Boddy

Desktop

Mobile

As you can see, the boxes now fit regardless of the device we’re viewing.
Percentages are an easy way to make our elements responsive. Nevertheless,
there are always things to consider when using any particular method of
measuring. With percentages, the sizes of your elements are determined by

54
Conquer CSS

the containing element. It’s important to learn where this could cause
problems in order to avoid them. Let’s use percentages on a header:

<h1>This is the title of my page!</h1>

On the desktop, the header looks good. It takes up 50% of the space,
just like we intended. However, desktop browsers are in landscape
orientation, while mobile browsers are in portrait. So, when we set the header
to 50% of the portrait view, it looks way too small as you can see here:

55
Ryan Boddy

There are additional responsive units of measurement that allow us to

make our header look good on both device types.

With em and rem units, you gain more control over your sizing. Typically
used for, but not limited to, font sizing, em and rem can be very powerful.

Em is short for “element” and references a parent element's font size.

Let’s look at an example:

h1 {
text-align: center;
font-size: 2.5em;
margin: 0 auto;
}

Here, we are setting the font-size of our header to two and a half times
that of the parent element’s font-size. In this case, the parent element is the
<body> element, which has a default font size of 16 pixels. Since the font size
here sets both width and height, we will run into fewer issues than we did

56
Conquer CSS

previously when we attempted to use a percentage to size a header. The ability

to transform your font size comes in handy when you want to make elements
sized relative to their parents.

This is all well and good, but what if we don’t want to set the font size
of every containing element on our page? This is where rems come into play.
“Rem” is short for “root element” and references the font size of your root
element. Let’s slightly modify our previous example:

<body>

<h1>This is the title of my page!</h1>

<div>
<h2>This is a subtitle</h2>
</div>

Here, you can see that despite our second header having a containing
element with a font size of 20 pixels, it gets the same size as our first header.
This is because the font size of our <body> element is 16 pixels, and rems
allow us to reference that value.

57
Ryan Boddy

There are other options for element sizing that can work quite well. The
vw and vh units are commonly used to create responsive elements as well.
“Vh” stands for “viewport height” and represents 1% of the viewport’s total
height. “Vw” stands for “viewport width” and represents 1% of the
viewport’s total width. Let’s take a look at these in action:

<body>

Here, you can see the different sizing produced by the viewport height
and viewport width units of measurement. Our box is 10% of the viewport’s
relative width while also being 10% of the viewport’s relative height. If you
resize the window, you will see the box grow or shrink in response.

58
Conquer CSS

While vh and vw can be very useful, they aren’t without their pitfalls.
Remember, desktop and mobile devices are generally oriented differently, the
former being landscape and the latter being portrait. If we set a measurement
using viewport width, it will look completely different on each device because
portrait width is much smaller than landscape width.

There is a way to fix this using vmin and vmax. “Vmin” stands for
“viewport minimum”—the smaller of the two dimensions of the viewport. If
we’re strictly comparing landscape desktop to portrait mobile views, 1 vmin
will equal 1 vh on desktop and 1 vw on mobile. This helps us to ensure that
these responsive units are more aligned with one another. “Vmax” means—
you guessed it—"viewport maximum”. This is simply vmin inverted. Vmax
takes the largest of the two viewport dimensions and uses that dimension to
determine whether to use vh or vw. Let’s take a look at the use of these units
in practice by implementing vmax:

<body>

59
Ryan Boddy

Now take a look at the result. It should look like this:

If you open up the developer tools of your browser and switch the view
to mobile, you’ll see that our box still has a reasonable width. This is because
vmin is dynamically switching between using vh and vw units based on viewport
size. This allows us to create elements on the page that look good on both
desktop and mobile devices.

These are definitely not all the units of measurement that are
implemented in CSS, but they are some of the most commonly used because
they make it much easier to create interfaces that look good on multiple
devices.

There are still instances in which we would still need to write entirely
separate code for different devices. That’s where our next topic comes into
play.

Media Queries
It’s time to open up a can of worms. Truth be told, there are developers who
don’t even believe in our next topic because it’s become bad practice. I, on
the other hand, still believe it’s valuable to learn about media queries.

Media queries are rules you can write in CSS that only apply to particular
types of media. The most common use case for them is writing CSS that only

60
Conquer CSS

applies to specific screen resolutions. That’s not all they can be used for, but
it’s what we’ll be covering.

Remember when I said that before the idea of responsive design,

developers would write entirely different interfaces for the device type that
would be used to visit their website? Well, media queries are the great-
grandchild of that idea. Let’s take a look at a media query in action to see how
it works:

<body>

<div>
<p>Media query magic!</p>
</div>

61
Ryan Boddy

If you reload your browser, you may not notice anything different. Go
into the developer tools and switch the device type to mobile. The
background of our div will now be blue!

You can see that the styling is only being applied on mobile. This is
because our media query is targeting any device with a screen resolution lower
than the largest smartphone. Pretty neat, huh? We can combine this with
something like “display: none;” to make entire elements disappear on mobile
devices—or only appear on mobile devices.

To the uninitiated, this may seem like the ultimate answer to responsive
needs: just write a different set of CSS rules to make everything look good on
phones. There is, however, one serious drawback to using media queries: you
are now maintaining more code, leading to more margin for error. There isn’t
a “one-size-fits-all” media query, so to target the variety of modern devices
that exist, you have to write multiple media queries. This leads to messy,
inefficient code.

By the time you’ve finished writing all the media queries, you will need
to ensure that your non-responsive interface looks good on all devices—and
you will have written significantly more code than if you had just made the
interface responsive from the start. This doesn’t mean that you can’t use
media queries. It’s just important that you use them very conservatively. The
example I mentioned earlier is a good use case. If you have an element that
doesn’t make any sense on a mobile device, hide it altogether with a media
query.

Mobile Considerations
Now that you know how to use responsive units of measurement and media
queries to create responsive interfaces that look good on all devices, there are
things to consider when designing your elements. The way that you write your
CSS will vary based on these considerations.

62
Conquer CSS

Touch vs Cursor

One major factor to consider when it comes to writing CSS for mobile users
is to determine whether they will be using touch or cursor behaviors. Let’s
look at an example:

<body>

<div>
<p>Hover over me!</p>
</div>

Here we have a box with a pseudo-selector for the styling of its hover
state. It may be important to the user experience to be able to hover over the
box to display or convey information, but keep in mind that touch devices
don’t have a way of determining whether or not a finger is hovering over an
element on the screen. This means that all the CSS we just wrote for that
hover state wouldn’t be relevant because this state doesn’t exist for our
mobile users.

Touch raises concerns for more than just the hover state. Let’s say we
write the following code for a form on the web:

63
Ryan Boddy
<body>

<div>
<form>
<label>Check Here</label>
<input type="checkbox" />
<br />
<label>Or Here</label>
<input type="checkbox" />
<br />
<label>Or Here</label>
<input type="checkbox" />
<br />
<label>Or Here</label>
<input type="checkbox" />
<br />
<label>Or Here</label>
<input type="checkbox" />
</form>
</div>

We have quite a few checkboxes that are already small on the web.
Generally, this isn’t an issue because we have the precision of a mouse pointer

64
Conquer CSS

to select these inputs. However, fingertips are not as precise as mouse clicks.
Someone with large fingers may accidentally check too many boxes or the
wrong boxes on our form. This can easily be mitigated by making forms that
would require form controls to be a little larger on mobile devices so that they
are easier to access.

Always try to keep the end user in mind when writing responsive CSS.
You don’t want to alienate a large chunk of your user base because it’s difficult
to use your website or application with touch controls.

Vestibular Disorders

As CSS has become more and more advanced, we have received language
features that have allowed us to do fancier things with our elements. Fifteen
years ago, animated websites were first created using Flash to allow graphical
elements to move on the page. Today, you can use CSS to animate things in
all kinds of interesting and eye-catching ways.
CSS animation is out of the scope of this book, but it’s worth
mentioning. Small, subtle animations can make information on a web page
more interesting to look at, but we must remember to take accessibility into
consideration when writing our CSS. There are users who have vestibular
disorders that make them susceptible to several reactions to overly animated
web elements, ranging from nausea to seizures. So, when it comes to
animations, less is more. After all, we want to make the web as accessible as
possible so that everyone can enjoy it.

Responsive Design Can Be Even Simpler

In the next chapter, we’ll be taking a look at some common CSS frameworks
that make it even easier to make our interfaces responsive and mobile ready.
For now, integrate the fundamentals that we covered in this chapter. Try to
practice creating elements that look good on a wide range of devices.
Mastering these skills now will make it even easier to implement more
advanced styling to responsive designs in the future.

65
CHAPTER 6

Flexbox and Grid

N
ow that we have covered the box model and responsive CSS, it’s time
to explore two of the most vital tools in CSS that marry these two
concepts. In this chapter, you’re going to learn about the Flexbox and
Grid layout systems.

Before we dive deeper into Flexbox and Grid, let’s explore what I mean
by layout system.

Before the introduction of layout systems, there were very few ways to
lay out HTML pages in a way that was efficient and responsive. The most
common solution to this problem was using HTML tables to lay out pages,
which added quite a bit of code to HTML documents and oftentimes led to
frustration while trying to place elements in the correct location. There were
also CSS properties such as float and margin that allowed developers to place
elements on a page in a static location. These were very difficult to work with
when the need for responsive interfaces arose.

The solution to these issues came in the form of layout systems. The
first layout system that was introduced was Flexbox. Flexbox came about in
2009 as a means of laying out elements in a one-dimensional flexible box.
When boxes became flexible, they worked much better on multiple devices.
This completely changed the way that layout was done with CSS and HTML.
Let’s take a look at what we can do with Flexbox.

Flexbox
The basic concept of Flexbox is to be able to work along two axes. The main
axis is set using the flex-direction property. It is either horizontal or vertical
depending on the value of the flex-direction. The cross axis is the other direction
that you don’t specify with the flex-direction. Let’s take a look at this in action:

66
Conquer CSS

Flex-Direction Column

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Conquering CSS</title>
</head>

67
Ryan Boddy
</style>
</body>

</html>

Output

68
Conquer CSS

Flex-Direction Row

Output

First things first, it’s important to understand that Flexbox relies on

container elements. In this example, we have a containing element with a class
of flexContainer. This element has its display value set to flex. This initializes
our Flexbox. The items within our flex container are referred to as flex items.
As you can see, the flex items within our flex container flow along a horizontal
axis if we use the row flex-direction. The items flow along a vertical axis if we
use a column flex-direction.

You can also reverse the directions of your contents if you’re working
with an audience from a country that reads right to left. Simply add “-reverse”
to your direction and you’ll flip your axis. You can see this here:

69
Ryan Boddy
.flexContainer {
display: flex;
flex-direction: row-reverse;
}

You can also reorder the flex items within your flex container. To do
this, use the order property:

70
Conquer CSS
}
.item2 {
order: 1
}
.item3 {
order: 4;
}
.item4 {
order: 2;
}
</style>

Output

Another dynamic feature of Flexbox is the ability to wrap your contents

so the elements that don’t fit in a row get pushed to the next row. This is
extremely useful when developing responsive interfaces where the device
widths that will be used to view the site are varied. Here is an example of flex-
wrap in action:

71
Ryan Boddy
<style>
.flexContainer {
display: flex;
flex-direction: row;
width: 500px;
flex-wrap: wrap;
}
.flexContainer > div {
background-color: orange;
margin: 10px;
height: 200px;
width: 200px;
}
</style>

Output

You can also combine flex-direction and flex-wrap into one shorthand
property called flex-flow. Here is an example of flex-flow:

72
Conquer CSS
.flexContainer {
display: flex;
flex-flow: row wrap;
width: 500px;
}

As you can see, this cuts the number of lines of code you have to write
in half. Flexbox itself allows for much less code to be written than what would
have been previously required to create similar interfaces.

The final part of Flexbox that we’ll cover is justifying and aligning. Using
the property justify-content, we can determine how content is aligned along the
main axis. We can also use the align-items property to do the same thing along
the cross axis. This gives us the opportunity to do things like center elements
on a page. (Believe it or not, centering elements both vertically and
horizontally was very difficult to do prior to the implementation of Flexbox.)
Check out the following code to see this in action:

<div class="flexContainer">
<div>I'm centered!</div>
</div>

Output

Flexbox is an amazing tool that grants developers the ability to create

responsive layouts more easily than ever before. However, it isn’t without its
drawbacks. Flexbox is one-dimensional. This means you get fine control over
either the row or the column, but not both. This is where CSS Grid comes
into play.

Grid
The original specification for CSS Grid was published in 2007, two years
before CSS Flexbox was introduced to the public. It then took over ten years
for the module to be formalized and introduced into CSS with support across
all major browsers—except Internet Explorer as it has its own grid

74
Conquer CSS

specification. Due to its legacy nature, we will not be discussing the way
Internet Explorer implements CSS Grid in this book.

CSS Grid is a layout system that gives full control over two dimensions
of your layout: column and row. This allows developers to create complex
grids of components that are responsive.

Getting started with Grid is similar to getting started with Flexbox in

that you need to create a container element. Just like Flexbox, the elements
within the grid can be referred to as grid items. All top-level elements are
considered as grid items and get sorted into the predefined rows and columns.
Let’s take a look at a basic grid in action:

<div class="gridContainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<style>
.gridContainer {
display: grid;
grid-template-columns: 300px 300px;
}
.gridContainer > div {
background-color: orange;
border: 1px solid black;
height: 200px;
padding: 10px;
box-sizing: border-box;
}
</style>

75
Ryan Boddy

Output

As you can see, we use display: grid; on a container element to create our
grid itself. Then we use grid-template-columns and grid-template-rows to define how
our grid will be laid out. Also notice that I only define columns here. That’s
because Grid is designed to automatically create new rows or columns for
your content if there is more content than the grid units can hold. Here, I
only define two grid columns, so it splits four divs into two rows in two
columns. The magic of Grid is the fact that we can use special values to create
responsive elements. The most basic of these values is a fractional unit.

What if we want to create a grid whose items automatically take up the

space provided to them in each column or row? Let’s take a look at how we
can do this:

.gridContainer {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
}

76
Conquer CSS

Output

The code above creates two spaces in our grid that take up all available
horizontal space. This means that the elements that take up these spaces will
now shrink and grow in response to different screen sizes without the need
for responsive units. This can also be done with grid-template-rows to ensure
that elements take up all available vertical space within their row. Go ahead
and switch grid-template-columns for grid-template-rows in the code above and see
the difference. The elements will still be responsive, but to changes in height
instead of width.

Another useful unit of measurement in Grid is the auto keyword, which

allows you to fill all available space automatically with a grid item. This can
be useful if you have a mix of static and responsive grid items. Here’s how
this works:

.gridContainer {
display: grid;
width: 100%;
grid-template-columns: 200px auto;
}

77
Ryan Boddy

Output

If you resize your screen, you’ll notice that the grid item with the auto
dimension grows and shrinks to fill the available space. This is helpful with
things like sidebars that may have a set width while the rest of the page shrinks
and grows.

You may have a grid with many elements in each row and want to use
fractional units for your sizing. However, writing out 1fr eight times would
not be very fun. This is where the repeat function comes into play. You can
use repeat along with the fractional unit and the number of times you want
that unit repeated to shorten the amount of code you write. Here is an
example:

<div class="gridContainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
<style>
.gridContainer {
display: grid;

78
Conquer CSS
width: 100%;
grid-template-columns: repeat(8,
1fr);
}
.gridContainer > div {
background-color: orange;
border: 1px solid black;
height: 200px;
padding: 10px;
box-sizing: border-box;
}
</style>

Output

What about the space between our grid items?

Well, that’s easy. Simply add space between your rows or columns with
the column-gap and row-gap properties. This allows you to visually separate your
elements in a manner that may make them more pleasing to the eye. Below is
an example:

.gridContainer {
display: grid;
width: 100%;
grid-template-columns: repeat(4,
1fr);
column-gap: 10px;
row-gap: 10px;
}

79
Ryan Boddy

The final topic we’ll cover relating to Grid is align-items and justify-items.
These properties work similarly to justify-content and align-items in Flexbox, but
they always apply to the same dimensions in Grid. Align-items allows you to
align your grid items vertically, while justify-items allows you to align items
horizontally. You can also combine these two into the place-items shorthand
property. Let’s take a look at how this works:

<div class="gridContainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<style>
body, html {
height: 100%;
}
.gridContainer {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: repeat(2,
1fr);
place-items: center;
}
.gridContainer > div {
background-color: orange;
border: 1px solid black;

80
Conquer CSS
height: 200px;
width: 200px;
padding: 10px;
box-sizing: border-box;
}
</style>

Output

As you can see, we have four vertically and horizontally centered boxes.
This is very useful when you need to center multiple items in one layout.

That’s Grid and Flexbox! We didn’t cover every aspect of these potent
layout systems, but this is enough to get any developer started. Practice with
both systems to get a handle on them and keep them in mind when
considering how you want to lay out your projects in the future.

81
CHAPTER 7

CSS Frameworks

A
t the end of the day, programming languages are just like woodworking
tools. How you use them and what you do with them is totally up to
you. However, some people want the tools, the instructions, and the
nuts and bolts included for their woodworking projects. That is where
frameworks come into play. Just like any other programming language, CSS
has frameworks to choose from.

So, what do I mean when I say framework? CSS frameworks are

external stylesheets (and sometimes accompanying JavaScript files) that have
been created for you. You can use them to quickly add styling to the elements
on your web page by gathering classes from the framework and applying them
to your elements. Oftentimes, these frameworks will also apply basic styling
to your elements like fonts and sizing.

Before we dive into frameworks, I want to talk about the advantages and
disadvantages of using them. Like all things, there are trade-offs when using
a CSS framework, and I want to ensure that they are clear before I give you
some options to pick from.

Advantages

CSS frameworks provide an easy way to implement styling in your projects.

With the simple use of a pre-written class, you can completely transform how
an element looks without writing any custom CSS. Frameworks also provide
functionality that was traditionally much harder to create. Developers used to
have to code things like layout grids from scratch and use work-arounds that
utilized other languages like JavaScript. Frameworks came along and solved
this problem by optimizing and abstracting away all that code so that
developers could hit the ground running with a layout grid. As we learned

82
Conquer CSS

earlier in this book, CSS Grid was eventually introduced, but before that,
frameworks were the easiest way to introduce layout grids.

If you are thinking about putting together a minimum viable product,

and you want to move fast without writing a lot of your own CSS, a
framework is a great choice.

Disadvantages

Frameworks are not without their flaws. If they were, I’d be writing a whole
book on CSS frameworks and not the language itself. First of all, the major
CSS frameworks are used by thousands of developers. This means that you
will have to write some custom CSS on top of your chosen framework to
make your site look unique. A seasoned developer can easily spot a website
or application that uses an out-of-the-box framework styling. Many
frameworks come with the ability to theme their elements by including
additional stylesheets, but even these can often lead to websites and
applications that aren’t one of a kind.

The second disadvantage is based on my personal opinion, which I have

gathered from interviewing and working with junior developers. Frameworks
provide temporary relief to new developers who have reached a point of
frustration with CSS. Using a framework to meet the styling needs of a project
can certainly save some time, but it doesn’t help with actually learning CSS,
which ultimately hinders the developer’s skill level. CSS is like any other skill;
it’s important to master the fundamentals before moving on to more
advanced techniques. I always encourage new developers to style as many
web pages as they can without using a framework. If you don’t feel
comfortable with CSS, it may not be time to pick up a framework just yet.
Keep these advantages and disadvantages in mind as we take a look at
some of the most popular frameworks used in the industry today.

83
Ryan Boddy

Bootstrap

When Twitter released that their internal style guide was Bootstrap 1 in 2011,
it took the development world by storm. Since then, Bootstrap has had over
20 releases and is in its fifth major version as of this writing. Bootstrap has
become prolific in the industry, being known for its simple yet powerful grid
system, fully extensible components, and minimalist design.

Bootstrap is a fully fledged framework with components for content,

forms, and layouts. It also includes several utilities that allow you to change
the appearance of any element through the use of a class. Let’s take a look at
one of the example sites from Bootstrap’s documentation:

As you can see, Bootstrap uses a very minimal design that will spruce up
a web page without making it too busy or cluttered. The components are also
fully extensible, which allows the developer to overwrite or change styles to
match their needs.

Finally, with Bootstrap being such a popular framework, it has been

adapted to be used with all of the other major web frameworks. There are
Bootstrap component libraries for React, Vue, Svelte, and other component-
based web frameworks, making it easy to integrate Bootstrap into any project.

84
Conquer CSS

Material Design

Google and its main properties, YouTube and Gmail, are some of the most
visited websites in the entire world. Throw in the fact that Google owns the
Android OS and it’s hard to find someone who hasn’t used something owned
by Google. With this being the case, the cohesive design of Google’s
properties has become familiar to users around the world. To spread the
Google design further, the company released Material Design in 2014.

Material design is a collection of components that can be used to create

applications that feel familiar to users. The framework has been adapted to
be used as not only a CSS framework, but also a component library for Swift
(iOS), Flutter (cross platform applications), and other mobile development
tools.

Material design is easily themed and has a popular lightweight version

called Material Design Lite. Let’s take a look at an example website called
Fortnightly that was built by designers at Google:

These components likely seem familiar because they are used on so

many applications and devices. If you want to go with a tried-and-true design,
give Material Design a try.

85
Ryan Boddy

Foundation
Unlike Bootstrap and Material design, Foundation was created by a small
team with the goal of creating the easiest, most responsive framework
available. With a focus on mobile first design, this framework is perfect if
you’re working on a codebase that will be reused for a mobile application.
Foundation also has a unique feature in that it has a dedicated library called
“Foundation for Email” that makes the traditionally laborious task of styling
emails much easier.

Let’s take a look at the website for the car brand Subaru, which was built
using Foundation:

As you can see, Foundation focuses on a minimalist design so that sites

are performant across all devices. Foundation, like Bootstrap, also comes with
a myriad of layout and utility tools to make placing their components on the
page easier. These include a grid system, content containers, and typography
tools. If you’re looking for a framework that allows you to easily create
responsive web pages, give Foundation a try.

86
Conquer CSS

Tailwind CSS
Tailwind CSS is the new kid on the block when it comes to CSS frameworks.
Released in May 2019, it quickly gained popularity with developers who
wanted more flexibility from their CSS framework. Tailwind is a utility-first
framework. Unlike other frameworks, it doesn’t focus on pre-built
components for you to use to build your applications. Instead, it comes with
an extensive library of classes that allow you to modify elements without
writing any CSS rules yourself. Tailwind has introduced its own library of
components, but they aren’t the sole focus of the framework.

This approach has its advantages and disadvantages. Tailwind is very

effective for developers who don’t want to take the time to write stylesheets
for their elements. It allows for a shortcut to quick styling without the need
to learn CSS. That being said, it does tend to make HTML elements messier.
This is because it can often take a multitude of classes assigned to an element
to get the intended result.

Let’s take a look at some sample code from Tailwind’s documentation

to see how this framework is different from others that we have already
looked at:
<template>
<ul class="divide-y divide-gray-200">
<li v-for="person in people"
:key="person.email" class="py-4 flex">
<img class="h-10 w-10 rounded-full"
:src="person.image" alt="" />
<div class="ml-3">
<p class="text-sm font-medium text-
gray-900">{{ person.name }}</p>
<p class="text-sm text-gray-500">{{
person.email }}</p>
</div>
</li>
</ul>
</template>

87
Ryan Boddy

The above example is from the documentation on using Tailwind CSS

to create Vue components. Don’t worry about having to know Vue. We can
still walk through this to see what Tailwind is doing. You can see that each
element is using multiple class names to set styling for that individual element.
For example, text-sm font-medium text-gray-900 will set that paragraph’s font-size
to a small font size, set the font-weight to medium, and color the text gray. This
is a drastically different approach from writing our own CSS—or using
components that have been predesigned like we’ve seen in other frameworks.

If you are not a fan of writing CSS and don’t mind longer lists of
classnames in your markup elements, check out Tailwind CSS.

Wrapping Up
These are just a few of the CSS frameworks that are available today. There
are hundreds, if not thousands, to choose from if you’re still looking for the
perfect fit.

Remember, you can always write your own CSS. In the next chapter,
we’ll take a look at some tools that make writing CSS even easier so you can
be faster and more efficient.

88
CHAPTER 8

Preprocessors and Postprocessors

T
hroughout CSS’ evolution, each new specification that was released left
features to be desired by developers. One such example of this was being
able to use variables to store reusable values. This is one of the most
basic features of Turing complete programming languages, but CSS lacked
this ability until the addition of custom properties. Prior to this change, CSS
had to be supplemented with something else to gain this functionality. The
common solution was a preprocessor.

Preprocessors are languages of their own that are similar to CSS but with
the features that developers have requested from CSS throughout the years.
These preprocessor languages are used to write code that is then compiled
into traditional CSS before being shipped to the browser. Features that are
commonly present in preprocessors include reusable variables, nested rules,
and modules. Two of the most popular CSS preprocessors are SASS and
LESS.

SASS/SCSS
Syntactically Awesome Style Sheets (SASS) was first released in 2006. It was
announced as a new way to write CSS that allowed for more flexibility and
less code. This appealed to developers who were tired of writing long
stylesheets with hundreds, if not thousands, of rules that dictated their
website or application’s styling.

Shortly after SASS was set in motion, the SASS team introduced a new
syntax to use with SASS: SCSS, or “Sassy CSS.” This syntax bridged the gap
between traditional CSS and SASS, making it much easier for developers who
were comfortable with CSS to learn and use SASS. In this book, we’ll use
SCSS for examples, but feel free to consult the SASS documentation at

89
Ryan Boddy

https://sass-lang.com/documentation and choose which syntax you’re more

comfortable with.

Let’s take a look at some code to see how SCSS works. The following
shows a good example of many of the SCSS features:

$font: arial;
$primary-color: green;
$font-color: white;

div {
background-color: $primary-color;
width: 50%;
height: 300px;
border: 2px solid darken($primary-color,
20%);
p {
color: $font-color;
font-size: 30px;
padding: 20px;
font-family: $font;
}
}

There is a lot happening in this code that you wouldn’t see in traditional
CSS, so let’s break down what is happening in this SCSS code. First, we start
by declaring variables for font family, font color, and a primary color. The
ability to create variables to store reusable variables is powerful because it
allows developers to write a value one time and change it in various locations.
Next, we create a rule that seems like any CSS rule, but instead of using a
combinator or a selector to target the paragraph tag within our div, we simply
nest the paragraph styling within the div styling. This means that styling will
only apply to paragraphs within that div. Finally, we use the built-in color
module to darken our primary color to create a 20% darker border.

90
Conquer CSS

The next step is compiling our SCSS into CSS that our browser will
understand. I use a tool in my code editor called Visual Studio Code to
compile my SCSS, but there are many methods out there that allow you to do
this. After compiling our SCSS, the compiler generates a CSS file that looks
like this:

div {
background-color: green;
width: 50%;
height: 300px;
border: 2px solid #001a00;
}

div p {
color: white;
font-size: 30px;
padding: 20px;
font-family: arial;
}
/*# sourceMappingURL=sass.CSS.map */

As you can see, this is all regular CSS we can understand. It may not look
like we saved a lot of time, but in using SCSS, you can cut down on a
multitude of lines when writing more complex stylesheets. When we link this
new CSS file in the head of our HTML and refresh the page, we get the
following output:

Everything went as planned! As you create more and more elements,

reuse variables in more locations, nest more rules, and use more advanced
modules, you’ll see that it becomes much faster to write CSS with these new
features. Let’s take a look at another preprocessor now so you can see
different implementations of these concepts.
91
Ryan Boddy

LESS
LESS is very similar to SASS when it comes to the feature set. LESS was
launched in 2009 and shipped with variables, nesting, and mixins—just like
SASS. Where LESS stands on its own is in its ability to perform operations.
Operations add the ability to perform mathematical calculations within your
CSS. This sophisticated tool is very attractive to developers who are used to
having the ability to perform these calculations in other languages.

While LESS’s syntax is designed with the same goal as SCSS of having
more succinct stylesheets before compilation, there are some distinctions
between the two. Let’s take a look at some LESS code to see how the syntax
differs from SCSS:

@font: arial;
@primary-color: green;
@font-color: white;

div {
background-color: @primary-color;
width: 50%;
height: 300px;
border: 2px solid darken(@primary-color, 10%
+ 10%);
p {
color: @font-color;
font-size: 30px;
padding: 20px;
font-family: @font;
}
}

As you can see, the code is vastly similar. Notice how the nesting is the
same as in SCSS. The only syntactic difference is the way we create and
reference variables. The darken mixin is the same as the darken module in

92
Conquer CSS

SCSS, but in LESS, the use of operations to calculate our darken percentage
is distinct. You can see that instead of 20%, I demonstrate the addition
operation by adding 10% to 10%. This isn’t necessary, but I have included it
to demonstrate the biggest differentiator between LESS and SCSS. If you’re
looking for a preprocessor that introduces more of the traditional logic that
other programming languages have, check out LESS.

Postprocessors
We’ve seen two different preprocessors, and we know that they let us extend
the features of CSS. There is, however, another approach to maximizing our
CSS in the form of a postprocessor. Postprocessors work differently from
preprocessors in that they evaluate your CSS and make it better after it’s been
written. Postprocessors use best practices to perform mutations on your CSS
to make it suitable for the browser.

Some of the following are examples of what a postprocessor may do:

● Add fallback values such as backup fonts and measurements

● Add missing WebKit properties for cross-browser support
● Combine redundant media queries
● Minify code to decrease bundle size
● Find errors within your CSS

Don’t worry if you don’t know what all of this means. As you become
more experienced with CSS and use postprocessors, these terms and features
will make more sense. Let’s explore some of our options when it comes to
postprocessors.

Pleeease
No, that’s not a typo. This postprocessor is actually called “Pleeease.”
Pleeease’s official motto is “All the annoying CSS stuff we don't want to do
in one tool!”—and for good reason. Pleeease provides the ability to add
WebKit prefixes if any are missing from your code. We won’t cover WebKit
prefixes in this book, but they essentially allow you to achieve much better
cross-browser support with your CSS. They also add fallback units in pixels

93
Ryan Boddy

if you are using responsive units like rems. This feature ensures that your
measurements always appear the way they should, even if the user is on a
device or browser that doesn’t support rems. Pleeease also minifies your code,
which is the process of removing whitespace, renaming long variables, and
removing comments for final production code to make it faster to load.

These are just a few features of Pleeease. If you are interested in giving
it a try, check out the documentation at http://pleeease.iamvdo.me/docs/.

PostCSS
PostCSS is similar to Pleeease in that it offers an abundance of
transformations that can be applied to your CSS to optimize it. Where it
differs is the ecosystem that has been developed around it. PostCSS is written
in JavaScript, so it is easy to create and share bits of functionality that you can
integrate for yourself. A rich collection of plugins for features like fonts, grids,
and fallbacks is available to be taken advantage of.

If you’re looking for the same feature set as Pleeease with the added
benefit of plugin availability, give PostCSS a try. You can find their
documentation on Github here:
https://github.com/postCSS/postCSS/tree/main/docs.

The reason I am introducing preprocessors and postprocessors at the

end of this book is because they often highlight features that developers are
left wanting from CSS. Until recently, using CSS variables was a feature you
had to use a preprocessor for. Today, they are part of the language
specification.

Using processors can show you what CSS may look like in the future as
this language grows and evolves. Programming languages are always changing
and improving. Many of the features that developers love from processors
have already been implemented in the language.
Consider processors to be crystal balls that allow you to see the future
of CSS. Do you want more logic to be introduced into the language? LESS is
already showing what that would look like. Do you want more built-in

94
Conquer CSS

functions like darken() or lighten() for color values? SASS/SCSS shows that off
wonderfully.
CSS is always getting better, and you can grow with it too now that you
have a firmer grasp on the fundamentals.

95
CHAPTER 9

This Is Only the Beginning

C
SS is a wonderful language that allows developers to make the beauty
of their designs a reality. Not only does it make websites and
applications look good, but it also makes them accessible to billions of
people by allowing developers to create responsive interfaces that work on
any device. None of this would be possible without CSS, which is why it’s so
important. My goal with this book was to make CSS more accessible to you—
the developer, the dreamer, the creator. The goal is to make the web a more
beautiful place. I hope you’ve learned something in this book to help further
that goal.

As I said in the introduction, this book is aimed at total beginners with

the hope being that there is something in it for everyone. That being said,
there is so much more that you can do with CSS than what’s in this book. I
hope you enjoyed what we have covered here and learned something useful.
I encourage you to continue honing your CSS skills so that you can create a
more beautiful web.

Thank you so much for reading.

96
AUTHOR BIO
Ever since the day he first opened up a computer science textbook in second
grade, Ryan Boddy knew he wanted to become a “computer scientist.” He
has pursued that dream since then and learned the valuable skills that became
the basis of a career in the software development industry. After holding a
slew of interesting jobs across several niches in the industry, Ryan decided to
merge his lifelong bucket list item of writing a book with his desire to share
what he had learned over the years.

Ryan resides in North Carolina with his amazing wife, son, and daughter.
He spends his spare time creating written and video content about the
software industry and web development.

97
ONE FINAL FAVOR…
Thank you again for reading Conquering CSS! This book means a lot to me. I
hope you got some value out of it!

Can I ask one final, huge favor?

I want to help others like you learn the magic of CSS so we can all create
a more beautiful web together. The easiest way to get this book in front of
more people is with a review on Amazon, or wherever you purchased it.

I’m asking you to be 100% honest. Did you love the book? Let me know.
Hated it? I welcome that feedback as well.

I already can’t thank you enough for reading, but a review would make
me endlessly grateful.

BDs Big Book of Length (Grant Jacob Scott) (Z-Library)
100% (5)
BDs Big Book of Length (Grant Jacob Scott) (Z-Library)
112 pages
Mesmerizing Phrases Part1 1
100% (10)
Mesmerizing Phrases Part1 1
449 pages
SkipTheFlip Physical PDF
100% (5)
SkipTheFlip Physical PDF
230 pages
Trigger His Desires
67% (3)
Trigger His Desires
104 pages
Bounce Back BIG by Sonia Ricotti
100% (1)
Bounce Back BIG by Sonia Ricotti
36 pages
Hook, Line, & Book
No ratings yet
Hook, Line, & Book
264 pages
Marius Panzarella - The Pickup Handbook PDF
100% (1)
Marius Panzarella - The Pickup Handbook PDF
75 pages
A Plum in The Syrup
No ratings yet
A Plum in The Syrup
101 pages
Water Scrum Fall - Forrester
No ratings yet
Water Scrum Fall - Forrester
17 pages
Journal Empire: How To Make Money With Journals and Planners
100% (10)
Journal Empire: How To Make Money With Journals and Planners
74 pages
Paperback
No ratings yet
Paperback
160 pages
Buy The Complete Version of This Book At: The Organized Writer: 30 Days To More Time, More Money and Less Frustration
No ratings yet
Buy The Complete Version of This Book At: The Organized Writer: 30 Days To More Time, More Money and Less Frustration
14 pages
The Blogger'S Survival Guide: Lexie Lane & Becky Mcneer
No ratings yet
The Blogger'S Survival Guide: Lexie Lane & Becky Mcneer
18 pages
Closer Than You Think
100% (1)
Closer Than You Think
145 pages
Secret Life Changing Spells
No ratings yet
Secret Life Changing Spells
88 pages
The Solitary Partner: Finding Ways To Thrive in a One-Person Marriage
From Everand
The Solitary Partner: Finding Ways To Thrive in a One-Person Marriage
Aziza J
No ratings yet
The Complete Guide To Winning Business Finance Interviews V1 PDF
No ratings yet
The Complete Guide To Winning Business Finance Interviews V1 PDF
58 pages
How to Write a Book in 48 Hours: A Simple Step-by-Step System for Writing a Good Book Fast
From Everand
How to Write a Book in 48 Hours: A Simple Step-by-Step System for Writing a Good Book Fast
Dale L. Roberts
No ratings yet
B0D4B44K59
No ratings yet
B0D4B44K59
153 pages
couple_therapy_workbook_
No ratings yet
couple_therapy_workbook_
95 pages
The-Silent-Salesman - Anik Sengal
67% (3)
The-Silent-Salesman - Anik Sengal
68 pages
The Lion’s Mindset: Master the Mentality of Success
From Everand
The Lion’s Mindset: Master the Mentality of Success
Ben Bennett
No ratings yet
Align Your Life With Good Prayerforce: Excerpted Prayers From
No ratings yet
Align Your Life With Good Prayerforce: Excerpted Prayers From
51 pages
Sonia Ricotti
100% (1)
Sonia Ricotti
36 pages
Your Self Your Esteem Look in the Mirror
From Everand
Your Self Your Esteem Look in the Mirror
DUKE KING
No ratings yet
Bounce+Back+BIG+by+Sonia+Ricotti+in+2025
No ratings yet
Bounce+Back+BIG+by+Sonia+Ricotti+in+2025
36 pages
The One Month Author: How To Write A Book Faster & Better
From Everand
The One Month Author: How To Write A Book Faster & Better
Barringham
5/5 (1)
THEREBIRTH? pdf
No ratings yet
THEREBIRTH? pdf
126 pages
Authentic King Manual
71% (7)
Authentic King Manual
300 pages
First Four Chapters of How To Value Invest
No ratings yet
First Four Chapters of How To Value Invest
23 pages
And There She Goes Her Way
From Everand
And There She Goes Her Way
Josi Dumont
No ratings yet
Dark Psychology 3 in 1 2
No ratings yet
Dark Psychology 3 in 1 2
282 pages
Attract Your Soulmate Now - Bonus - Susie & Otto Collins - Relationship Attractor Factor
No ratings yet
Attract Your Soulmate Now - Bonus - Susie & Otto Collins - Relationship Attractor Factor
189 pages
INFLUENCE: Overthinking Everything About Social Media
From Everand
INFLUENCE: Overthinking Everything About Social Media
Josh Brandon
No ratings yet
The Writer's Plan
From Everand
The Writer's Plan
JD Lovil
No ratings yet
ESSENTIALISM, MINIMALISM,DECLUTTERING
From Everand
ESSENTIALISM, MINIMALISM,DECLUTTERING
MARK CREED
No ratings yet
Guaranteed $150-$300+ Daily Income On Autopilot - Just Take The First Step!
No ratings yet
Guaranteed $150-$300+ Daily Income On Autopilot - Just Take The First Step!
19 pages
So You Want to Start a Side Hustle Carrie Bohlig pdf download
100% (1)
So You Want to Start a Side Hustle Carrie Bohlig pdf download
57 pages
Get Conquer Procrastination: Proven Strategies to Maintain Productivity and Take Control of Your Life Nadalie Bardo PDF ebook with Full Chapters Now
100% (4)
Get Conquer Procrastination: Proven Strategies to Maintain Productivity and Take Control of Your Life Nadalie Bardo PDF ebook with Full Chapters Now
57 pages
What changes-do-NOIVADO-AO-CASAMENTO versao inglesa
No ratings yet
What changes-do-NOIVADO-AO-CASAMENTO versao inglesa
57 pages
How To Naturally Regrow Lost Hair in 15 Minutes A Day
100% (2)
How To Naturally Regrow Lost Hair in 15 Minutes A Day
96 pages
AbsoluteSuccessCoaching Vol1
100% (1)
AbsoluteSuccessCoaching Vol1
78 pages
Ebook Clear Sentence Writing
No ratings yet
Ebook Clear Sentence Writing
54 pages
Shadow Work Guide - Ebook
No ratings yet
Shadow Work Guide - Ebook
20 pages
Retiring Procrastination Before Tomorrow
From Everand
Retiring Procrastination Before Tomorrow
Gavin Rankin
No ratings yet
Success Rituals
From Everand
Success Rituals
Selina Mantey
No ratings yet
Decision Point: The First Book You Read If You Want to Succeed
From Everand
Decision Point: The First Book You Read If You Want to Succeed
Nathan John
No ratings yet
Personal Power Revolution
100% (3)
Personal Power Revolution
23 pages
Aging Sucks... But You're Gonna Love It!
From Everand
Aging Sucks... But You're Gonna Love It!
Brenda Ackerman
No ratings yet
Crimes Against Mine Planning - Final
100% (1)
Crimes Against Mine Planning - Final
207 pages
Fullstackrecruiter Tegze
No ratings yet
Fullstackrecruiter Tegze
112 pages
Intentional Profit: Master Your Mindset & Money For a Wildly Wealthy Business
From Everand
Intentional Profit: Master Your Mindset & Money For a Wildly Wealthy Business
Clare Wood
No ratings yet
Awaken Your Inner Power: Change Your Vibe, Change Your Life!
From Everand
Awaken Your Inner Power: Change Your Vibe, Change Your Life!
Angelo Yanez
No ratings yet
An8SsGXV0uUPjfguepclVsS FjOJKECfT4fw-CNMHSw94UtYN5pz9x8cJfX9hLHekU9Om5hu 3kIOTtIkPI1MjX5KGS4eBi3o1eNMgQdF2H6dfnonHzteKf352Iu9z0
No ratings yet
An8SsGXV0uUPjfguepclVsS FjOJKECfT4fw-CNMHSw94UtYN5pz9x8cJfX9hLHekU9Om5hu 3kIOTtIkPI1MjX5KGS4eBi3o1eNMgQdF2H6dfnonHzteKf352Iu9z0
128 pages
2025 Rental Riches v1
No ratings yet
2025 Rental Riches v1
433 pages
Create Your Dream Life
100% (4)
Create Your Dream Life
113 pages
Empowering Self-Esteem for Young Boys Building Confidence and Strength: 11 Inspiring Stories That Foster Self-Confidence for Teens and Encourage Growth Mindset
From Everand
Empowering Self-Esteem for Young Boys Building Confidence and Strength: 11 Inspiring Stories That Foster Self-Confidence for Teens and Encourage Growth Mindset
Devon Ashley Abbruzzese
No ratings yet
Bounce Back BIG by Sonia Ricotti (2020) PDF
100% (1)
Bounce Back BIG by Sonia Ricotti (2020) PDF
36 pages
The Danger of a Single Story
From Everand
The Danger of a Single Story
Ms Khan
No ratings yet
1 % Better Each Day
From Everand
1 % Better Each Day
Marjo Alkula
No ratings yet
Essentialism in Self-Publishing: An Essentialist Guide to Simplify Writer's Process of Writing, Self-Editing, & Self-Publishing Bestsellers
From Everand
Essentialism in Self-Publishing: An Essentialist Guide to Simplify Writer's Process of Writing, Self-Editing, & Self-Publishing Bestsellers
Mecyll Gaspary
No ratings yet
CSC121 Scheme of Work
No ratings yet
CSC121 Scheme of Work
2 pages
CV - Vo Thanh Phu - Java
No ratings yet
CV - Vo Thanh Phu - Java
2 pages
UFR Series NFC Reader API
No ratings yet
UFR Series NFC Reader API
426 pages
Receipt of Handling Units (Hus) Using RF
No ratings yet
Receipt of Handling Units (Hus) Using RF
3 pages
Software-Design-Modeling (Set 4)
No ratings yet
Software-Design-Modeling (Set 4)
21 pages
Automate File Transfers (Or Synchronization) To FTP Server or SFTP Server - WinSCP
No ratings yet
Automate File Transfers (Or Synchronization) To FTP Server or SFTP Server - WinSCP
6 pages
1.2 Basic Syntax, Data Types, and Variables
100% (1)
1.2 Basic Syntax, Data Types, and Variables
11 pages
Module 11 - Dynamic Memory Allocation
No ratings yet
Module 11 - Dynamic Memory Allocation
58 pages
Unit 14 Text 14a+tasks
No ratings yet
Unit 14 Text 14a+tasks
4 pages
Data Eng With Python Internal
No ratings yet
Data Eng With Python Internal
2 pages
Unit-5 Shell Programming
No ratings yet
Unit-5 Shell Programming
11 pages
Step-By-Step: 1st Step All Steps Answer Only
No ratings yet
Step-By-Step: 1st Step All Steps Answer Only
2 pages
Sistemet Operative Funksionet e Sistemit Operativ: Lënda
No ratings yet
Sistemet Operative Funksionet e Sistemit Operativ: Lënda
30 pages
Introduction To Java: - Access Specifiers
No ratings yet
Introduction To Java: - Access Specifiers
9 pages
API WhitePaper
100% (5)
API WhitePaper
14 pages
ETL CV
100% (1)
ETL CV
42 pages
RPG Free - Tutorial 4
No ratings yet
RPG Free - Tutorial 4
9 pages
Anmol's CV
No ratings yet
Anmol's CV
1 page
Quectel OpenCPU Quick Start Application Note V1.1
No ratings yet
Quectel OpenCPU Quick Start Application Note V1.1
34 pages
HTML - Draw An X in CSS - Stack Overflow
No ratings yet
HTML - Draw An X in CSS - Stack Overflow
14 pages
Rishi's Resume
No ratings yet
Rishi's Resume
1 page
Jquery-Ui Js
No ratings yet
Jquery-Ui Js
284 pages
Object Oriented Design
No ratings yet
Object Oriented Design
37 pages
ABAP Statements - Overview
No ratings yet
ABAP Statements - Overview
29 pages
JDBC Driver Manager
No ratings yet
JDBC Driver Manager
9 pages
Data File Handling in C++
No ratings yet
Data File Handling in C++
10 pages
Date, A C++ Class For Dates.: Bernt Arne Ødegaard
No ratings yet
Date, A C++ Class For Dates.: Bernt Arne Ødegaard
6 pages
1 Introduction To Software Engineering
No ratings yet
1 Introduction To Software Engineering
18 pages
Chapter 3 - Values and Data Types - Solutions For Class 10 ICSE Logix Kips Computer Applications With BlueJ Java - KnowledgeBoat
No ratings yet
Chapter 3 - Values and Data Types - Solutions For Class 10 ICSE Logix Kips Computer Applications With BlueJ Java - KnowledgeBoat
23 pages