Current Goal: Making Websites

CSS Basics

What it is

CSS, or Cascading Style Sheets, is the language used to define the look and feel of a website’s HTML. It has two primary jobs:

styling, or defining the visual elements like colors and fonts, and layout, or defining how the content is structured on the page.

For this first lesson we’ll cover the fundamentals of how CSS works and how to use it to style a page.

Why it matters

CSS exists in a weird limbo state where web developers think it is the web designer’s job and designers think it is the developer’s. Many developers avoid learning it for far too long.

Although it’ll be fun move on to hardcore programming ASAP, every developer’s goal should be to be well-rounded. We want to master the whole process of building web apps end-to-end, and that starts with being able to make a website that looks decent. Web developers who can also do design are so in-demand that they are commonly referred to as ‘unicorns’.

Be a unicorn!

Web design is a whole separate field and we won’t go too far down that rabbit hole, but grasping the basics of CSS is essential. It is so ubiquitous that even if you only want to deal with the backend, you will have to grapple with CSS at some point and you don’t want to be clueless.

What you'll learn

What CSS is, how it works, what the name means, and how to use it to style webpages.

How to learn it

CSS layout is a bit infamous for being confusing and counterintuitive. There are a lot of topics, and they are abstract and difficult to keep straight if you are just reading them out of a book. For instance, if you’re getting ‘display’ and ‘position’ confused, something has gone seriously awry with the instruction you’ve been given.

To start out, the “Hello, CSS” lesson from the new website "Interneting is Hard” is far and away the clearest and best introduction I have found.

The lesson has you download and set up the code editor Atom to follow along with the tutorials. Don’t just read through it, actually follow along and make the changes. I highly recommend doing the tutorial on your computer, but if you want to save some time, you can also use an online editor tool like CodePen.

Code Pen is an online playground that lets you quickly tinker with HTML, CSS and Javascript fragments without bothering to set up an environment on your local machine. Go check it out regardless, because it will be extremely handy to try things out as you learn. Imagine that the HTML pane in code pen is what goes inside the <body> tag in a normal HTML page, and the CSS is already linked.

How to approach learning any language

Once you’ve finished the tutorial, you should have a grasp on how CSS works and a handful of common properties for styling a page. To master styling, the next step is to learn a huge set of rules.

Take a look at the W3Schools tutorials for CSS. Poke around and get a feel for what is there.

So do you need to memorize that the CSS rule for changing a bulleted list to use squares instead of circles is list-style-type: square; and not list-style: squares; or whatever else it might be? These specifics of how a language phrases things is called its “syntax."

Of course not. I tried learning CSS by working through these tutorials linearly, but it simply doesn’t work. If you just read through all of the rules in order, you are guaranteed to forget 90% of them, so don’t bother. Google exists, so memorization is unnecessary.

Instead, know what the general possibilities are and master the ability of quickly figuring out how to do things by googling them.

Pop quiz: Can you give this button a gradient background instead of a solid green one? How about rounded corners?

Done? Odds are, you struggled with it, googling and using trial and error until you got the result you want.

Here’s the secret: thats what programmers do all day long. That process of trying, getting confused, failing and then figuring it out is how you'll master CSS. Once you’ve made a dozen webpages, it will become muscle memory, so don’t get preoccupied with memorization upfront.

The same is true for any new programming language. Don’t spend too much time trying to learn syntax because it is too easy to forget it. Instead, focus on mastering the core concepts of the language and then build a bunch of stuff with it. For CSS, the core concepts deal with page layout, which we’ll cover next.

Don’t get discouraged if you feel like this is slow-going. One of the strange things about learning to code is that since learning builds on itself, it will happen faster and faster as you learn more and more.

Comprehension

  • What is CSS?
  • What are CSS’s two primary jobs?
  • What is Codepen?
  • What is the syntax of a CSS rule?
  • What are CSS selectors, properties and values?
  • How do you make a comment in CSS?
  • What are an em and px?
  • How can you apply a CSS rule to multiple HTML elements?
  • How do you change the font of a header with CSS?
  • Why does the ‘font-family’ property take multiple fonts?

  • What is separation of semantics and presentation in HTML & CSS?

    • How is a navigation dropdown a good example of this idea?
  • How can you get rid of the underlines on your links?
  • What does CSS stand for?
  • What does “cascading” in CSS mean?
  • What are the common stylesheets applied to most pages?
  • What are the three ways to include CSS on an HTML page?
  • What are inline styles? Why should they be avoided?
  • What is syntax?

Tasks

Writing a bunch of CSS works better than reading a guide because it is active instead of passive. The more you are forced to actively remember how to do something, instead of just being told, the more effectively you’ll learn. "Interneting is Hard" gives great explanations, but it is mostly passive and thus prone to being forgotten.

To supplement the next few lessons, you should also work through the Free Code Camp CSS tutorials in order to get lots of active, directed practice.

Select Responsive Web Design -> Basic CSS

This is the Beta version of the new FCC curriculum slated to be released in November 2017, and it’s all-around better than what they have now.

If you’ve already been using FCC, don’t worry that you’ll lose your progress. Remember that the point is learning, not racking up imaginary internet points.

What's Next?

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.

Current Goal: Making WebsitesNext Lesson: CSS Colors and Hexadecimal