01. Picass=

# What is CSS?

Welcome to the second course of The Origins Trilogy! 🎨

So far, we've been laying bricks and walls with HTML, but all the web pages are still black & white and lack viiibes.

Let's change that with CSS magic!

CSS, or Cascading Style Sheets, is a styling language that paints a website with colors, fonts, layouts, and animations.

Learn CSS to create stunning web pages, enhances user experience, and makes your site stand out in the digital crowd. Plus, it’s fun to see your design ideas come to life!

It's time to discover your inner Picasso. ✨

Instructions

Let's see the power of CSS by adding some styles for the website of a pizza shop!

In our code editor on the right, there should already be some HTML loaded into the index.html file tab. Press the "Run" button and see what the page looks like without styles.

Next, copy and paste the following CSS code in the styles.css file tab:

body {
  font-family: "Chalkduster", fantasy;
  width: 100%;
  height: 100vh;
  position: absolute;
  text-align: center;
}

main {
  background-color: tomato;
  width: 70%;
  margin: auto;
  position: relative;
  border-radius: 5px;
  margin-top: 50px;
}

#hero-copy {
  padding: 5px;
}

#hero-img > figure > img {
  width: 70%;
  border-radius: 10px;
}

footer {
  background-color: lightgreen;
  height: 100px;
}

footer > p {
  padding: 37px;
}

What happens when you press the "Run" button now?

Help

Progress not saved

Sign In or Sign Up in order to save all the hard work you've done!

Get a Hint Show Hint

New Item Unlocked!

Rubber Duck NEW

Rubber duck debugging is a classic technique used by developers to debug code. By explaining the code line-by-line to a rubber duck, you can break down the code into smaller pieces, and potentially identify the error.

... It's silly, we know.

Continue Learning

New Item Unlocked!

Codédex BotNEW

I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions related to programming, Codédex, and much more.

Continue Learning

New Item Unlocked!

Editor Themes NEW

Congrats! You unlocked Editor Themes. You can now change the theme of the editor to your liking.

Continue Learning

FEATURE UNLOCKED!

You have 100 XP! This means you can now join our Discord community to chat and hang out with fellow learners and the team behind Codédex!
See you there. 😊

BackJoin Discord

FEATURE UNLOCKED!

You have 250 XP! This means you can now join our On-Platform community to chat and hang out with fellow learners!
Say hi in the Introductions channel. 😊

Join Community

Welcome to the General Assembly x Codédex experience!

Complete the following mandatory chapters:
HTML Chapters 1-2, CSS Chapters 1-2, and JavaScript Chapters 1-2.

You will submit the code in the last exercise of each of the chapters:

HTML

Exercise 7: Favorite Band

Exercise 14: MySpace Top 8

CSS

Exercise 5: Concert Flyer

Exercise 12: Invitation

JavaScript

Exercise 5: Receipt

Exercise 10: Planet Weight

Once you've completed all of them, you can submit your work
and tell us about your experience!

Submit