Introduction to CSS

Introduction to CSS
siteground placeholder image

CSS exists for one reason and one reason only: to make your pages look all nice and pretty.

CSS, standing for Cascading Style Sheets, is how you tell your browser how to display and style the page. This includes how to layout the page, the color of text, how big the font size is, and much more. Without CSS, the browser would just render HTML documents with the default styles on, but with CSS, we can create magic.

This class is designed (get it? 😂) to help you not only to become familiar with styling elements, but enjoy it at the same time.

Prerequisites

  1. Intermediate knowledge of HTML, which you can learn from this great class.
  2. A willingness to dive into styling even if you don't have an eye for design!

Without further ado, let's get started!

Selecting a Text Editor

Like with our HTML class, you will need a text editor to write and edit your CSS files in. While any editor works, we recommend using the Atom text editor. It will run on the operating system you are currently running on, and the syntax highlighting makes writing CSS really painless.

Atom text editor.
Atom text editor.
bluehost placeholder image

Basic Setup

Create a brand new file in your editor, and put this in:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Intro to CSS</title>
		</head>
		<body>
			<h1>I am a header.</h1>
			<h2>I am a subheader.</h2>
			<p>I am a paragraph.</p>
		</body>
	</html>
	

Save this as index.html and if you did this step correctly, open it with your browser and you should see this:

Unstyled HTML document.
Unstyled HTML document.

If you see that, you have all the tools needed to complete the rest of this class. In the next lesson, we will begin to learn about the different ways to import CSS.

You're ready to start stylin'.
You're ready to start stylin'.