CSS Selectors

Selectors

• Types of Selectors:
  • Element Selectors (e.g. p, h1, div)
  • ID Selectors (e.g. #header)
  • Class Selectors (e.g. .header)
  • Attribute Selectors (e.g. [hreflang="en"])
  • Combinators (e.g. div > p, div p)
  • Pseudo-Classes (e.g. :hover, :first-child)
  • Pseudo-Elements (e.g. ::before, ::after)
• Selector Combinators:
  • > (child combinator)
  • (descendant combinator)
  • + (adjacent sibling combinator)
  • ~ (general sibling combinator)

Properties

• Common Properties:
  • color (text color)
  • background-color (background color)
  • font-size (font size)
  • padding (padding)
  • margin (margin)
  • border (border)
  • width and height (element dimensions)
• CSS Units:
  • px (pixels)
  • % (percentage)
  • em (relative to font size)
  • rem (relative to root element)
  • vw and vh (relative to viewport)

Grid

• Grid Container:
  • display: grid or display: inline-grid
  • grid-template-columns and grid-template-rows (define grid structure)
• Grid Items:
  • grid-column and grid-row (place items on the grid)
  • grid-area (assign items to grid areas)
• Grid Units:
  • fr (fractional unit)
  • auto (automatic grid size)

Responsive Design

• Media Queries:
  • @media (define media query)
  • max-width and min-width (set breakpoints)
  • orientation (portrait or landscape)
• Responsive Units:
  • vw and vh (relative to viewport)
  • % (percentage)
  • em and rem (relative to font size)
• Mobile-First Design:
  • Start with small screen sizes and add styles as screen size increases
  • Use min-width media queries to add styles for larger screens

Selectors

• There are various types of selectors, including Element, ID, Class, Attribute, Combinators, Pseudo-Classes, and Pseudo-Elements.
• Element Selectors target specific HTML elements, such as p, h1, or div.
• ID Selectors target specific elements with a unique ID, such as #header.
• Class Selectors target elements with a specific class, such as .header.
• Attribute Selectors target elements with specific attributes, such as [hreflang="en"].
• Combinators combine multiple selectors, such as div > p or div p.
• Pseudo-Classes target specific states or positions, such as :hover or :first-child.
• Pseudo-Elements target specific parts of an element, such as ::before or ::after.

Selector Combinators

• The > combinator targets child elements.
• The (space) combinator targets descendant elements.
• The + combinator targets adjacent sibling elements.
• The ~ combinator targets general sibling elements.

Properties

• color sets the text color.
• background-color sets the background color.
• font-size sets the font size.
• padding sets the padding.
• margin sets the margin.
• border sets the border.
• width and height set the element dimensions.

CSS Units

• px represents pixels.
• % represents a percentage.
• em represents a relative unit to the font size.
• rem represents a relative unit to the root element.
• vw and vh represent relative units to the viewport.

Grid

• A Grid Container is created with display: grid or display: inline-grid.
• grid-template-columns and grid-template-rows define the grid structure.
• Grid Items can be placed on the grid using grid-column and grid-row.
• grid-area assigns items to grid areas.

Grid Units

• fr represents a fractional unit.
• auto sets the grid size to automatic.

Responsive Design

• Media Queries are defined with @media.
• max-width and min-width set breakpoints.
• orientation targets portrait or landscape orientation.
• vw and vh represent relative units to the viewport.
• % represents a percentage.
• em and rem represent relative units to the font size.
• Mobile-First Design involves starting with small screen sizes and adding styles as screen size increases.
• min-width media queries add styles for larger screens.

Selectors

• There are six types of selectors: Element, Class, ID, Attribute, Pseudo-Classes, and Pseudo-Elements.
• Element Selectors target HTML elements (e.g. h1, p, div).
• Class Selectors target HTML elements with a specific class (e.g. .header, .footer).
• ID Selectors target HTML elements with a specific ID (e.g. #header, #footer).
• Attribute Selectors target HTML elements with a specific attribute (e.g. [hreflang="en"], [type="submit"]).
• Pseudo-Classes target HTML elements based on their state (e.g. :hover, :active, :focus).
• Pseudo-Elements target HTML elements that are not part of the document tree (e.g. ::before, ::after).

Selector Combinators

• There are four types of selector combinators: Descendant, Child, Adjacent Sibling, and General Sibling.
• Descendant Combinator targets elements that are descendants of another element (e.g. div p).
• Child Combinator targets elements that are direct children of another element (e.g. div > p).
• Adjacent Sibling Combinator targets elements that immediately follow another element (e.g. h1 + p).
• General Sibling Combinator targets elements that are siblings of another element (e.g. h1 ~ p).

Properties

• There are four types of properties: Layout, Visual, Text, and Other.
• Layout Properties control the layout of elements (e.g. width, height, margin, padding).
• Visual Properties control the visual styling of elements (e.g. color, background-color, font-size, font-family).
• Text Properties control the text styling of elements (e.g. text-align, text-decoration, text-transform).
• Other Properties control miscellaneous styling of elements (e.g. opacity, cursor, box-shadow).

Property Values

• There are three types of property values: Length, Color, and Keyword.
• Length Units are used to specify lengths (e.g. px, em, %, vw, vh).
• Color Values are used to specify colors (e.g. hex, rgb, rgba, hsl, hsla).
• Keyword Values are used to specify specific keywords (e.g. auto, none, inherit, initial).

Flexbox

• Flexbox Container Properties control the layout of flex containers.
• display: flex or display: inline-flex enables flexbox layout.
• flex-direction controls the direction of the flex container (e.g. row, column, row-reverse, column-reverse).
• flex-wrap controls whether the flex items wrap to a new line (e.g. wrap, nowrap).
• justify-content controls the alignment of flex items (e.g. flex-start, center, space-between, space-around).
• align-items controls the alignment of flex items (e.g. flex-start, center, baseline, stretch).
• Flexbox Item Properties control the layout of flex items.
• flex-grow controls the flexibility of flex items (e.g. 0, 1, 2).
• flex-shrink controls the shrinkability of flex items (e.g. 0, 1, 2).
• flex-basis controls the initial main size of flex items (e.g. auto, 100px, 20%).

Responsive Design

• Responsive Design Techniques include Media Queries, Mobile-First Design, Responsive Images, and Flexible Grids.
• Media Queries specify different styles for different screen sizes (e.g. @media (max-width: 768px)).
• Common Breakpoints include 320px, 480px, 768px, 1024px, and 1280px.

Grid

• Grid Container Properties control the layout of grid containers.
• display: grid or display: inline-grid enables grid layout.
• grid-template-columns controls the number of columns and their widths (e.g. repeat(3, 1fr), 100px 200px 300px).
• grid-template-rows controls the number of rows and their heights (e.g. repeat(2, 1fr), 100px 200px).
• grid-gap controls the gap between grid cells (e.g. 10px, 20px 10px).
• Grid Item Properties control the layout of grid items.
• grid-column controls the column placement of grid items (e.g. 1 / 3, span 2).
• grid-row controls the row placement of grid items (e.g. 1 / 3, span 2).
• grid-area controls the placement of grid items in a grid area (e.g. header, nav, main).