Introduction to CSS

As you might have learned in a previous course, a Web page is made up of 0:00 three different layers that work together to deliver an experience to the user. 0:04 There's a content [SOUND] layer, a presentation layer, and 0:08 a behavior [SOUND] layer. 0:12 While [SOUND] HTML provides the content layer, and 0:13 the [SOUND] behavior layer is normally handled by JavaScript for real-time user 0:16 interaction, CSS is what handles the presentation layer of a Web page. 0:21 It's what makes our HTML look pretty. 0:25 [SOUND] You see, back in the early days of the Web before CSS was introduced, 0:27 developers would have to [SOUND] embed presentational tags and 0:32 attributes into HTML to control the design of a Web page. 0:35 And many of those tags were proprietary tags that only worked for 0:39 certain browsers, usually for the browser vendors that created them. 0:42 So, providing support and 0:46 maintaining a consistent look for every browser was nearly impossible. 0:48 Remember, HTML was never intended to be a presentation language, so 0:52 it made it difficult and impractical to create Web sites where the content of 0:57 each HTML page was separate from the presentation. 1:01 Imagine having to manually edit tens or 1:05 hundreds of HTML files to make a single styling change. 1:07 So there had to be a more efficient way of doing this, right? 1:10 Well, because of all the problems that came with this sort of 1:13 ad hoc way of styling Web pages, 1:16 CSS was finally introduced in HTML4 to help solve many of these problems. 1:19 With CSS, web authors finally had a way to express their designs without having to 1:25 add new HTML tags. 1:30 And by separating the content from the presentation, 1:31 [SOUND] CSS made the development and 1:35 maintenance of Web sites more efficient [SOUND] because the styles written in 1:37 a single CSS file could be [SOUND] shared across multiple Web pages. 1:41 Now, over the years, [SOUND] CSS has also improved the accessibility of web 1:45 content because it's allowed us to adapt our content to [SOUND] various devices, 1:50 [SOUND] screen sizes, and resolutions. 1:55 And what's exciting is that CSS continues to evolve. 1:57 As you'll soon learn, today's CSS features are becoming closer to 2:01 tools we'd normally use in a graphics editor like Photoshop. 2:04 That's because CSS3, the latest evolution of CSS, 2:08 has introduced many in-browser design features like rounded corners, 2:12 box shadows, gradients, animations, as well as new layout features like Flexbox. 2:16 So, us designers and developers now have more power and 2:22 flexibility when designing and building for the web. 2:25 It's a great time to be learning CSS. 2:28