Reference for CSS!!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
README.md

README.md

CSS Reference

This repo will be your source of truth, your go-to lookup, for any CSS questions you may have. Use it wisely!! Refer to it whenever you have questions about CSS.

Table of Contents

  1. HTML5 Semantic Elements
  2. What is CSS?
  3. How to Link Stylesheets
  4. The Anatomy of a CSS Rule
  5. Selectors
  6. Units of Measurement
  7. Media Queries
  8. The Box Model
  9. Display
  10. Position
  11. Floats & Clearfix
  12. Pseudoclasses & Pseudoselectors (Coming soon!)
  13. Flexbox (Coming soon!)
  14. Things To Not Use Ever
  15. How to Think About CSS

Note about CSS

CSS is one of those things that's really tough to learn. It's a process of trial and error, and you just have to mess around with it a lot before you get comfortable with it. This is the nature of the beast; there's not one way to easily learn it, and usually lecturing about it doesn't go nearly as far as incremental, continual practice.

So, we've provided you with a way to get started on CSS: the exercises we'll give you for morning exercises, and this markdown going over some of the most important parts. You will have to put in the practice necessary to master it.

🔹 HTML5 Semantic Elements

The new(ish) HTML5 spec allows us to use "semantic elements". Semantic elements are named in such a way that clearly explains their purpose to the developer and the browser. They're helpful for SEO and accessibility. Some semantic elements worth mentioning include <header>, <nav>, <footer>, <main>, <article>, and <aside>.

🔹 What is CSS?

From W3C (the World Wide Web Consortium):

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers.

🔹 How to Link Stylesheets

Most commonly, you'll be including CSS in the head of your HTML file, like so:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
  <meta http-equiv='X-UA-Compatible' content='ie=edge' />
  <title>CSS Demo</title>
  <!-- Here is our CSS inclusion -->
  <link rel='stylesheet' type='text/css' href='./src/reset.css'>
  <link rel='stylesheet' type='text/css' href='./src/style.css'>
</head>

You may also see CSS written in the actual head tags of the document, or inline on elements themselves. Ideally, you shouldn't be doing either of those things; keep your styles contained. But, just so you know what those look like:

Directly on the element

<p style='color: blue; font-size: 2em;'>Hello world!</p>

This is called "inline styling".

In the head tag

