CSS

CSS

Websites have moved from content and layout being tied together to becoming more separate. CSS (cascading style sheets) are the key to this evolution. They bring beauty and style to your website with fonts, colors, format and layout in a way that can cascade throughout all your web pages. In this activity, you will unlock the stylesheet of the web page you published during the HTML activity, so you can customize the look and feel of your page.

Experiment with CSS

  • Log into Glitch and select Find Your Projects under your username.

  • Select your My Favorite Animal Project that you created during HTML lesson.

  • Enable the stylesheet (style.css) by removing the comments around <link rel="stylesheet" href="style.css">.

  • You may need to fix your image to fit in its space. How would you do that?

  • Change colors. Hint: find hex values at Color Picker.

  • Change fonts. Hint: web safe fonts & google fonts.

  • Change background. Hint: image or color. Also check out the CSS Cheatsheet.

  • Check out the <div> and </div> tags and see if you can figure out how the simple 2-column CSS layout works.

Learn more about CSS