What is CSS?

Academind by Maximilian Schwarzmüller
A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
4.6 instructor rating • 25 courses • 1,234,918 students

Lecture description

Let's start with the most important question first: What is CSS and why do we need it on our websites?

Learn more from the full course

CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.

22:38:43 of on-demand video • Updated November 2020

  • Build beautiful websites which don't just contain great content but also look good
  • Use basic as well as advanced CSS features
  • Understand the concepts and theory behind CSS and certain CSS features
English So let's start with the most important question first, what is CSS? CSS stands for Cascading Style Sheets and I'll come back to this name and why it's called 'Cascading' later in the course; once we know a bit more about it from a technical perspective. But the core idea behind CSS is that it makes your web page look good. Your web page typically consists of HTML, this is how you structure your web page, this is how you add content and show content on your web page. HTML is absolutely required, there are no web pages without HTML. CSS on the other hand is optional, because CSS allows you to style that HTML content. It allows you to add colours, shadows, all kinds of visual effects, position elements differently, so basically it allows you to turn your boring HTML page into an exciting and good looking website. Let's have a look at this and let's see exactly what CSS can do for us. Attached to this video, you'll find a zip file which contains a HTML file, a CSS file and an image. If you double-click that HTML file, simply double-click it, it will open up in a browser and you will see this. Now this is a fully-functional web page, it simply contains just HTML, but all the content is there and if we were a user, even though it doesn't look good, we could still use it, we could work with it and we understand what the website is trying to tell us. However, we want it to look better and that is where the CSS file comes into play. In your HTML code, and here I opened it with Visual Studio Code which is the IDE I will use in this course. You can open it with any text editor on your operating system, just make sure you open it as plain text but you may also use any favorite IDE you have. So if you open that file, this is the HTML code you'll see, now let's add some CSS to it and conveniently, I've already provided you with that CSS file in the code.css file which also is part of the zip file. There you'll see a bunch of things you probably don't know yet and we'll walk through all these things in detail throughout the course. Now let's include that file by simply copying all the content in there, going back into the HTML file and in the head section, right before it's closed, you add the style element, so simply opening and closing style tag. Now between these two tags, copy in the content from the other CSS file, save the HTML file, go back to your browser and reload. This is exactly what CSS all about, doesn't this look much better? It does and this is exactly why you use CSS. This now does not only contains the content but it's also way more pleasant to the eye. So we'll learn all about this throughout the course and with that, let's learn a bit more about what exactly CSS is and where it's coming from.