CSS History & Basics

[00:00:00]
>> So what is CSS? CSS stands for cascading style sheets. So while HTML allows us to write our content for the web, where we can add headings, and paragraphs, and images, it's not gonna have a beautiful style. So you might see some default styling when you load a plain HTML document, and we'll see that with our project.

[00:00:21]
And that's because the browser that you're using provides default styling for some HTML elements. But we use CSS to style these web pages and make them visually appealing, but also accessible to our users. So CSS1 was first proposed in 1994. And at the time, browsers gave a lot of styling power to the user and not a lot of it was available to the authors.

[00:00:42]
So all the webpage authors could do is kind of mark a piece of content as, hey, this is a paragraph, or this is a heading. And that was about it. So the goal of CSS was to provide a declarative styling language that was flexible for website authors, and it kinda shared the styling power between authors and users.

[00:01:03]
And by means of this cascade, the styles could be combined and prioritized, so the authors and readers, again, both had a say. So by late 1996, CSS1 was finished. So while the CSS Working Group proceeded with CSS2, a lot of the web browsers struggled to implement CSS1. Each piece of CSS was pretty simple on its own, but the combination of all of these pieces is what created some complex behavior.

[00:01:33]
So the CSS Working Group finalized CSS2 in early 1998. And once CSS2 was finalized, work immediately began on CSS3. But it was a little bit different, because instead of one big package essentially, it was constructed as a series of standalone modules. So the rationale behind this was that each module could be worked on at its own pace, and really critical or popular modules could be advanced along the W3C or the World Wide Web Consortium, their progress track, instead of being held up by other modules.

[00:02:09]
So by early 2012, there were three CSS3 modules that have reached full recommendation status. So those were color level three, namespaces, and selectors level three. So when a browser displays a document, it has to combine the content with the style information. So, first, the browser is gonna load the HTML.

[00:02:28]
Next, it's gonna convert the HTML to the DOM, or the Document Object Model, and this is a representation of the objects that really make up the structure and the content of the document. Third, the browser fetches the linked resources. So these are gonna be things like images, videos, and CSS.

[00:02:46]
JavaScript's handled a little bit later on in the process, so it's not included in Step 3. Step 4 is the browser parses this FetchCSS, and it's gonna determine which style rules should be applied to which nodes in the DOM, and it's gonna associate styles to them. So this is called the render tree.

[00:03:05]
And Step 5, the render tree is laid out in the structure, and it should appear after all the style rules have been applied. And then lastly, the visual display of the page is shown on the screen. I believe this is called first contentful pin. So let's talk about some of the terminology that you might hear.

[00:03:24]
So elements are the basis of document structure. And CSS depends on elements, and they can take two forms, they can be replaced elements and non-replaced elements. So replaced elements are elements where the content is going to be replaced by something that's not directly represented in the content. So, for example, this might be an image.

[00:03:52]
This element that we see here, it presents nothing unless you point it to some external content. So if you point it to a valid image file, that's gonna be placed in the document and replace this. But if not, it's either gonna display nothing, or the browser might display a broken image placeholder.

[00:04:09]
Non-replaced elements, they comprise, or are comprised by the majority of HTML elements. So it means that their content is presented by the user agent, which is generally a browser, inside of a box that's generated by the element. So this might be like a heading level one that says hello.

[00:04:29]
So in addition to replaced and non-replaced elements, you may have heard of block and inline elements. There are more display types, but these are kinda the most foundational ones. So block elements, they generate an element box that fills the parent element's content area, and they don't have other elements beside them.

[00:04:53]
So what does that look like? So here we've got a heading level one, followed by a paragraph. And both of these are block elements. And if it were to be rendered, we can see that hello is on Line 1. And this is a paragraph with really important information is rendered on Line 2.

[00:05:08]
Inline elements generate an element box within a line of text and they don't break up the flow of that line. So what would this look like in practice? So we can see within our paragraph element we have a link, and it says, this is a link to a really cool website.

[00:05:23]
And we can see that link is being rendered inline with the paragraph element. So there are some nuances to block and inline elements, and we'll talk about those a little bit later. But those are gonna be two of the foundational types of elements that we will be working with.