04: Simple Styling

In this module I'll go through many of the common stylistic properties you'll need to start doing basic HTML and CSS pages. There are many CSS properties but we'll start with most direct properties. By direct I mean that changing the property should make an obvious visual change to the HTML element. Other properties can be difficult to see when you change them, so we'll need to use some special tricks later to help with that.

That Border Trick

I give a constant piece of advice when people are learning to code:

Always be printing.

This means that when you have a problem with your code you print everything you can to see inside the program, or use a debugger to help you see how it's running. It's simply too difficult to solve most bugs by simply reading the code repeatedly. You need additional information.

CSS has the exact same problem except the results are visually obscured. Many times you can't figure out what is going on with CSS by simply staring at the webpage. All of the boxes that control CSS are invisible to you by default plus the mechanics behind CSS are far too complex and indirect to reason about them from just the visuals.

You need something similar to printing in CSS, and that "something" is the 1px red border:

p {
  border: 1px solid red;
}

I recommend you add this to CSS rules when you first write them. I try to do this but old habits die hard and I still just go for it, then run into trouble, then add the border later. If you want an easier time then add the border right away, get the CSS right, then remove the border. I also recommend trying other colors like "hotpink" since they are easy to find later and remove with a single search (unless you've got a website that's all hotpink).