<head>
  <style>
    p {
      color: blue;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <p>Hello world!</p>
</body>

In a linked css file

<head>
  <link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
  <p>Hello world!</p>
</body>
p {
  color: blue;
  font-size: 2em;
}

reset.css

Browsers have built-in style rules. It is usually in our best interest to remove them -- in fact, I expect every single site you build in this course to include something called reset.css.

Additionally, when you're including CSS files in the head of the HTML file, the order matters. If you put reset.css after style.css, the rules in reset.css will override the rules in style.css.

🔹 The Anatomy of a CSS Rule

From W3Schools:

rule-set

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

🔹 Selectors

Element Selectors

To select all the divs on a page, all you need to do is type a rule that looks like this:

div {
  background-color: blue;
}

The Class Selector

The class selector finds elements with a specific class, and as an attribute, class allows us to target several elements that may share similarities. Note that:

  • Classes are NOT unique
  • You can use the same class on multiple elements
  • You can use multiple classes on the same element
  • You can select a class using .class-name {}

The ID Selector

The ID selector uses the id attribute of an HTML tag to find one specific element. We can give any name we want to our ID attribute, besides the obvious reserved words, such as tag names, etc.

  • An ID is unique within a page.
  • You should use the id selector when you want to find a single, unique element.
  • In the CSS document, you use a hashtag (#) to denote an ID

You can think of the difference between class selectors and ID selectors like so: while a class selector might be comparable to a person's name, an ID selector is much like their Social Security Number. Two people might have the same name, but if two people have the same SSN, something has gone very wrong. Same with element. You should never reuse an ID within a page.

Other Selectors

There are a lot of other CSS selectors. Here is an exhaustive list.

If you need practice!

  • Check out the CSS Diner. It'll go through teaching you how to select elements in a variety of different ways.

🔹 Units of Measurement

CSS has a number of units of measurement. The most common ones you'll use are:

  • px -- number of pixels
  • % -- a percentage relative to another value
  • em -- relative measurement for the height of the font
  • vh -- 1% of viewport height. For ex, 100vh would be equivalent to the full height of the browser
  • vw -- 1% of viewport width. For ex, 100vw would be equivalent to the full width of the browser

See the other units of measurement here.

🔹 Media Queries

Media queries are what allows us to make our websites adaptable for variable screen widths. Here's the syntax for a media query that applies to screens with a width above 1025px:

@media screen and (min-width: 1025px) {
  /* write your declarations in here! */
}

It makes sense when you read it out loud, too: "Hey, media where the screen size is over 1025px..." (Real talk: I can never remember whether to use max-width or min-width. I have to look it up just about every time.)

You can write size-based media queries without specifying screen, but usually it's good to be as specific as possible. You can also specify print (meaning when someone prints out your page) and speech (for screen readers).

In order to get media queries to work on your page, you have to include the meta viewport tag. This is also something you'll be googling a lot. Just bookmark it. (What is a viewport?)

Reference:

🔹 The Box Model

One of the tricky things about CSS at first is the Box Model. But it's actually really simple. Let's break it down.

Any HTML element can be considered a box, and so the box model applies to all HTML elements. If you select an element and ascribe it a height and width, the content itself will be that height and width.

What the size doesn't include:

  • padding
  • border
  • margin

So, in practical terms, this means that if you have two elements with a width of 50%, they won't fit side by side if you give them borders and padding.

In index.html:

<p>This is a paragraph</p>
<p class='padding'>This is a paragraph</p>

In style.css:

p {
  color: blue; /* already in your file */
  font-size: 2em; /* already in your file */
  width: 20%; /* this line should be new */
}

Let's check this out in our chrome browser with the developer tools. As you can see, everything is identical. Let's go ahead and add some padding to the html element with class "padding". In style.css:

.padding {
  padding: 10px;
}

Even though the width in the CSS is the same, the element with padding is larger.

All these different sizings can be confusing. This can especially be frustrating when you think something's 20% when in actuality it isn't.

box-sizing: border-box;

When you find yourself adding both width and padding to an element, it's a pretty good rule of thumb to immediately just add the declaration box-sizing: border-box; to your declaration box. The box-sizing property does about what it sounds like it does: set how the browser calculates the width of the box. And the border-box value tells the browser to look at the border, not the content. (The default value for box-sizing is content-box.)


🔹 Display

Astonishingly, the display property has to do with the way an element displays on the page. Who would have guessed?

display is one of the most important properties for creating layouts. Every element has a default display value, based on what type of element it is.

Block

div, p, h1-h6, and semantic HTML5 elements have a default display value of block. A block element starts on a new line. Block elements have margin, padding, and borders, and can have a height and width. Block elements will not naturally display on the same line.

Inline

span and a elements have a default display value of block. This means they can be inserted into a block-level element and not disrupt the flow of the element's contents (for example, links in content do not need to be on their own lines). While padding and margin can be applied to all sides of an inline element, only the padding/margin on the left and right will affect the surrounding content. They also cannot have a width and a height.

Inline-block

inline-block is the unholy marriage of block and inline. Elements with display: inline-block; can accept padding, margin, height, and width, but will naturally line up on the same line. Here's a more in-depth look at inline-block.

None

As one might expect, display: none; totally hides the element -- it's as if it didn't exist.

Other display values

You'll also see these in the wild:

  • table
  • flex
  • grid

We'll talk about flex in Unit 2; you shouldn't have to use table much ever; and grid is still pretty new.

🔹 Position

The position property controls how an element is placed with respect to its parent element.

We've used combinations of margin border and padding to modify the layout of DOM elements. But changing the box model isn't always enough...

  • Sometimes we need to move the box itself! That's where position comes in.
  • We could do that with margin, but our CSS would get pretty messy and unpredictable.
  • Position has 4 properties we can use to control layout.

Static

All elements are static by default.

  • When position: static; you cannot offset the position of an element.
  • You will only need to type this out if you need to override an existing property value.

Fixed

A fixed element is pinned to a designated place on the browser window.

  • Use left right top bottom to designate where on the page the fixed element should be displayed.
  • When you scroll, a fixed element will remain the same place in the browser window.
  • This can be useful when creating a header or footer menu that stays with the user as he/she explores a website.

Relative

When we change the left right top bottom of a relatively-positioned element, it is moved from its position in the document.

  • Really, it's a statically-positioned element that can be offset.
  • When a relatively-positioned element is moved, it does not affect the position of other elements.

Absolute

Absolutely-positioned elements are offset based on the position of their parent container.

  • So an element with top: 0 and left: 0 will be moved to the upper left corner of that element's parent container.
  • They are extracted from the document flow.

Relative + Absolute

Absolute position is particularly useful when we want to pinpoint the position of an element inside a container.

  • We can do this by setting the container to position: relative and the elements inside of it to position: absolute.

🔹 Floats & Clearfix

Sometimes our layout goals are simpler. Rather than pinpointing the position of an element, we may just want to move it to the left or right side of a page.

  • We accomplish that using another CSS property: float.

float

Hmmmmm. Maybe that didn't work how we expected it to. That's because, when all the elements inside a container are floated, a couple of things happen.

  • It shrinks to the smallest size possible.
  • Inline element dimensions are ignored.
  • Block elements are condensed to the smallest size possible.

This is fixed using clearfix:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

(You can remember this by thinking ACDC: after, content empty string, display block, clear both).

clearfix

Unfortunately, this is just one of those things you're going to have to memorize -- it's okay to not really understand how this works. (If you're really determined, here's an article that not only explains what this does but gives a bunch of other solutions.)

🔹 Things To Not Use Ever

!important

See the MDN docs.

z-index

z-index feels like a handy thing, but it gets unwieldy extremely quickly once multiple people are working on the same codebase. If you find yourself writing z-index rules, consider whether or not you can rewrite your CSS or HTML to avoid it.

🔹 How to Think About CSS

Begin to be able to strategize how best to create CSS based on existing HTML and an end product in mind.

This is really tricky to pin down. In fact, it's one of the most difficult things about writing CSS. It requires thinking ahead (understanding how the declarations you're writing now will affect the declarations you'll have to write later on) and persistence (it takes A LOT of time to get things to look the way you want). This doesn't change the more you learn CSS -- you'll just get faster at cycling through the problem-solving techniques.

But, now you have a point of reference. I encourage you to go through the HTML and CSS of the space website and really explore how they interact, how they're structured, how they work together to create a readable whole.

IN CONCLUSION:

blinds

As I have hopefully made clear by now, a lot of the CSS writing process is an iterative process of:

  • Writing a declaration
  • Being super proud of your super great shiny new CSS declaration!!!!!!
  • Refreshing your HTML page with your fingers crossed
  • The declaration doesn't work, or it works but it broke something else, or it doesn't do what you expected at all
  • [Insert your preferred swearword(s) here. Loudly. With feeling.]
  • Frantically googling the documentation
  • Go back to step 1. Repeat. Infinitely. There is no end. (Really, this is steps 7 through 1000000000000000+)

BUT ALSO: Look at this artwork created with ONLY CSS!!!!!

CSS contains multitudes. I hope you enjoy exploring it. :)