Estimated Time: 1 hour

<aside> 💡 Welcome to CodeLab's article on CSS. Here, you'll learn the basics of how HTML and CSS are two languages that serve as the base layer for all web development.

As always, you can follow along with the source code here.

</aside>

Prerequisites

Overview

What is CSS?

CSS, or Cascading Style Sheets, is the language that styles your webpage.

It's what makes your page look dynamic, provides colors, different fonts, etc. You are applying what you write in your CSS code to your HTML code to make it look prettier. So when you see different text fonts, images with curved borders, or anything similar, it's powered by CSS.

Programming with HTML and CSS

Creating and Using a CSS File

https://www.youtube.com/watch?v=7E_bH6mJgzI

Key Takeaways:

• To create and use a basic CSS file, you only need a file with the .css extension that is linked to your HTML file using the style tag - <link rel="stylesheet" href="styles.css"> .
• You can create classes or IDs in CSS - that means for whatever CSS code you write, if it's a class it will apply to many different HTML tags. But if it's an ID, it can only apply to one HTML tag. Use them accordingly.
  • You can also use inline styles, but this can often result in messy and convoluted code and is thus not recommended except when you need to quickly apply styles for debugging purposes.

The Many CSS Commands and Media Queries

https://www.youtube.com/watch?v=v5ho12-Z5N0

Key Takeaways:

• There are a ton of different commonly used CSS properties that can alter the look of your HTML - while we recommend discovering them as you need them in the moment, a few common ones to know are color, background-color, font-family, font-weight, line-height, border, padding, margin, position, width, height .
• Sometimes you need to apply certain CSS attributes only when the screen is a particular size - media queries make this possible.
• You can easily set a media query at a maximum or minimum (or both) screen width or height with the syntax @media (min-width: 600px) {...} , swapping out min→ max and width → height accordingly.