CSS Basics

Separation of Concerns

CSS is a presentation language. This means that it should only modify the ✨display properties✨ of a page and doesn’t modify the 💀content💀 of a page. This also means CSS can apply style to other document types than just HTML. ♻️ Neat!

Comments

You can disable areas of code or write love letters 💌 to your future self using comments. Put a /* at the front and a */ at the back:

/* I told you, future self, I really do care! */
/* p { background-color: ugly; } 
  (this style of comment also works 
  - as long as you CLOSE THE COMMENT BLOCK)
*/

Applying Rules

CSS properties can be placed directly 🎯 into HTML via the style attribute…

<p style=”border: 1px solid red;”>Hello World!</p>

Linking External Stylesheets

…but including CSS directly in HTML will be hard to keep track of 🔭. It’s better to create a separate CSS file and reference ⬳ it from your HTML. Place a link element in the head of the page:

<link href=”style.css” rel=”stylesheet” />

Rulesets

A ruleset says:

• which 🖗 (the selector’s) elements will be styled and
• how ✨ (the properties) they will be styled.

You’ll need at least one in your stylesheet to change the page. Use this template to form your rulesets:

/* which elements should be styled? */
/* selector goes here! */ 
* {
  /* 
    how should those elements be styled?
    properties go here!
  */
  border: 1px solid red;
} 

Selectors

To define which elements on your page a set of properties are going to apply to, use a selector. There are a bunch of selectors. Here are a few ⌚:

Combining Selectors

Look for more than one selector on elements by ⚞smooshing them⚟ (a.k.a. concatenation) together. This gets paragraphs that also has class my_class:

p.myclass

Nesting

Indicate that you want an element from inside a specific parent (or deeper⚓) by putting the parent selector first, then a space, and then the child selector. Get all h1’s inside sections (or the child of a section 🪆):

section h1

Immediate Children

Get an immediate child 🧒 using >. For example, to select all paragraphs inside a section (but not also its children):

section > p

More complex selectors can be also be combined with the nesting notation. For example, to select all paragraphs inside divs with class myArea inside the element with ID mainArea or its children:

#main_area div.my_area > p

Properties

The good stuff. Change the way stuff looks✨. Properties belong inside the curly braces after a selector (or in yer HTML, in the style attribute)! Make sure to end your properties with a semicolon (;), or things will break.

A helpful trick

To modify everything to have a red outline:

/* 
  I should really change this to 
  whatever I actually want to highlight.
*/
/* give me all elements */
* {
  /* here are my properties 👓 */
  border: 1px solid red;
}

Here are a few basic properties you’ll use a lot:

The Box Model

Which measurements 📐 can be set is described in the box model.

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃        ⇳                           ┃
┃ ╔═══════════════════════╗          ┃
┃ ║      ⇳                ║          ┃
┃ ║ ┏━━━━━━━━━┓           ║          ┃
┃⇔║⇔┃ content ┃⇦ padding ⇨║⇦ margin ⇨┃
┃ ║ ┗━━━━━━━━━┛           ║          ┃
┃ ║      ⇳                ║          ┃
┃ ╚══ border ═════════════╝          ┃
┃        ⇳                           ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

And also “-top”, “-bottom”, “-left”, and “-right” versions. Let’s change a paragraph:

p {
  margin-top: 15px;
  boder-bottom: 3px solid blue;
  padding: 5px;
}

Units

Distances in CSS can use a few different units. You can mostly use them interchangeably. So, something like: padding: 15px; or padding: 15em;

Color

Color in CSS can be written a few different ways. You can use them interchangeably. So, background-color: white; and padding: rgb(255,255,255); mean the same thing.