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
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 🚨
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,776
