Course Title: CSS Essential Training (2019)

Description: Cascading Style Sheets (CSS) is a stylesheet language that allows you
to control the appearance of your webpages. In this hands-on course, Christina
Truong demonstrates the concepts that form the foundation of CSS, explaining what
you need to know to tweak existing CSS and write your own. Christina explains how
to add colors and other design elements to take your webpages beyond just black
text on a white background. She shows how to use selectors, how the box model
defines the spacing and sizing of page elements, and how to style text and manage
basic layouts with Flexbox and Grid. She also covers working with advanced
selectors, creating fluid layouts, and determining when to use the float and
position properties. Plus, at the end of the course, you'll walk away with an
actual project—an online résumé page.

***********************************************
Chapter: 1. Getting Started
***********************************************

-----------------------------------------------
Video: Referencing CSS
-----------------------------------------------
Note Time: Note Text:

0:00:33 External CSS: <link rel="stylesheet" href="styles.css">

Inline CSS: <p style="color: red;">This is a red paragraph.</p>
Internal CSS: <style>
p { color: blue; }
</style>

-----------------------------------------------
Video: Absolute paths
-----------------------------------------------
Note Time: Note Text:

0:00:01 What Are Relative Paths?

Definition: A way to link files within the same project by describing the path from
one file to another. What
Are Absolute Paths?
Definition: An absolute path is a complete URL that includes the protocol (like
http:// or https://) and the full domain name. It points to a specific location on
the web.

***********************************************
Chapter: 2. Core Concepts
***********************************************

-----------------------------------------------
Video: Type and universal selectors
-----------------------------------------------
Note Time: Note Text:

0:02:03 Type Selectors: used to select all elements of a specific type.

Universal Selector: asterisk *
-----------------------------------------------
Video: Class and ID selectors
-----------------------------------------------
Note Time: Note Text:

0:02:57 Class Selectors: use a (.) dot

ID Selectors: use a hash #

-----------------------------------------------
Video: Class and ID selector exercise
-----------------------------------------------
Note Time: Note Text:

0:00:15 Classes can be reused on multiple elements.

IDs should only be used once per page.

0:00:39 Avoid spaces in names; use underscores _ or dashes -

-----------------------------------------------
Video: Descendant selectors
-----------------------------------------------
Note Time: Note Text:

0:00:05 a { color: blue; }: All links will be blue.

section a { color: green; }: Links inside a section will be green, overriding the
blue.
section p a { color: red; }: Links inside a paragraph inside a section will be red,
overriding the green.

-----------------------------------------------
Video: Grouping selectors
-----------------------------------------------
Note Time: Note Text:

0:00:00

Combining Selectors
p.special {
font-weight: bold;
}

This will apply bold text to <p> elements with the class "special".

0:00:00 Mixing Selector Types:

.class1, #id1, div {
margin: 10px;
}

0:00:00 Grouping Selectors:

h1, h2, p {
color: blue;
}

-----------------------------------------------
Video: The cascade and importance
-----------------------------------------------
Note Time: Note Text:

0:00:01 Using !important:

The !important keyword can be added to a style declaration to force it to override

any other styles, including those with higher specificity.

-----------------------------------------------
Video: Pseudo-class selectors and links
-----------------------------------------------
Note Time: Note Text:

0:03:51 :link and :visited

:link: Targets unvisited links.
:visited: Targets links that have been visited.
a:link {
color: green; /* Unvisited links will be green */
}

0:03:51 Pseudo-Class Selectors

Pseudo-class selectors are used to define the special states of an element.

0:03:56 :active
:active: Applied at the moment the element is activated.
a:active {
color: red; /* Changes color to red when the link is clicked */
}

0:03:56 :hover
:hover: Applied when the mouse pointer hovers over an element.
a:hover {
background-color: gray; /* Changes background to gray when hovered over */
}

0:03:56 :focus
:focus: Applied when an element gains focus.
a:focus {
outline: 2px solid orange; /* Adds an orange outline when the link is focused */
}

***********************************************
Chapter: 3. The Box Model
***********************************************

-----------------------------------------------
Video: Inline, block, and display
-----------------------------------------------
Note Time: Note Text:

0:02:16 Inline Elements:

Display side by side (e.g., <a>, <span>, <strong>).
Wrap to the next line only if there’s no space.

