The CSS Guide: The Complete Guide to Modern CSS

By Tim Robards

Whether you're new to web development or a more seasoned developer looking to refine your skills. The CSS Guide will take you from beginner to expert!

We'll cover the basics from specificity & selectors right through to the modern layout methods of Flexbox & Grid. We'll also be diving into advanced topics such as CSS animation, architecture & more!

• Language: English
• Publisher: Tim Robards
• Release date: Sep 25, 2020
• ISBN: 9781777383800

Tim Robards

Web developer, writer & creator of easeout.co.

Book preview

The CSS Guide

The CSS Guide

The Complete Guide to Modern CSS.

Tim Robards

© 2020 Tim Robards

Table of Contents

Introducing CSS

What is CSS?

Adding CSS to your projects

The Cascade

Inheritance

Specificity

Selectors

Selecting Elements

Attribute Selectors

Pseudo Classes

Pseudo Elements

Fundamentals

The Box Model

Margins

Padding

Borders

Commenting

Fonts

Styling Lists

The ‘calc’ Function

Backgrounds & Colors

Backgrounds

Colors & Keywords

Hex

RGB & RGBa

HSL & HSLa

Units

Introduction

Pixels & Percentages

Font Relative Units

Viewport Units

Layout

The Display Property

Positioning

z-index

Flexbox

Grid

Centering

Media Queries

Animating your CSS

Filters

Transforms

Transitions

Animations

CSS Architecture

Feature Queries

Custom Properties (Variables)

Resets & Normalization

Vendor Prefixing

Conclusion

Introducing CSS

What is CSS?

Cascading Style Sheets (or CSS) is the language that we use to style webpages.

With CSS, we have a place for all our style-related code. This way our HTML can exist purely to define the structure of the document, rather than how things should look in the browser.

CSS is continuously evolving thanks to an incredibly passionate community of developers. And it’s remarkable to see what we’re now able to achieve with CSS - compared to just a few years ago.

The basics of CSS are quite easy to learn. And by working your way to true mastery, you’ll gain complete confidence when controlling the presentation of HTML documents!

What can we do with CSS?

CSS can style almost any HTML tag that creates a visible element on the page. Such as the HTML tags used to create headings, paragraphs, links, images, lists, and tables.

We can adjust our text size, colors, fonts, and element alignment.

We can also animate our elements & create movement on a page.

We can even adapt the presentation to different types of devices, such as large screens, small screens, or printers.

Adding CSS to your projects

There are 3 ways to load CSS into a page:

Using a link tag

Using style tags

Using inline styles

Let’s compare each method:

Using the link tag

This is the preferred way to use CSS! Our CSS file is connected to all our pages. So when we make changes to the CSS file, they’re reflected on all the pages in the site.

We do this by adding a link tag with the href attribute pointing to the CSS file you want to include.

Note: This line of code must be added inside the head tag of your HTML (not inside the body tag):

1 <link rel=stylesheet type=text/css href=styles.css>

The rel and type attributes are required too, as they tell the browser which kind of file we are linking too.

Using the style tag

We’re also able to use CSS directly inside a style tag. Like so:

1 <style> 2 ...CSS code... 3 </style>

Using this method we can avoid creating a separate CSS file.

The point of CSS is to seperate our presentation from our document structure - so it’s not best practise. However, it can be a good way to quickly test some CSS, before working with a separate file.

Inline styles

Inline styles are yet another way to add CSS to a page. We can add a style attribute to any HTML tag, and add in any CSS we want between the double-quotes:

1 <div style=>...</div>

For example:

1 <div style=background-color: orange>...</div>

The Cascade

It’s the ‘C’ in CSS (Cascading Style Sheets). So conceptually it lies at the very core of CSS. The Cascade is the algorithm which determines the properties applied to page elements.

This determination is made based on inheritance, specificity, importance, & rule order.

The Cascade also ensures we have no conflicts. In the case where we have multiple CSS rules, for the same property & on the same element. It determines which rule is applied.

So while keeping the cascade in mind, let’s look at the rules it uses to make these decisions! Starting with Inheritance.

Inheritance

CSS inheritance works on a property by property basis.

When you set properties on a selector in CSS, they are either inherited by all the children of that selector or not. It depends on the property!

The reason for this is that some properties make sense to be inheritable, whilst others do not.

When working with fonts, you don’t need to apply styles such as font-family or font-size to every single element on your page. You can simply set these styles on the body tag & every child will inherit it.

Yet a property such as background-color, makes little sense to be inherited. So the children of the element that this is applied to, will not inherit this property.

You can check if a particular property is inheritable here.

Inheritance helps us write our CSS much more concisely. As we reduce repetition, by not having to explicitly set each property, in every child element.

Enforcing Property Inheritance

If a property is not inheritable by default, you can force inheritance to its children.

In the child selector, you set the property value to inherit.

For example:

1 body { 2   background-color: red; 3 } 4 p { 5   background-color: inherit; 6 }

Avoiding Property Inheritance

The reverse is also possible. By using the revert keyword, the property will not inherit from its parent. In this case, the value is reverted to the original default given by the browser.

Initial & Unset

It’s worth mentioning that we can also use the initial & unset keywords.

initial: sets a CSS property to its default value (the browser default).

unset: resets a property to its inherited value if it inherits from its parent, and to its initial value if not.

Next up, we’ll take a look at the concept of specificity, and learn how it works!

Specificity

When an element is targeted by multiple CSS rules — specificity comes into play!

For example, let’s take a look at the following element:

1 <p class=surname> 2   Smith 3 </p>

We could have one rule selecting our class:

1 .surname { 2   color: red; 3 }

And another rule targeting p, which sets the color to a different value:

1 p { 2   color: green; 3 }

And we could even have another rule targeting p.surname.

So which rule will take precedence over the others, and why?

This is where the rules of specificity come into consideration..

The more specific rule will always win. And if two or more rules have the same specificity, the one that appears last wins.

Specificity is in fact determined by a calculation. The more specific a style rule is, the higher point value it accrues, and the likelier it is to be present on the element’s style.

How we calculate Specificity

Understanding how specificity works will greatly reduce any frustrations we may have with CSS.

If we’ve applied a style to an element that isn’t taking effect, the culprit is likely to be a selector that isn’t specific enough!

To perform the calculation, think of 4 slots with each of them starting at 0.

0 0 0 0

The slot on the left is the most important, and the rightmost is the least important.

Therefore 1 0 0 0 is higher than 0 1 0 0.

Slot 1

The first slot, the rightmost one (0 0 0 0), is the least important.

This value changes when we have a type selector. A type is a tag name. If you have more than one type selector in the rule, increment the value stored in this slot.

For example:

1 p {}        /* 0 0 0 1 */ 2 span

Reviews for The CSS Guide

[Dez · Rating: 5 out of 5 stars]

It's a great book for beginners. I like it <3.