CSS
Cascading Style Sheets
Introduction to CSS
CSS Properties
Intermediate CSS
The Cascade - Specificity and Inheritance
Combining CSS Selectors
How to target specific elements to style
<!-- file: "index.html" -->
<p>Yellow Text</p>
<div class="box inner-box">
<p>White Text</p>
</div>
/* file: "style.css" */
p {
color: yellow;
}
.inner-box p {
color: white;
}
Targeting the paragraph inside a parent div’s class
Group = Apply to both selectors
selector, selector {
color: white;
}
Child = Apply to direct child of left side
selector > selector {
color: firebrick;
}
Descendant = Apply to a descendant of left side
selector selector {
color: blue;
}
Chaining = Apply where ALL selectors and true
selectorselector {
color: seagreen;
}
Combining Combiners
selector selectorselector {
font-size: 0.5rem;
}
CSS Positioning
Relative, Absolute, Fixed, and Static Positioning
Static Positioning
HTML default flow
Relative Positioning
Position relative to default position
Absolute Positioning
Position relative to nearest positioned ancestor or top left corner of webpage
Fixed Positioning
Position relative to top left corner of browser window
Advanced CSS
CSS Display
Block, Inline, and Inline-Block
CSS Float
Only use float for wrapping text around images. Use flex and grid for crafting layouts.
How to Create Responsive Websites
Ways of creating responsive websites:
- Media Queries
- CSS Grid
- CSS Flexbox
- External Frameworks (e.g., Bootstrap)
Media Queries
Adding breakpoints to define responsive layouts
/* file: "style.css" */
div {
background-color: blue;
height: 200px;
widows: 200px;
}
@media (max-width: 600px) {
div {
height: 100px;
width: 100px;
}
}
When a website is >=600px wide, use the nested styling
/* file: "style.css" */
@media (min-width: 600px) {
h1 {
font-size: 15px;
}
}
If the screen is wider than 600px, use the nested styling to render
Combine
@media (min-width: 600px) and (max-width: 900px) {
/* Styles for screen between 600px and 900px */
}
@media (max-width: 600px) and (min-width: 900px) {
/* Styles for screen less than 600px and greater than 900px */
}
Device
@media print(orientation: landscape){
/* Styles for landscape orientation */
}
/*file: style.css*/
@media (min-width: 319px) and (max-width: 480px) {
body {
background-color: lightsalmon;
}
}
@media (min-width: 481px) and (max-width: 1200px) {
body {
background-color: powderblue;
}
}
@media (min-width: 1201px) and (max-width: 1600px) {
body {
background-color: limegreen;
}
}
@media (min-width: 1601px) {
body {
background-color: seagreen;
}
}
Media query widths template
CSS Grid
<!-- file: "index.html" -->
<div class="grid-container">
<div class="first card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
/*file: "style.css"*/
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px 200px;
gap: 30px;
}
.first {
grid-column: span 2;
}
.card {
background-color: blue;
}
Basics of using CSS Grid.
CSS Flexbox
Display: Flex
<!-- file: "index.html" -->
<div class="flex-container">
<div class="first card"></div>
<div class="second card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
/*file: "style.css"*/
.flex-container {
display: flex;
}
.card {
background: blue;
border: 30px solid white;
height: 100px;
flex: 1;
}
.first {
flex: 2;
}
.second {
flex: 0.5;
}
Flex Direction
By default, flex-direction is set to row. This affects the direction of the “main axis”.
MDN Docs - CSS Selector Combinator MDN Docs - CSS Universal Selector
Flex Layout
Align, Justify, and Wrap
Properties:
.container {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start; /* Aligns along the cross axis */
height: 70vh; /* viewport height */
align-content: center; /* Only works if wrap is true */
}
.item {
order: 0;
flex-basis: auto;
align-self: flex-start;
flex-grow: 1;
flex-shrink: 1;
}
Complete Guide to Flexbox Flexbox Froggy
Flex Sizing
Shrinking and Growing
Priority List of Sizing Properties
min-width/max-widthflex-basiswidthcontent-width
Grid
A Two-Dimensional Layout System
Grid Sizing
/*file: "style.css"*/
.grid-container {
display: grid;
grid-template: 100px 200px / 400px 800px; /* rows / columns */
}
Grid size using minmax to limit the minimum and maximum grow/shrink size of the grid:
.grid-container {
display: grid;
grid-template-rows: 200px 400px;
grid-template-columns: 200px minmax(400px, 2fr);
}
The minmax sets the minimum size that the column can shrink and grow.
Succinct way to write grid’s rows and columns:
.grid-container {
grid-template-rows: repeat(2, 2fr); /* (times, size) */
grid-template-columns: repeat(2, 1fr);
}
Grid Item Placement
How to layout items in the grid
(grid-row) (grid-column)
External Frameworks
Bootstrap Framework
<!-- file: "index.html" -->
<div class="container">
<div class="row">
<div class="card col-6">Card</div>
<div class="card col-2">Card</div>
<div class="card col-4">Card</div>
</div>
</div>
Bootstrap Layout
Understanding the 12 column Boostrap layout system
Bootstrap Container
Screen breakpoints
| Extra small | Small | Medium | Large | X-Large | XX-Large | |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
| <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
Breakpoints cheatsheet
Bootstrap Components
Learn to use the pre-built and pre-styled Components
