Introduction to CSS

[MUSIC] 0:00 Hi, my name is Anwar. 0:09 I'm a designer, a developer, and a teacher at Treehouse. 0:11 My pronouns are he/him. 0:15 In this course, we're going to learn the basics of CSS, 0:17 one of the core technologies for designing and building websites and applications. 0:20 No matter what kind of website or web application you want to build, 0:27 you'll have to use CSS. 0:31 If you haven't written much CSS, or 0:34 even if you've never written CSS at all, don't worry. 0:36 That's what this course is for. 0:41 We'll start with basic CSS concepts, 0:43 then gradually progress to more advanced topics and lessons. 0:45 But before diving into CSS, it's important to have a basic 0:51 understanding of HTML and the structure of a document. 0:55 If you're not familiar with HTML, go through our HTML courses first, 0:59 then meet me right back here in CSS basics. 1:05 So, what exactly is CSS? 1:08 And why is it considered a core web technology? 1:11 CSS stands for Cascading Style Sheets, and is a 1:15 stylesheet language used to describe the presentation of web pages. 1:18 As you might have learned in previous courses, a web page is made up of three 1:24 different layers that work together to deliver an experience to the user. 1:29 There's a content layer, a presentation layer and the behavior layer. 1:34 The content layer is HTML, the structural foundation or outline of a web page. 1:40 Content like headings, paragraphs, bulleted lists, 1:46 links, and images are marked up by our HTML. 1:51 The behavior layer is normally handled by JavaScript, 1:56 which provides real-time user interaction. 2:00 And CSS is what handles the presentation layer of a web page, 2:04 controlling the appearance of our HTML. 2:09 We use our style sheets to style the HTML with colors, 2:12 font sizes, backgrounds, layout, and much more. 2:17 CSS also allows us to adapt our content to various devices, 2:22 screen sizes, and resolutions. 2:27 As we move forward, you'll learn strategies for 2:31 keeping these three layers separate from each other. 2:34 HTML for content, CSS for style, JavaScript for behavior. 2:37 Back in the days before CSS was introduced, 2:44 developers would have to embed presentational tags and attributes 2:46 in the HTML to control the design of a web page. 2:51 While it's technically still possible, you'll want to keep 2:56 your structure and presentation separate. 2:59 There are two important reasons for this. 3:03 Writing semantic HTML means choosing the right element 3:08 for the job. When choosing an HTML element, it's important 3:12 to ask yourself what purpose does this content have, 3:16 not what should this content look like. 3:20 Proper semantic HTML will make your content more meaningful, 3:24 more accessible, and easier to find using a search engine. 3:28 HTML was never intended to be a presentational language. 3:34 So defining presentation in the HTML creates an 3:39 inefficient workflow. Imagine having to manually edit tens or 3:42 hundreds of HTML files to make a styling change. CSS makes 3:48 the development and maintenance of websites more efficient because 3:53 the styles written in a single style sheet can be shared across 3:58 multiple web pages. A change to one CSS file, such as adjusting the 4:02 background color, can be reflected on all pages of your website or app. 4:08 And what's exciting is that CSS continues to evolve. 4:14 Sophisticated visual effects like rounded corners, text and box shadows, 4:18 gradients, and even animations have been built into CSS for some time. 4:24 CSS also includes multi column layouts, grids and Flexbox designed 4:30 to keep your layouts flexible and legible across a variety of screens and devices. 4:35 As new technologies arrive, 4:43 CSS will continue to add features to help you meet the latest challenges. 4:45 It's a great time to be learning CSS. 4:50