Slide 1 of 46CSS - The Basics
Leon Noel
"I got Glocks, fuck an education"
#100Devs
Slide 2 of 46Agenda
- 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
Slide 3 of 46
Questions
About last class or life
Slide 4 of 46Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 46Submitting Work
Slide 6 of 46Please Use Search
Slide 7 of 46
Please Use Threads!
In Help Channels, Not Replies!
Slide 8 of 46
You Have The Power To Help
Jump in those threads please!
Slide 9 of 46Typing
https://www.keybr.com/
Slide 10 of 46!?! READING !?!
Slide 11 of 46Deep Not Wide
Slide 12 of 46FOR THE LOVE OF ALL THAT IS HOLY
Text
Slide 13 of 46What is the internet?
Slide 14 of 46The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 15 of 46Progressive 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)
Slide 16 of 46
Slide 17 of 46
CSS
Where does CSS go?
- Inline
- In the head
- In a separate file
Slide 18 of 46CSS
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 19 of 46
CSS SYNTAX
(Spelling And Grammer Rules)
source: mdn
Slide 20 of 46CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
Slide 21 of 46CSS 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 22 of 46CSS 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.
Slide 23 of 46CSS BREAK DOWN
{
color: red;
font-weight: bold;
}
The declaration block is here:
Declarations go inside curly braces
Slide 24 of 46CSS BREAK DOWN
color: red;
This example has two declarations.
Here is the first:
Slide 25 of 46CSS BREAK DOWN
font-weight: bold;
This example has two declarations.
Here is the second:
Slide 26 of 46CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
What is this?
Slide 27 of 46p{
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 28 of 46CSS BREAK DOWN
Why might we want to link to a separate CSS file?
Slide 29 of 46Let's Learn
Some Simple Styles
Slide 30 of 46Color
h1{
color: red;
}
h2{
color: #FF0000;
}
p{
color: rgba(255,0,0,1);
}
span{
color: hsla(0, 100%, 50%,1);
}
Slide 31 of 46Font-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 32 of 46Font-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 34 of 46Let's Code
Some Basic CSS
Slide 35 of 46Selecting 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 36 of 46Selecting 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 37 of 46Selecting 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 38 of 46Let's Code
Some Relationships
Slide 39 of 46IDs & Classes
Slide 40 of 46IDs
#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 41 of 46Classes
.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 42 of 46Specificity
p + p {
color: red;
}
<section>
<p>Hello, Twitch!</p>
<p>Hello, Youtube!</p>
</section>
Slide 43 of 46Specificity
<section>
<p>Hello, Twitch!</p>
<p id="zebra">Hello, Youtube!</p>
</section>
#zebra {
color: red;
}
Slide 44 of 46Specificity
<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;
}
Slide 45 of 46Let's Code
Simple Site Lab
Slide 46 of 46Homework
Dr. Iona Black