Study guide: CSS Styling and Layout

📋 Course Outline

1. CSS Foundations and Inclusion
2. Selectors and Color Systems
3. Text Styling and Typography
4. CSS Box Model and Display
5. Relative Units and Positioning
6. Flexbox Layout
7. Responsive Media Queries
8. Transitions and Transforms
9. CSS Animations

📖 1. CSS Foundations and Inclusion

🔑 Key Concepts & Definitions

• CSS: A styling language used to describe the style of a document, not a programming language.

★ Must-know

• CSS can be included in three ways:
  • inline on an element
  • in a <style> element in the same document
  • in an external stylesheet linked to the HTML file

Further detail

📌 An inline style overrides external and internal styles.

💡 Memory Hook

HTML supplies content; CSS supplies its style.

📖 2. Selectors and Color Systems

🔑 Key Concepts & Definitions

• CSS selector: Identifies the element or elements to which a CSS rule applies.

★ Must-know

• The selector forms shown are:

  • universal selector *
  • element selector such as h1
  • ID selector such as #myId
  • class selector such as .myClass

• The color property sets foreground color, whereas background-color sets background color.

Further detail

• CSS colors can be written using RGB values, such as rgb(255, 0, 0), or hexadecimal values, such as #ff0000.

📖 3. Text Styling and Typography

★ Must-know

• text-align aligns text within its parent element; right means the parent's right side, not the page's right side.

• font-weight can use names such as normal and bold or numeric values from 100 to 900 to control text weight.

Further detail

• text-decoration supports underline, overline, and line-through, can use styles such as wavy or dotted and a color, and can be set to none, including to remove hyperlink decoration.

• font-family can list multiple font families, such as Arial and Roboto, as fallback choices.

• line-height sets line spacing and can be given as a length, a unitless number, or normal.

• The listed text-transform values are:

  • uppercase
  • lowercase
  • capitalize
  • none

📖 4. CSS Box Model and Display

🔑 Key Concepts & Definitions

• CSS box model: The CSS box model organizes an element into content, padding, border, and margin.

★ Must-know

• By default, an element's height and width set the dimensions of its content area.

📌 display: inline takes only the required space and does not accept margin or padding as described; inline-block allows margin and padding, while block takes the available width.

📌 display: none removes an element from document flow without reserving space, whereas visibility: hidden hides it while reserving its space.

Further detail

• A border can be specified with border-width, border-style, and border-color, or with the shorthand border, such as 2px solid black.

• border-radius rounds an element's outer border edge; a value of **50%** can create a circular shape for a suitable element.

• The four-value padding and margin shorthands use clockwise order: top, right, bottom, left.

• The alpha channel in an RGBA color controls opacity from 0 to 1.

💡 Memory Hook

Picture each element as content inside padding, surrounded by border, with margin outside.

📖 5. Relative Units and Positioning

🔑 Key Concepts & Definitions

• CSS position: Determines how an element is positioned in a document.

★ Must-know

• A percentage such as width: 33% is commonly relative to the corresponding dimension of the parent element.

• For font size, em is relative to the parent element's font size; for padding and margin, em is relative to the same element's font size.

📌 static is the default position and ignores top, right, bottom, left, and z-index; relative is positioned relative to itself and responds to those properties.

📌 absolute is positioned relative to its closest positioned ancestor and removed from flow, whereas fixed is positioned relative to the browser and removed from flow.

Further detail

• vh and vw are relative to 1% of the viewport height and width, respectively.

• sticky positioning is based on the user's scroll position.

• z-index determines stack level, and overlapping elements with larger z-index values cover those with smaller values.

• The listed background-size values are:

  • cover
  • contain
  • auto

💡 Memory Hook

Relative stays in the flow; absolute and fixed leave it.

📖 6. Flexbox Layout

🔑 Key Concepts & Definitions

• Flexbox: A one-dimensional layout method for arranging items in rows or columns.

★ Must-know

• To use the flex model, set the container's display property to flex.

• justify-content aligns items along the main axis, while align-items aligns them along the cross axis and align-content controls space between and around content along the cross axis.

Further detail

• The listed flex-direction values are:

  • row (default)
  • row-reverse
  • column
  • column-reverse

• align-self aligns an individual flex item along the cross axis and overrides align-items for that item.

• flex-grow and flex-shrink determine how much an item grows or shrinks relative to the other items when space is available; a value of 0 means it does not grow.

💡 Memory Hook

Container controls group alignment; an item can override it with align-self.

📖 7. Responsive Media Queries

🔑 Key Concepts & Definitions

• Media query: Applies styles according to conditions such as viewport width or orientation to support responsive layouts.

📝 Essential Points

• A media query can test an exact width, as in @media (width: **600px**), or a minimum width, as in @media (min-width: 600px).

📖 8. Transitions and Transforms

🔑 Key Concepts & Definitions

• CSS transition: Defines how an element changes between two states over time.
• CSS transform: Applies two-dimensional or three-dimensional transformations to an element.

📝 Essential Points

• The listed transition properties are:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

• The transition shorthand example is transition: font-size **2s** ease-in-out **0.2s**, giving property, duration, timing function, and delay in that order.

• The transformations shown include:

  • rotation with rotate(45deg)
  • scaling with scale
  • translation with translate
  • skewing with skew(30deg)

📖 9. CSS Animations

🔑 Key Concepts & Definitions

• CSS animation: Animates elements using keyframes and animation properties.

📝 Essential Points

• A keyframes rule can define animation states using from and to or percentage points such as 0%, 50%, and 100%.

• The listed animation properties are:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

• The animation shorthand example is animation: myName **2s** linear **3s** infinite normal.

💡 Memory Hook

Define keyframes, then apply animation properties to the element.