Joe Attardi - Modern CSS

Chances are that you already have some idea of what CSS is, or else you probably wouldnt have been interested in this book. But lets start at the beginning, to make sure were all on the same page. CSS stands for Cascading Style Sheets. Its the way that we style our websites. Without CSS, every website would just be black Times New Roman with tiny buttons.

Its capable of much more than styling text, however. CSS lets us define entire layouts, position elements, and even perform animations. Style sheets is self-explanatory, but what is a cascading style sheet? Because more than one style rule could apply to a given HTML element, there needs to be some way to determine which rule should apply in the event of a conflict. The styles cascade from less specific to more specific selectors, and the most specific rule wins. Specificity is an important concept in CSS, and we will discuss that in more detail later.

CSS rules target HTML elements by using selectors.

Later, we will have an entire chapter dedicated to selectors. A rule consists of a selector, followed by an opening curly brace. Then there are one or more CSS properties set, delimited with semicolons. Finally, the rule ends with a closing curly brace. Every element in the document that is matched by the selector has the properties in the CSS rule applied to it. Heres an example of a CSS rule: CSS .header { background-color : red ; border : 1px solid blue ; } This rule targets any element with the class header (more on classes later).

Any element with this class will have a red background, and a 1 pixel solid blue border. background-color and border are CSS properties. The border width is specified as 1px . px is a unit in CSS. There are several useful units, including em , rem , or % . We will learn about the different CSS units in an upcoming chapter.

If the same property is used more than once, the later definition wins. Given the following CSS: CSS .header { background-color : red ; background-color : blue ; } The resulting element will have a blue background. CSS can also contain comments: CSS /* This is a comment outside of a rule */ .header { /* This is a comment inside of a rule */ background: red ; }

There are several ways to use CSS in an HTML document. The first is by using inline styles . Inline styles are specified as CSS properties in the style attribute of an HTML element: HTML Any CSS properties specified as inline styles takes precedence over any other rules defined in a style sheet. CSS rules can also be specified in a style sheet in the HTML document itself. CSS rules can also be specified in a style sheet in the HTML document itself.

This is done by creating a element and adding the CSS rules inside that element: HTML/CSS p { margin-bottom : 0.5em ; }

Lastly, CSS rules can be specified in a file with the .css extension. Then, the style sheet is added to the HTML document with a link tag in the head element: HTML rel= "stylesheet" href= "/path/to/file.css" >
The Mozilla Developer Network, or MDN, has an extensive reference to all CSS properties, including usage, examples, and browser support information. The CSS section can be found at https://developer.mozilla.org/en-US/docs/Web/CSS . You will see references to different MDN pages extensively throughout this book. If you need to quickly check if a feature is supported in your favorite browser, a great resource is https://caniuse.com . Simply type in the name of the CSS property, for example, and see data on what browsers support it.

Speaking of that...

As this book is titled Modern CSS, it assumes you are writing CSS for modern browsers. I define modern browsers to mean recent versions of Chrome, Firefox, Safari, and Edge. Notably absent from that list is Internet Explorer. Some of the features described in this book are only partially supported, buggy, or not even supported at all. IE11 hasnt been actively developed since 2015, and it has an increasingly small market share.

Many popular websites no longer support IE11. Given this, be warned that many of the CSS features discussed in this book will not work well, or at all, on IE11. You also wont see vendor prefixed CSS properties in this book. This is something that, in the past, browser vendors have used to support experimental features before they are available in all browsers. However, this isnt done as much these days. The trend now is to add these features behind configuration flags in the browser.

If you would still rather use vendor prefixes, there are several CSS processors, such as Autoprefixer ( https://github.com/postcss/autoprefixer ), that can automatically add these prefixes at build time.