The CSS HandBook - Flavio Copes, Exercícios de Tecnologia de Informação e de Computadores

Baixe The CSS HandBook - Flavio Copes e outras Exercícios em PDF para Tecnologia de Informação e de Computadores, somente na Docsity!

Table of Contents

Preface Introduction to CSS A brief history of CSS Adding CSS to an HTML page Selectors Cascade Specificity Inheritance Import Attribute selectors Pseudo-classes Pseudo-elements Colors Units url calc Backgrounds Comments Custom Properties Fonts Typography Box Model Border Padding Margin Box Sizing Display Positioning Floating and clearing z-index

Preface

Welcome!

I wrote this book to help you quickly learn CSS and get familiar with the advanced CSS topics. CSS, a shorthand for Cascading Style Sheets, is one of the main building blocks of the Web. Its history goes back to the 90's and along with HTML it has changed a lot since its humble beginnings. Having created websites since before CSS existed, I have seen its evolution. CSS is an amazing tool, and in the last few years it has grown a lot, introducing many fantastic features like CSS Grid, Flexbox and CSS Custom Properties. This handbook is aimed at a vast audience. First, the beginner. I explain CSS from zero in a succinct but comprehensive way, so you can use this book to learn CSS from the basics. Then, the professional. CSS is often considered like a secondary thing to learn, especially by JavaScript developers. They know CSS is not a real programming language, they are programmers and therefore they should not bother learning CSS the right way. I wrote this book for you, too. Next, the person that knows CSS from a few years but hasn't had the opportunity to learn the new things in it. We'll talk extensively about the new features of CSS, the ones that are going to build the web of the next decade. CSS has improved a lot in the past few years and it's evolving fast. Even if you don't write CSS for a living, knowing how CSS works can help save you some headaches when you need to understand it from time to time, for example while tweaking a web page. Thank you for getting this ebook. My goal with it is to give you a quick yet comprehensive overview of CSS. Flavio You can reach me via email at [email protected], on Twitter @flaviocopes. My website is flaviocopes.com.

Preface

Preface

}color: blue;

A selector can target one or more items:

p, a {font-size: 20px; }

and it can target HTML tags, like above, or HTML elements that contain a certain class attribute with .my-class , or HTML elements that have a specific id attribute with #my-id. More advanced selectors allow you to choose items whose attribute matches a specific value, or also items which respond to pseudo-classes (more on that later)

Semicolons

Every CSS rule terminates with a semicolon. Semicolons are not optional, except after the last rule, but I suggest to always use them for consistency and to avoid errors if you add another property and forget to add the semicolon on the previous line.

Formatting and indentation

There is no fixed rule for formatting. This CSS is valid:

p{ font-size: 20px ; } a{color:blue;}

but a pain to see. Stick to some conventions, like the ones you see in the examples above: stick selectors and the closing brackets to the left, indent 2 spaces for each rule, have the opening bracket on the same line of the selector, separated by one space. Correct and consistent use of spacing and indentation is a visual aid in understanding your code.

Introduction to CSS

Introduction to CSS

Browsers weren't especially fast at implementing CSS. We had to wait until 2002 to have the first browser implement the full CSS specification: IE for Mac, as nicely described in this CSS Tricks post: https://css-tricks.com/look-back-history-css/ Internet Explorer implemented the box model incorrectly right from the start, which led to years of pain trying to have the same style applied consistently across browsers. We had to use various tricks and hacks to make browsers render things as we wanted. Today things are much, much better. We can just use the CSS standards without thinking about quirks, most of the time, and CSS has never been more powerful. We don't have official release numbers for CSS any more now, but the CSS Working Group releases a "snapshot" of the modules that are currently considered stable and ready to be included in browsers. This is the latest snapshot, from 2018: https://www.w3.org/TR/css-2018/ CSS Level 2 is still the base for the CSS we write today, and we have many more features built on top of it.

A brief history of CSS

Adding CSS to an HTML page

CSS is attached to an HTML page in different ways.

1: Using the link tag

The link tag is the way to include a CSS file. This is the preferred way to use CSS as it's intended to be used: one CSS file is included by all the pages of your site, and changing one line on that file affects the presentation of all the pages in the site. To use this method, you add a link tag with the href attribute pointing to the CSS file you want to include. You add it inside the head tag of the site (not inside the body tag):

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

2: using the style tag

Instead of using the link tag to point to separate stylesheet containing our CSS, we can add the CSS directly inside a style tag. This is the syntax:

Using this method we can avoid creating a separate CSS file. I find this is a good way to experiment before "formalising" CSS to a separate file, or to add a special line of CSS just to a file.

