Slide 1 of 47

CSS - More Basics

Leon Noel

"Ariana ain't the only one that do it grande
Knew I'd be his fiancé when he was broke on Causeway, yuuuh"

#100Devs

Slide 2 of 47

Agenda

Questions?
Review - CSS Fundamentals
Review - Specificity
Review - Relationship Selectors
Learn - Box Model
Learn - Simple Layout
Lab - Create A Simple Layout
Homework - 3 Simple Layouts

Slide 3 of 47

Questions

About last class or life

Slide 4 of 47

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 47

Submitting Work

Khan Academy & Techcrunch HTML

in separate Glitches

Submit URL here: https://forms.gle/DmTgMUiGPUURWPmD7

Slide 6 of 47

Want Friends? This Week

Slide 7 of 47

Alumni Twitter Space

This Friday Jan. 28th 6:00pm ET

Slide 8 of 47

Channel Points

Slide 9 of 47

Typing

Slide 10 of 47

Deep Not Wide

Slide 11 of 47

YOU ARE DOING ANKI FINE

Text

Slide 12 of 47

VOMIT CODE

Slide 13 of 47

YALL NASTY

Slide 14 of 47

The Golden Rule

SEPERATION OF CONCERNS

HTML = Content / Structure
CSS = Style
JS = Behavior / Interaction

Slide 15 of 47

CSS

Where does CSS go?

Inline
In the head
In a separate file

Slide 16 of 47

CSS

Use a separate CSS file

It is best practice to put CSS in it's own file and link to it from the <head> !

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

Slide 17 of 47

CSS BREAK DOWN

p{
  color: red;
  font-weight: bold;
}

The whole thing is called a rule.

The p is called a selector.

It is followed by a set of declarations in a declaration block

Slide 18 of 47

CSS BREAK DOWN

p{
  color: red;
  font-weight: bold;
}

What is this?

Slide 19 of 47

p{
  color: red;
  font-weight: bold;
}
p{
  color: blue;
}

CSS is read top to bottom

What comes below, can override what came above

This is called the Cascade

Slide 20 of 47

CSS BREAK DOWN

Why might we want to link to a separate CSS file?

Slide 21 of 47

Let's Review

Some Simple Styles

Slide 22 of 47

Color

h1{
  color: red;
}
h2{
  color: #FF0000;
}
p{
  color: rgba(255,0,0,1);
}
span{
  color: hsla(0, 100%, 50%,1);
}

Word
Hex
RGBa
HSLa

Slide 23 of 47

Font-family

<head>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;
  400;700&display=swap" rel="stylesheet">
</head>

p{
  font-family: 'Source Sans Pro', 'Helvetica' sans-serif;
}

html

css

Slide 24 of 47

Font-weight

<head>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;
  400;700&display=swap" rel="stylesheet">
</head>

p{
  font-family: 'Source Sans Pro', 'Helvetica' sans-serif;
  font-weight: 700;
}

html

css

Slide 25 of 47

🛑 Stop 🛑

How to research?

https://lmgtfy.com/?q=italicize+text+html+mdn&s=d

🚨 Use the MDN 🚨

Use https://learn.shayhowe.com/html-css/

Slide 26 of 47

Let's Code

Some Basic CSS

Slide 27 of 47

Selecting By Relationship

section > p {
  color: red;
}

To select an element that is the direct descendent of another element use

parent > child

<section>
  <p>Hello, Twitch!</p>
</section>

Slide 28 of 47

Selecting By Relationship

section p {
  color: red;
}

To select an element that is inside of another element without being directly descended use parent element

parent child

<section>
  <article>
    <p>Hello, Twitch!</p>
  </article>
</section>

Slide 29 of 47

Selecting By Relationship

p + p {
  color: red;
}

To select an element that is the next sibling use

previous sibling + next sibling

<section>
  <p>Hello, Twitch!</p>
  <p>Hello, Youtube!</p>
</section>

Slide 30 of 47

Let's Code

Some Relationships

Slide 31 of 47

IDs & Classes

Slide 32 of 47

IDs

#zebra {
  color: red;
}

IDs are used for selecting distinct elements

Only one id with the same value per document

#idName

<section>
  <p>Hello, Twitch!</p>
  <p id="zebra">Hello, Youtube!</p>
</section>

Slide 33 of 47

Classes

.bob {
  color: red;
}

Classes are for selecting multiple elements

Multiple with same value allowed per document

.className

<section>
  <p class="robot">Hello, Twitch!</p>
  <p id="zebra" class="bob">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>
</section>

Slide 34 of 47

Specificity

p.robot.unicorn {
  color: red;
}

<section>
  <p class="robot unicorn">Hello, Twitch!</p>
  <p id="zebra" class="bob">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>
</section>

Slide 35 of 47

Specificity

#dietCoke .dominosPizza {
  color: red;
}

<section id="dietCoke">
  <p class="robot unicorn">Hello, Twitch!</p>
  <p id="zebra" class="bob dominosPizza">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>
</section>

Slide 36 of 47

Specificity

.bob {
  color: red !important;
}

<section id="dietCoke">
  <p class="robot unicorn">Hello, Twitch!</p>
  <p id="zebra" class="bob dominosPizza">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>
</section>

Slide 37 of 47