home

CSS: Making it Pretty

Now, my favorite part! CSS. It stands for Cascading Style Sheets. It's what we use to add colors, layout, and more to our websites. The technical term is style actually. CSS is one of those things that is extremely fun and cool, but depending on what you're doing, can turn extremely complicated fast. But it'll be ok. Let's start slow.

Anatomy of a CSS Rule

A color-coded CSS diagram. Graphic design is my passion.

Terms

the Selector - This is what specifies what element or "thing" will be altered. In this example, we want to apply styles to all paragraph tags.
the Brackets - these symbols are what tells the browser that we're about to start declaring our rules and when it ends - called syntax.
the Property - this is what determines what we are actually trying to change. Each property in CSS is a specific rule name the browser can recognize. There are SO many. The properties in this example say that we want to change the font size and the color of the selector.
the Value - the actual thing we want to change the style to. We are saying we want the font size to be 16px and the color to be the hex code '#bada55', which is a kind of green color.

What's a hex code?

A hex code is a way to represent color on the web. Every color has a corresponding hex code that is 6 characters long, and you can use these to get as granular with your colors as much as you'd like. You've probably seen this somewhere on the web before, but if not that's ok. We'll talk more about color later.

the Box Model

the box model! margin, border, padding, and content.

the Cascade

It's called Cascading Style Sheets for a reason. I'm going to throw some terms at you that may make your eyes glaze over slightly, but trust me, you'll need to know it.

I'm going to direct you to this page from Interneting is Hard, because it explains it better than I could.

the Cascade

Worried about the cascade?

If you think your styles will get messy and this feels overwhelming, I recommend just using an external stylesheet for now. That way, you know all of your CSS is in one place!

Common CSS Properties

Color

color: Sets the text color of an element.
background-color: Sets the background color of an element.
opacity: Controls the transparency level of an element (0 to 1). I.e. 0.5 = 50% opacity.

Spacing

margin: Sets the space outside an element's border. See box model above.
padding: Sets the space inside an element's border, around its content. See box model above.

Text

font-size: Sets the size of the text.
font-family: Specifies the font used for text.
font-weight: Sets the thickness or boldness of the text. Can be keywords ("bold", "normal") or numbers ("600", "400").
text-align: Aligns text horizontally (left, right, center). Think microsoft word vibes.
line-height: Sets the vertical spacing between lines of text. You can specify a number like 1.5, which is 1.5x the default value. Or a specific number, like 16px. Setting it to 2 is like double space in Word.
text-decoration: Adds decorative lines to text (underline, line-through, etc.)

General

width: Sets the width of an element.
height: Sets the height of an element.
border: Sets the border around an element (width, style, color). See box model above.
border-radius: Rounds the corners of an element.
overflow: Controls what happens when content goes outside an element's box (visible, hidden, scroll, auto).

Remember!

If you want to learn how to use each property and what values it accepts, you can always look it up on the Mozilla Development Network.

Demo: Styling my Activity Page

Let's open up the code and now I'll do a quick demo on how I like to style my activity page.

prev page next page