3: inline styles

Inline styles are the third way to add CSS to a page. We can add a style attribute to any HTML tag, and add CSS into it.

...

Adding CSS to an HTML page

Selectors

A selector allows us to associate one or more declarations to one or more elements on the page.

Basic selectors

Suppose we have a p element on the page, and we want to display the words into it using the yellow color. We can target that element using this selector p , which targets all the element using the p tag in the page. A simple CSS rule to achieve what we want is:

p {color: yellow; }

Every HTML tag has a corresponding selector, for example: div , span , img. If a selector matches multiple elements, all the elements in the page will be affected by the change. HTML elements have 2 attributes which are very commonly used within CSS to associate styling to a specific element on the page: class and id. There is one big difference between those two: inside an HTML document you can repeat the same class value across multiple elements, but you can only use an id once. As a corollary, using classes you can select an element with 2 or more specific class names, something not possible using ids. Classes are identified using the. symbol, while ids using the # symbol. Example using a class:

Roger

.dog-name {color: yellow; }

Selectors

Example using an id:

Roger

#dog-name {color: yellow; }

Combining selectors

So far we've seen how to target an element, a class or an id. Let's introduce more powerful selectors.

Targeting an element with a class or id

You can target a specific element that has a class, or id, attached. Example using a class:

Roger

p.dog-name { }color: yellow;

Example using an id:

Roger

p#dog-name { }color: yellow;

Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We'll see what that means later.

Selectors

p, .dog-name {color: yellow; }

You can add spaces in those declarations to make them more clear:

p,.dog-name { color: yellow; }

Follow the document tree with selectors

We've seen how to target an element in the page by using a tag name, a class or an id. You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a span tag nested inside a p tag, you can target that one without applying the style to a span tag not included in a p tag:

Hello!

My dog name is: Roger

p span {color: yellow; }

See how we used a space between the two tokens p and span. This works even if the element on the right is multiple levels deep. To make the dependency strict on the first level, you can use the > symbol between the two tokens:

p > span {color: yellow; }

Selectors

In this case, if a span is not a first children of the p element, it's not going to have the new color applied. Direct children will have the style applied:

This is yellow This is not yellow

Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the + operator: Example:

p + span {color: yellow; }

This will assign the color yellow to all span elements preceded by a p element:

This is a paragraph

This is a yellow span

We have a lot more selectors we can use: attribute selectors pseudo class selectors pseudo element selectors We'll find all about them in the next sections.

Selectors

Specificity

What happens when an element is targeted by multiple rules, with different selectors, that affect the same property? For example, let's talk about this element:

Roger

We can have

.dog-name {color: yellow; }

and another rule that targets p , which sets the color to another value:

p { }color: red;

And another rule that targets p.dog-name. Which rule is going to take precedence over the others, and why? Enter specificity. The more specific rule will win. If two or more rules have the same specificity, the one that appears last wins. Sometimes what is more specific in practice is a bit confusing to beginners. I would say it's also confusing to experts that do not look at those rules that frequently, or simply overlook them.

How to calculate specificity

Specificity is calculated using a convention. We have 4 slots, and each one of them starts at 0: 0 0 0 0 0. The slot at the left is the most important, and the rightmost one is the least important. Like it works for numbers in the decimal system: 1 0 0 0 is higher than 0 1 0 0.

Specificity

Slot 1

The first slot, the rightmost one, is the least important. We increase this value when we have an element selector. An element is a tag name. If you have more than one element selector in the rule, you increment accordingly the value stored in this slot. Examples:

p {}span {} (^) /* 0 0 0 1 // 0 0 0 1 / p span {}p > span {} / 0 0 0 2 // 0 0 0 2 / div p > span {} / 0 0 0 3 */

Slot 2

The second slot is incremented by 3 things: class selectors pseudo-class selectors attribute selectors Every time a rule meets one of those, we increment the value of the second column from the right. Examples:

.name {}.users .name {} (^) /* 0 0 2 0 // 0 0 1 0 / [href$='.pdf'] {} / 0 0 1 0 / :hover {} / 0 0 1 0 */

Of course slot 2 selectors can be combined with slot 1 selectors:

div .name {} /* 0 0 1 1 / a[href$='.pdf'] {}.pictures img:hover {} (^) / 0 0 2 1 // 0 0 1 1 */

One nice trick with classes is that you can repeat the same class and increase the specificity. For example:

.name {} /* 0 0 1 0 / .name.name {}.name.name.name {} / 0 0 2 0 // 0 0 3 0 */

Specificity