Table of Contents
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.
Prerequisites
- Intermediate knowledge of HTML, which you can learn from this class on HTML.
- A desire to learn CSS and some design.
Selecting a Text Editor
Any editor works, however we recommend using Visual Studio Code. It will run on the operating system you are currently running on, and the syntax highlighting makes writing CSS really painless.
Visual Studio Code
Basic Setup
Create a brand new file in your editor, and put this in:
HTML<!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.
If so, congratulations, you are ready to learn CSS!
- How to Install Node on Windows, macOS and Linux
- Create an RSS Reader in Node
- Getting Started with Electron
- How to Set Up Cron Jobs in Linux
- How to deploy a PHP app using Docker
- Learn how to use v-model with a custom Vue component
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Setting Up a Local Web Server using Node.js
- Using Axios to Pull Data from a REST API