0:02:33 Block Elements:

Start on a new line and stack on top of each other (e.g., <p>, <div>, <section>).

0:03:06 Display Property:

the display property:

block: Makes an inline element behave like a block.
inline: Makes a block element behave like an inline element.
inline-block: Combines both, allowing width and height while still displaying
inline.

-----------------------------------------------
Video: The box model properties
-----------------------------------------------
Note Time: Note Text:

0:00:28 Box Model: Think of each HTML element as a box with four parts:

Content Box: This is where your content (like text or images) goes.
Padding: This is the space around the content, inside the element.
Border: This surrounds the padding.
Margin: This is the space outside the element, separating it from other elements.

0:00:47
Width and Height: Set the size of the content area.
Padding: Adds space inside the element, around the content.
Margin: Adds space outside the element, separating it from others.
Border: Adds a border around the padding.

0:01:04 Units:

Percentage: Sizes elements relative to their container. For example, 50% width
means half the width of the container.
Pixels: Fixed size units, commonly used for web design.

-----------------------------------------------
Video: The box properties syntax and usage
-----------------------------------------------
Note Time: Note Text:

0:01:17 padding: 10px; (same padding on all sides)

padding: 10px 20px; (10px top/bottom, 20px left/right)
padding: 10px 20px 30px; (10px top, 20px left/right, 30px bottom)
padding: 10px 20px 30px 40px; (top, right, bottom, left)

0:02:23 Margin: This adds space outside an element, separating it from

other elements. can also use negative values and the keyword auto

-----------------------------------------------
Video: Margin and layouts
-----------------------------------------------
Note Time: Note Text:

0:00:44 Negative Margins: These can move elements outside their default
position.

0:01:18 Centering Elements: To center a block element horizontally, set

its width and then set the left and right margins to auto

0:01:50 Creating Containers: To align content without affecting

background styles, wrap the content in a <div> (container).

***********************************************
Chapter: 4. Typography
***********************************************

-----------------------------------------------
Video: Font-weight and font-style
-----------------------------------------------
Note Time: Note Text:

0:01:35 Typography: The art of arranging type to make text readable and
visually appealing.

-----------------------------------------------
Video: The font-size property
-----------------------------------------------
Note Time: Note Text:

0:00:11 Pixels (px): A fixed size. For example, 16px means the text is
16 pixels tall.
em: Relative to the parent element's font size. If the parent is 16px, 2em would be
32px rem:
Relative to the root element.rem: Relative to the root element.

0:00:11 Font-Size Property Basics:

Absolute Values: These are fixed sizes, like pixels (px).
Relative Values: These sizes change depending on the size of the parent.

-----------------------------------------------
Video: Font shorthand
-----------------------------------------------
Note Time: Note Text:

0:00:00 font-style, font-variant, and font-weight must come before font-

size

0:00:00 line-height must come immediately after font-size, separated by

a forward slash (/).
font-family must be the last value.

Summary: font-style, font-variant, font-weight, font-size/line-height, font-family

0:00:00 font shorthand can include the following properties:

font-style (e.g., italic, normal)
font-variant (e.g., normal, small-caps)
font-weight (e.g., bold, normal)
font-size (e.g., 16px, 1em)
line-height (e.g., 1.5)
font-family (e.g., Arial, 'Times New Roman')
-----------------------------------------------
Video: Text-decoration, text-align, and line-height
-----------------------------------------------
Note Time: Note Text:

0:00:00 Text-Align
Common Values:
left: Aligns text to the left (default).
right: Aligns text to the right.
center: Centers the text.
justify: Spreads the text out so that each line has equal width

0:00:00 Text-Decoration

Common Values:
none: No decoration.
underline: Adds a line below the text.
overline: Adds a line above the text.
line-through: Adds a line through the text.
Color and Style:

0:03:08 Line-Height
Purpose: Controls the space between lines of text.

