Slide 1 of 57CSS -Review & Responsive
Leon Noel
"Uncle used to skim work, sellin' nicks at night
I was only 8 years old, watching Nick at Nite"
#100Devs
Slide 2 of 57Agenda
- Questions?
- Review - HTML Fundamentals
- Review - CSS Fundamentals
- Review - Box Model
- Review - Float 😱
- Review - Three Simple Layouts
- Learn - Responsive Basics
- Homework - Simple Responsive Site
Slide 3 of 57
Questions
About last class or life
Slide 4 of 57Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 57Friends?
Slide 6 of 57
Alumni Twitter Space
Tomorrow Friday Jan. 28th 6:00pm ET
Slide 7 of 57Submitting Work
Slide 8 of 57Sleep?
Slide 9 of 57YOU OWE YOU
Text
Slide 10 of 57What is the internet?
Slide 11 of 57The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 12 of 57
HTML SYNTAX
(Spelling And Grammer Rules)
source: mdn
Slide 13 of 57
Time For Some
TAGS
not that kind...
Slide 14 of 57Heading Elements (tags)
<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>
SIZE DOES NOT MATTER
Slide 15 of 57Other Text Elements
<p> Paragraph </p>
<span> Short text </span>
<pre> Preserves Whitespace </pre>
Slide 16 of 57Containing Elements
<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
Slide 17 of 57Let's Mark Up
BBC Solution
Slide 18 of 57
CSS
Where does CSS go?
- Inline
- In the head
- In a separate file
Slide 19 of 57CSS
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 20 of 57CSS 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 21 of 57CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
What is this?
Slide 22 of 57
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 23 of 57CSS BREAK DOWN
Why might we want to link to a separate CSS file?
Slide 24 of 57Let's Review
Some Simple Styles
Slide 25 of 57Color
h1{
color: red;
}
h2{
color: #FF0000;
}
p{
color: rgba(255,0,0,1);
}
span{
color: hsla(0, 100%, 50%,1);
}
Slide 26 of 57Font-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;
}
css
Slide 27 of 57Font-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;
}
css
Slide 29 of 57Let's Code
Some Basic CSS
Slide 30 of 57Selecting 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 31 of 57Selecting 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 32 of 57Selecting 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 33 of 57Let's Code
Some Relationships
Slide 34 of 57IDs & Classes
Slide 35 of 57IDs
#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 36 of 57Classes
.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 37 of 57Specificity
#pizza .jumanjiOriginalMovie {
color: red;
}
<section id="pizza">
<p class="jumanjiOriginalMovie">Hello, Twitch!</p>
<p id="car" class="hello">Hello, Youtube!</p>
<p class="goodbye">Goodbye, Mixer!</p>
</section>
Slide 38 of 57Specificity
#dietCoke p.dominosPizza.bob {
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 39 of 57Specificity
#dietCoke #zebra {
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 40 of 57Let's Code
Specificity Practice
Slide 42 of 57Let's Draw
The Box Model
Slide 43 of 57Let's Code
The Box Model
Slide 44 of 57Let's Look
Starter Template
Slide 45 of 57
Time For Some
Layouts
not that kind...
Slide 46 of 57🚨 Let's Talk About Floats 🚨
Slide 48 of 57Let's Code
Simple Layouts
Slide 49 of 57Layout 1
Slide 50 of 57Layout 2
Slide 51 of 57Layout 3
Slide 52 of 57Responsive Websites
Slide 54 of 57Media Queries
@media screen and (max-width: 600px) {
h1 {
color: blue;
}
}
Slide 55 of 57Let's Code
A Media Query
Slide 56 of 57Homework
Slide 57 of 57How can we make this responsive?
