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 ⌚:

SyntaxExampleExplanation
by element typetypepGet elements with type (ex: paragraph).
by class.class.my_classGet elements with class (ex: my_class).
by id#id#this_elGet the element with id (ex: this_el).
by attribute[attribute][src]Get elements with attribute (ex: src).
by attribute value[attribute=value][alt=Dog]Get elements with attribute equal to value. (ex: alt is set to Dog).
on hover:hovera:hoverGet elements under the mouse (ex: anchors under the mouse).
not:not(selector)a:not(:hover)Gets elements which do not match the selector (ex: anchors not under the mouse).

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:

PropertyOptionsExampleExplanation
bordersize style colorborder: 1px solid red;all borders of the element
marginsizeborder: 20px;the space between this element’s border and everything else
paddingsizepadding: 5px;the space between this element’s border and the stuff inside
colorcolorcolor: gray;the text color
widthsizewidth: 100px;horizontal distance of the element
text-align‘left’, ‘right’, ‘center’, ‘justified’text-align: centerWhich direction should we shove the words?

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;

PropertyExplanation
pxOne dot on the screen. Most of the time. 😟 It’s complicated don’t worry about it.
%Scales according to the parent (or other) element’s size.
inThat’s inches. Imperial represent!
mmYes, we have the more civilized version, too. πŸ™„
emThe font size relative to the parent. 1em means the same size as the parent. Bigger than one is bigger text. Smaller is smaller.
remThe font size relative to the root of the document. Use it if you want sizes to be consistent.
vw and vh100’s of the window’s width (vw) and height (vh)

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.

PropertyExplanation
named colorUse a whole bunch of colors just by writing their name, like: blue,red, and fuchsia. There are even more in newer CSS but those might not look the same for everyone 🀦.
rgb(r,g,b)Lets you specify how much red, green, and blue. All three go from 0 (none) to 255 (MAXXED out).
rgba(r,g,b,a)Like rgb(), but also has opacity (a, for alpha, another term for opacity).
hsl(h,s,l)Also like rgb(), but lets you specify hue (which color), saturation (how much color), and lightness (brightness). There’s also hsla() that works like rgba(), but for hsl.