Create a Website: Styling (Intro to CSS)

So you have created an HTML file, and it holds all your content, but it's lacking inspiration. It is time to add color to your world! In this second class in our Create a Website series, we are introducing a new language: CSS. CSS is the styling language for the web and it can make "most" of our web styling related dreams come true! With that said, CSS is a vast language with loads of possibilities and just like with everything, we must start small to one day go big. This class is geared towards CSS beginners, who have done some HTML work in the past. If you have never touched HTML before, we recommend you first take the Create a Website: Structure class to get all caught up. In this class, you will learn the basics of CSS, the styling language of the web. We will explore CSS usage, its syntax and best practices when it comes to CSS file setups. We will also look into key features of CSS such as the cascading model, and the specificity model. Finally we will put all that into practice by styling a simple web page using Codepen.io

Instructor:
Sandra Bermond | Innovation Co-Lab Program Manager
Sandra manages the Innovation Co-Lab roots program as well as teaches several workshops. She has a background in web design and front-end development, as well as a passion for artistic endeavors regardless of the medium.

  • CSS
  • Web Development

About Course

Outline

  • Review of CSS Usage and Syntax
  • Finding help on the internet
  • Adding Styles to the webpage

Objectives

  • Understand what CSS is and how to use it
  • Know where and what to look for when in need of help
  • Style text
  • Change sizes, paddings and margins
  • Add borders
  • Style links
  • Add Classes and IDs to HTML
  • Add background colors and images

Tools

  • laptop

Files

Prerequisites

This class requires you have some basic knowledge of HTML. If you have never heard of HTML, or you feel like you could use a refresher, we recommend that you do one of the following before attending this class: Attend Create a Website: Structure OR Watch HTML for Beginners

This class is part of our Web Development (Front End) Track

See the whole track

Suggested Courses

Course Graphic

Create a Website: Layouts (Responsive CSS)

In this class we will fine tune some of the previous CSS rules we worked as well as learn brand new things to create more complex and overall better layouts that can be experienced comfortably from any device.

Learn More
Course Graphic

CSS Deep Dive: the Power of Grid

Come learn how you can place html elements wherever you like, however you like on a page regardless of their html order with CSS Grid. Change the vertical and horizontal alignments of any item, and forget about all math calculations!

Learn More
Course Graphic

CSS Deep Dive: Break out of the Box with CSS Shapes

Come to this workshop to learn how to make text follow the curve of an image or create new shapes to build dynamic compositions on the web.

Learn More