CSS - The Basics

Leon Noel

"I got Glocks, fuck an education"

#100Devs

Agenda

  • Questions?

  • Review - Client Server Model

  • Review - Progressive Enhancement

  • Learn - CSS Fundamentals

  • Learn - Parent / Child Selectors

  • Hint At - Classes and IDs

  • Learn - Specificity

  • Lab - Style A Simple Site

Questions

About last class or life

Checking In

Like and Retweet the Tweet

!checkin

Submitting Work

BBC HTML in a Glitch.com

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

 

Please Use Search

Please Use Threads!

In Help Channels, Not Replies! 

You Have The Power To Help

Jump in those threads please!

Typing

https://www.keybr.com/

!?! READING !?!

Deep Not Wide

FOR THE LOVE OF ALL THAT IS HOLY

Text

What is the internet?

The Golden Rule

SEPERATION OF CONCERNS

  • HTML = Content / Structure

  • CSS = Style

  • JS = Behavior / Interaction

Progressive Enhancement

According to the United States Department of Commerce, about 22 million Americans--roughly 35% of the nation's rural residents--lack access to broadband.

(2017)

CSS

Where does CSS go?

  • Inline

  • In the head

  • In a separate file

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">

CSS SYNTAX

(Spelling And Grammer Rules)

source: mdn

CSS BREAK DOWN

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

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

CSS BREAK DOWN

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

The selector, p in this case, species what parts of the HTML document should be styled by the declaration.

This selector will style all p elements on the page.

CSS BREAK DOWN

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

The declaration block is here:

Declarations go inside curly braces

CSS BREAK DOWN

color: red;

This example has two declarations.

Here is the first:

CSS BREAK DOWN

font-weight: bold;

This example has two declarations.

Here is the second:

CSS BREAK DOWN

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

What is this?

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

CSS BREAK DOWN

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

Let's Learn

Some Simple Styles

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

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

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

🛑 Stop 🛑

How to research?

 

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

 

🚨 Use the MDN 🚨

 

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

Let's Code

Some Basic CSS

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>

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>

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>

Let's Code

Some Relationships

IDs & Classes

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>

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>

Specificity

p + p {
  color: red;
}
<section>
  <p>Hello, Twitch!</p>
  <p>Hello, Youtube!</p>
</section>

Specificity

<section>
  <p>Hello, Twitch!</p>
  <p id="zebra">Hello, Youtube!</p>
</section>
#zebra {
  color: red;
}

Specificity

<section>
  <p class="robot">Hello, Twitch!</p>
  <p id="zebra" class="bob">Hello, Youtube!</p>
  <p class="bob">Goodbye, Mixer!</p>
</section>
section .bob{
  color: red;
}

Let's Code

Simple Site Lab

Homework

Finish Lab & Read http://learnlayout.com

Dr. Iona Black

#100Devs CSS - The Basics (cohort 2)

By Leon Noel

#100Devs CSS - The Basics (cohort 2)

Class 04 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord

  • 8,418

More from Leon Noel