Common Values:
Fixed Value: 20px (absolute unit, doesn't change with font size).
Percentage: 150% (relative to the font size, adjusts automatically).
Unitless: 1.5 (also relative to the font size,).

***********************************************
Chapter: 5. Layouts: Float and Position
***********************************************

-----------------------------------------------
Video: Project: Float and box model fix
-----------------------------------------------
Note Time: Note Text:

0:01:24 Floating Images:

float the images to the left
float: left.

0:01:30 Clearing Floats: Use overflow: hidden

-----------------------------------------------
Video: Position
-----------------------------------------------
Note Time: Note Text:

0:05:23 overflow: hidden --> see w3 schools

-----------------------------------------------
Video: Position and z-index
-----------------------------------------------
Note Time: Note Text:
0:01:42 css
.box1 {
position: relative;
z-index: 1; /* Higher stack level */
}

.box2 {
position: relative;
z-index: 2; /* Even higher stack level */
}

This ensures Box 2 will appear above Box 1.

0:01:42 Z-Index Property

The z-index property controls the stacking order of elements along the Z-axis
(depth).

The default stacking order is:

Root element (<html>)

Block-level elements (in the order they appear in the HTML)
Floated elements
Inline elements
Positioned elements (relative, absolute, fixed, sticky)

0:01:42 Position Property

Here are the main values:

Static: The default value. Elements are positioned according to the normal flow of
the document.
Relative: The element is positioned relative to its normal position. You can use
top, right, bottom, and left properties to move it.
Absolute: The element is positioned relative to its nearest positioned ancestor (if
any); otherwise, it is positioned relative to the initial containing block (usually
the body).
Fixed: The element is positioned relative to the viewport, meaning it stays in the
same place even when the page is scrolled.
Sticky: The element switches between relative and fixed positioning, depending on
the scroll position. It sticks in place when you scroll past it.

***********************************************
Chapter: 6. Layouts: Flexbox and Grid
***********************************************

-----------------------------------------------
Video: Introduction to Grid and Flexbox
-----------------------------------------------
Note Time: Note Text:

0:00:47

Flexbox: Best for single-axis alignment (rows or columns).

Grid: Best for two-axis layouts (rows and columns).

0:00:47
Flexbox
One-Dimensional: Flexbox arranges items in a single row or column.
Alignment: It helps distribute space and align items along one axis (either
horizontally or vertically).
Grid
Two-Dimensional: Grid arranges items in both rows and columns at the same time.
Control: It gives you more control over the layout, allowing you to create complex
designs.

-----------------------------------------------
Video: Flexbox: Orientation and ordering
-----------------------------------------------
Note Time: Note Text:

0:00:02 Flex-Flow Shorthand

The flex-flow property is a shorthand for setting both flex-direction and flex-wrap
at the same time.

0:00:02 Flex-Wrap Property

The flex-wrap property controls whether the flex items should wrap onto multiple
lines.
No-Wrap: This is the default value. All items will be placed in one line.
Wrap: Items will wrap onto multiple lines.
Wrap-Reverse: Items will wrap onto multiple lines, but in reverse order.

0:00:02 Flex-Direction Property

The flex-direction property determines the direction of the main axis in a flex.
Row: This is the default value. Items are placed in a horizontal line, from left to
right.
Row-Reverse: Items are placed in a horizontal line, but from right to left.
Column: Items are placed in a vertical line, from top to bottom.
Column-Reverse: Items are placed in a vertical line, but from bottom to top.
Example: flex-flow: row wrap; sets the direction to row and allows wrapping.

-----------------------------------------------
Video: Flexbox exercise
-----------------------------------------------
Note Time: Note Text:

0:00:14 display: flex-->enable Flexbox layout mode.

Flexible Sizing to control the size of flex items.
For example, flex: 1 1 100px sets the flex-grow,
flex-shrink, and flex-basis values.

-----------------------------------------------
Video: Flexbox: Alignment
-----------------------------------------------
Note Time: Note Text:

0:00:34 Centering Items: To center items both horizontally and

vertically, set both justify-content and align-items to center.
Distributing Space: Use space-between, space-around, or space-
evenly to distribute space between items in different ways.

0:00:34 stretch: Items stretch to fill the container along the cross
axis.
0:00:34 space-around: Equal space around each item. space-
evenly: Equal space between all items.

0:00:34 Flexbox Alignment Basics

Main Axis vs. Cross Axis:
Main Axis: The primary direction (horizontal or vertical) along which items are
aligned.
Cross Axis: The perpendicular direction to the main axis.

-----------------------------------------------
Video: The explicit grid
-----------------------------------------------
Note Time: Note Text:

0:01:31 Explicit Grid

Grid-Template-Columns and Grid-Template-Rows g

rid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: 100px 200px; /* Two rows with specified heights */

0:02:14 Flexible Length Unit (fr)

The fr unit allows you to distribute space proportionally. For example, 1fr 2fr 1fr
means the second column takes up twice the space of the others.

0:02:31 Repeat Function

The repeat() function simplifies grid definitions by allowing you to repeat values
easily.
grid-template-columns: repeat(3, 1fr); /* Same as 1fr 1fr 1fr */

0:03:38 Gap Property

The gap property manages spacing between grid items. For example: gap: 10px; /*
Uniform gap between items */

0:04:30 Combining Units

You can mix fixed and flexible units in a single grid.

For example:
grid-template-columns: 100px 1fr 1fr; /* Fixed width for the first column, flexible
for the others */

-----------------------------------------------
Video: The implicit grid
-----------------------------------------------
Note Time: Note Text:

0:00:00 Using Implicit Grid Properties

grid-auto-rows and grid-auto-columns: These properties specify the size of

automatically generated rows and columns. grid-auto-rows: 100px; /* Sets height for
any new rows */

0:02:10 Explicit Grid: Defined by the developer using grid-template-

columns and grid-template-rows.
grid-template-columns: 1fr 1fr 1fr; /* Creates three equal columns */

0:02:37 Implicit Grid: Automatically created when there are more items
than defined tracks. CSS generates additional rows or columns to accommodate excess
items.

-----------------------------------------------
Video: Grid placement properties
-----------------------------------------------
Note Time: Note Text:

0:01:16 Grid-Container vs. Grid Items

Grid-Container: Defines the overall structure of the grid.
Grid Items: Individual elements placed within the grid.

0:01:25 Grid Lines

Grid Lines: Numbered lines that define the start and end of grid items.
Example: If a grid has three columns, the lines are numbered 1 to 4.

0:01:25 Key Properties for Placement

grid-column: Shorthand for grid-column-start and grid-column-end.
grid-row: Shorthand for grid-row-start and grid-row-end.

0:02:29 Using grid-column and grid-row

grid-column-start: Specifies the starting grid line for a column.

grid-column-end: Specifies the ending grid line for a column.

Example: grid-column: 2 / 4; means the item starts at line 2 and ends at line 4,
spanning two columns.

grid-row-start: Specifies the starting grid line for a row.

grid-row-end: Specifies the ending grid line for a row.

Example: grid-row: 1 / 3; means the item starts at line 1 and ends at line 3,
spanning two
rows. .grid-item {
grid-column: 2 / 4; /* Spanning columns 2 to 3 */
grid-row: 1 / 3; /* Spanning rows 1 to 2 */
}

0:03:02 Implicit Grid

Implicit Grid: Automatically generated rows or columns when there are more items
than defined in the explicit grid.
Example: If you have more items than defined columns, new columns are created
automatically.

***********************************************
Chapter: 7. Advanced Selectors
***********************************************

-----------------------------------------------
Video: Introduction to advanced selectors
-----------------------------------------------
Note Time: Note Text:

0:00:38 What gets reversed when using the flex-wrap: wrap-reverse

option? cross start and cross end

A flex container is set with a width of 200px and flex-wrap: wrap;. It has 3 flex
items set with flex: 1 0 100px;. What is the effective width of the third flex
item? 200px

You want your flex items to have a maximum width of 300px. Which flex rule will set
this? flex: 0 1 300px; for minimum 300px --> 1 1 300px

Your flexbox container is set with the justify-content: space-between; property.

Should you be concerned about increasing the padding of the flex items? Yes, large
padding values will cause the items to overflow the container.

When will you want to use an explicit grid and an implicit grid together?
when you know the minimum number of grid items, but not the maximum

What does the following grid template define, if the grid container is set with a
700px width?

grid-template-columns: repeat(2, 2fr) 100px repeat(2, 1fr);

The first two columns will each be 200px wide, and the last three columns will be
100px.

-----------------------------------------------
Video: Relational selectors: Combinators
-----------------------------------------------
Note Time: Note Text:

0:01:03 What are Combinators?

Combinators are selectors that match elements based on their relationship to other
elements.
They help you apply styles to elements that have a specific relationship in the
HTML structure.

0:01:32 Types of Combinators

Descendant Selector

Syntax: ancestor descendant

Example: section p
Explanation: Matches all <p> elements that are nested within a <section> element

0:02:01 Child Combinator

Syntax: parent > child

Example: section > p
Explanation: Matches only the <p> elements that are direct children of the
<section> element.

-----------------------------------------------
Video: Project: Updates with combinators
-----------------------------------------------
Note Time: Note Text:
0:00:01 Descendant Selector: Matches any nested element.
Child Combinator: Matches only direct children.
Adjacent Sibling Combinator: Matches the first sibling immediately following an
element.
General Sibling Combinator: Matches all siblings that come after an element.

0:00:01 General Sibling Combinator

Syntax: previous ~ siblings

Example: h1 ~ p
Explanation: Matches all <p> elements that are siblings of an <h1> element,

0:00:01 Adjacent Sibling Combinator

Syntax: previous + next

Example: h1 + p
Explanation: Matches the <p> element that comes immediately after an <h1> element.
Only the first matching sibling is selected.

-----------------------------------------------
Video: Pseudo-class selectors: First and last
-----------------------------------------------
Note Time: Note Text:

0:01:37 :first-child and :last-child: Select the first and last elements
within a parent.
:first-of-type and :last-of-type: Select the first and last elements of a specific
type within a parent.

0:01:37 Key Selectors

:first-child Selects the first child element within a parent. Example:
p:first-child selects the first <p> element inside its parent.
:last-child Selects the last child element within a parent. p:last-
child selects the last <p> element inside its parent.
:first-of-type Selects the first element of a specific type within a parent.
:last-of-type Selects the last element of a specific type within a parent.

0:01:37 What are Pseudo-Class Selectors?

Pseudo-class selectors are used to style elements based on their state or position
within their parent.

-----------------------------------------------
Video: Project: Advanced selectors
-----------------------------------------------
Note Time: Note Text:

0:00:00 3. Using the Child Combinator

Objective: Apply styles to specific child elements within a parent.
. Last-of-Type Pseudo-Class (:last-of-type)
What it does: Selects the last element of a specified type within a parent.

0:03:01 Key Concepts

1. Child Combinator (>) Selects elements that are direct children of a specified
parent
2. Creating Reusable Styles Apply the same style to multiple sections without
repeating CSS code.
Steps:
Create a Class: Define a class for the common style.
css
.divider {
border-bottom: 1px dotted #ccc;
}

Apply the Class: Add this class to the parent elements where you want the style.
html

***********************************************
Chapter: 8. Fluid and Responsive Layouts
***********************************************

-----------------------------------------------
Video: Project: Flexible background image
-----------------------------------------------
Note Time: Note Text:

0:04:12 Media Queries: Apply different styles based on device

characteristics to optimize the layout for different screen sizes.

0:04:51 Set the Image: background-image: url('photo.jpg');

No Repeats: background-repeat: no-repeat;
Position: background-position: center;
Cover the Area: background-size: cover;

-----------------------------------------------
Video: Introduction to media queries
-----------------------------------------------
Note Time: Note Text:

0:00:32 You use the @media rule in your CSS file.

Example: @media (max-width: 1000px) { /* CSS styles here */ }

0:00:40 Types of Media:

All: Applies to all devices.

Print: Applies to printers.
Screen: Applies to screens like monitors, tablets, and phones.
Speech: Applies to screen readers.

0:01:42 Logical Operators:

And: Combine multiple conditions. Example: @media (min-width: 600px) and (max-
width: 1000px) { /* CSS styles here */ }
Not: Exclude a condition. Example: @media not all and (min-width: 600px) { /* CSS
styles here */ } not: This keyword negates the condition that follows it. In this
case, it means "apply these styles if the following condition is not true."

-----------------------------------------------
Video: Media queries, widths, and breakpoints
-----------------------------------------------
Note Time: Note Text:

0:01:41 Why Use Breakpoints?:

To make sure your website looks good on all devices

0:01:54 Design Approaches:

Desktop First: Design for larger screens first, then adjust for smaller screens
using max-width.
Mobile First: Design for smaller screens first, then adjust for larger screens
using min-width.