Overview of CSS

(enchanting piano music) - [Instructor] To get started here, let's take a look at a quick overview of using CSS. There are several ways to actually incorporate CSS into the user interface. Some of the ways are standard approaches, other ways are made available through modern development tooling. Each of these approaches has various benefits and drawbacks depending upon the context in which it is used. Fundamentally, to apply any type of style with CSS requires two pieces of data, the element to be styled, as well as the style property and value to be applied.

Now, HTML and React provide several ways to identify which element is being styled. One way that we can do it is that we can actually populate a style attribute on an HTML element, or a style prop on a React element, with the actual properties and values that we want to have applied. Another approach is to create something called a selector, and a selector is just a special kind of expression that can select the DOM object, so the DOM elements that we want to apply the styling to. So we can define our properties and values directly on the style attribute/prop, or we can apply them through a selector.

Originally, HTML actually had elements that would apply styling to the document. Things like the font tag. But over the course of time, it was determined that it would be better to actually move the styling to its own separate markup language, and allow HTML to focus just on the sematic structure of the document. When a web browser loads an HTML document, it actually parses the HTML elements and produces something called a DOM tree. DOM is short for Document Object Model. The CSS is actually applied to this DOM tree when the browser renders out the HTML document.

Now, traditionally applying styles to HTML elements using the style attribute was discouraged. The reason for this is that, when you're actually applying the styles on that attribute, you're actually putting the style information inside of the document itself, which prevents the reuse of those styling declarations, as well as it prevents the overriding of those styling declarations by other stylesheets. Also, style values that are stored in the markup of the HTML document are not cached by the browser, which means each time the page is loaded, the styles have to be reprocessed and applied.

Now, React, with its style prop allows us to programmatically set those style values directly on the React element itself. This is not viewed as bad as doing it with the HTML, in fact, in some cases, styling your React elements this way can be quite useful in terms of ensuring the style being applied is the thing that is actually going to be applied regardless of any other stylesheets that might be present. So it is quite common to see where the style prop is used in React, but that's only because all of that is being controlled programmatically, and we're talking about something called a component, which is really a piece of reusable logic, not so much a bunch of static styling being applied to HTML elements.

Now, another traditional HTML approach was to use the style element. Typically this would be put in the head section of the webpage. And the style element allowed the use of selectors, so we were moving the styles from the individual elements up into this stylesheet that's inside of the style tag, but the problem is that while the styles can be overwritten, the actual styles themselves are still in the HTML document, and are not cached by the web browser. Now, you will find that third-party development tools like Webpack actually do make used of style elements, but not for the same reasons that people would do static HTML coding with them.

They would actually use the style elements to support dynamic reloading of the styles as the developer is making changes to the stylesheets. This hot-reloading is not actually done in production, production is still an external stylesheet, but in terms of developing the web page, you'll see these style elements pop up. The usage of style elements in this way is just really a development tooling thing, it's not the same type of thing as putting a style element itself on the page, which is generally regarded as a bad practice.

Another way that we can incorporate styles into our page is to actually take our styles and put them into an external stylesheet, and then link them into our HTML document using the link element. Typically, the link element's placed into the HTML document head, and when the web browser loads the HTML page, it actually downloads this linked stylesheet, processes it, and caches it, so that if the HTML document is reloaded, it can reuse that stylesheet. This stylesheet's going to be a collection of CSS rule selectors with style declarations just like the style element, but it's all stored in an external file.

Now, you can actually pull in many stylesheets through the use of multiple link elements. In production, we tend to avoid this, we tend to put all the stylesheets into one file. But you could actually have multiple stylesheets get loaded up. Another option that we have when working with tools like React and Webpack is that we can actually define stylesheets per React component. In fact, there's actually two ways in which this is supported. One is using something called CSS modules. Another is just simply importing an actual CSS file.

Through the use of plugins like PostCSS, we actually will use the JavaScript syntax for importing ES2015 modules, to actually import these external stylesheets directly into our React component JavaScript files. This allows us to co-locate our style definitions with our actual React component. Now, when these React components run in development mode, these same styles will be loaded into style elements for hot-reloading, and in production mode, these same styles will actually all be put out into a single CSS file, which is then referenced via a link element in the main index.html's head section.

Now, in addition to having stylesheets which get linked into our webpage, we also have to be able to connect these style declarations, those properties and values, to the elements that need to be styled. There are roughly three kinds of selectors used in CSS: Simple, compound, and complex selectors. The three most common simple selectors allow the selection of an element by its type, or also known as its tag name, its ID, and class name. Now, when multiple simple selectors are used in conjunction with each other to select elements, this is known as a compound selector, so if you were to use, for example, a selector that included both the type and the class name together as a single selector, this would be known as a compound selector.

Now, there are other selectors which allow selecting by element attributes, the structural relationship between elements, and even information about elements which exist outside the DOM structure, such as which element has the focus. Many aspects of an element can be styled. We can style the color of the fonts, the borders, positioning, transformations, animations, et cetera. A style declaration is a colon-separated name value pair, so for example, if we have a paragraph of text, to set the color of that text, the name of the property that you set is called color, and then the value would be some type of color value that would then set the color of the text of that paragraph to some particular color.

A CSS rule is a combination of a selector, and one or more style declarations. And you can have multiple style declarations within that selector's scope, and those are separated by a semicolon.