CSS: Syntax and Selectors

• Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML
• CSS describes how elements should be rendered on screen, on paper, in speech, or on other media
• CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript

CSS Syntax

• CSS consists of rule-sets
• Each rule-set has a selector and a declaration block
• The selector points to the HTML element you want to style
• The declaration block contains one or more declarations separated by semicolons
• Each declaration includes a CSS property name and a value, separated by a colon
• Example: h1 {color: blue; font-size: 12px;}

CSS Selectors

• Element selectors select HTML elements based on the element name
  • Example: p {color: black;} will style all <p> elements
• ID selectors select the HTML element that matches the ID attribute
  • Example: #intro {background-color: yellow;} will style the element with id="intro"
• Class selectors select HTML elements with a specific class attribute
  • Example: .center {text-align: center;} will style all elements with class="center"
• Universal selector selects all HTML elements on the page
  • Example: * {box-sizing: border-box;}
• Attribute selectors select HTML elements based on their attributes or attribute values
  • Example: a[href="https://example.com"] {color: red;} will style all <a> elements with href="https://example.com"
• Grouping selectors allows applying the same style to multiple elements
  • Example: h1, h2, p {text-align: center;} will center the text in all <h1>, <h2>, and <p> elements

CSS Box Model

• The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model
• The box model consists of:
  • Content: The actual content of the element (text, images, etc.)
  • Padding: Clears an area around the content; transparent
  • Border: A border that surrounds the padding and content
  • Margin: Clears an area outside the border; transparent
• Total width of an element = width + left padding + right padding + left border + right border + left margin + right margin
• Total height of an element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
• box-sizing property allows to include the padding and border in the element's total width and height

CSS Positioning

• The position property specifies the type of positioning method used for an element
• Possible values:
  • static: Default value. Elements render in order, as they appear in the document flow
  • relative: Element is positioned relative to its normal position
  • absolute: Element is positioned relative to its nearest positioned ancestor
  • fixed: Element is positioned relative to the viewport, meaning it always stays in the same place even if the page is scrolled
  • sticky: Element is positioned based on the user's scroll position
• top, right, bottom, and left properties define the offset of the element

Flexbox

• Flexbox is a CSS layout module designed for creating complex layouts more efficiently
• It is a one-dimensional layout method, meaning it deals with laying out items in a single row or column

Flex Container

• To use Flexbox, you first need a flex container
• This is done by setting the display property of an element to flex or inline-flex
  • display: flex; creates a block-level flex container
  • display: inline-flex; creates an inline-level flex container
• Flex items are the children of the flex container

Flex Container Properties

• flex-direction: Defines the direction flex items are placed in the container
  • row (default): Items are placed horizontally
  • row-reverse: Items are placed horizontally in reverse order
  • column: Items are placed vertically
  • column-reverse: Items are placed vertically in reverse order
• flex-wrap: Specifies whether flex items should wrap if they overflow the container
  • nowrap (default): Items will not wrap and may overflow
  • wrap: Items will wrap onto multiple lines or columns
  • wrap-reverse: Items will wrap onto multiple lines or columns in reverse order
• flex-flow: Shorthand property for flex-direction and flex-wrap
  • Example: flex-flow: row wrap;
• justify-content: Defines how flex items are aligned along the main axis of the container
  • flex-start (default): Items are packed toward the start of the main axis
  • flex-end: Items are packed toward the end of the main axis
  • center: Items are centered along the main axis
  • space-between: Items are evenly distributed along the main axis; the first item is flush with the start, the last is flush with the end
  • space-around: Items are evenly distributed along the main axis with equal space around them
  • space-evenly: Items are distributed so that the spacing between any two adjacent items (and the space to the edges) is equal
• align-items: Defines how flex items are aligned along the cross axis of the container
  • stretch (default): Items are stretched to fit the container
  • flex-start: Items are aligned to the start of the cross axis
  • flex-end: Items are aligned to the end of the cross axis
  • center: Items are aligned at the center of the cross axis
  • baseline: Items are aligned along their baselines
• align-content: Defines how the browser distributes space between and around flex items along the cross axis when there is extra space
  • Only works when there are multiple lines of flex items (i.e., when flex-wrap is set to wrap or wrap-reverse)
  • stretch (default): Lines are stretched to take up the remaining space
  • flex-start: Lines are packed to the start of the container
  • flex-end: Lines are packed to the end of the container
  • center: Lines are packed to the center of the container
  • space-between: Lines are evenly distributed; the first line is at the start, the last is at the end
  • space-around: Lines are evenly distributed with equal space around each line
  • space-evenly: Lines are distributed with equal space between them

Flex Item Properties

• order: Controls the order in which flex items appear in the container
  • By default, items have order: 0
  • Items are ordered from smallest to largest order value
• flex-grow: Defines the ability for a flex item to grow if necessary
  • Accepts a unitless value that serves as a proportion
  • If all items have flex-grow: 1, they will all take up an equal amount of the remaining space in the container
• flex-shrink: Defines the ability for a flex item to shrink if necessary
  • Accepts a unitless value that serves as a proportion
  • If the total size of flex items exceeds the container size, items will shrink according to their flex-shrink values
• flex-basis: Defines the initial main size of a flex item
  • Can be a length (e.g., 200px, 20%) or keyword (auto)
  • If set to auto, the item's size is based on its content
• flex: Shorthand property for flex-grow, flex-shrink, and flex-basis
  • Recommended to use this shorthand property
  • Example: flex: 1 0 auto; (equivalent to flex-grow: 1; flex-shrink: 0; flex-basis: auto;)
• align-self: Allows overriding the align-items property for individual flex items
  • auto (default): Inherits the container's align-items value
  • flex-start, flex-end, center, stretch, baseline: Same as align-items

Responsive Design

• Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes
• Key components:
  • Flexible grid layouts
  • Flexible images
  • Media queries

Viewport Meta Tag

• The viewport meta tag is used to control how browsers scale web pages on different devices
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width sets the width of the viewport to the width of the device
  • initial-scale=1.0 sets the initial zoom level when the page is first loaded

Flexible Grid Layouts

• Flexible grid layouts use relative units like percentages or fractions (fr) instead of fixed units like pixels
• This allows the layout to adapt to different screen sizes
• CSS Grid Layout is often used for creating flexible grid layouts, offering more control and flexibility compared to older methods

Flexible Images

• Flexible images scale proportionally to fit their containers
• Use the max-width CSS property to prevent images from exceeding their containers
  • Example: img {max-width: 100%; height: auto;}
  • max-width: 100% ensures the image will never be wider than its containing element
  • height: auto maintains the aspect ratio of the image

Media Queries

• Media queries allow applying different CSS rules based on the characteristics of the device or screen
• Syntax: @media screen and (condition) { /* CSS rules */ }
• Common media query conditions:
  • width: The width of the viewport
  • height: The height of the viewport
  • device-width: The width of the device screen
  • device-height: The height of the device screen
  • orientation: The orientation of the device (portrait or landscape)
• Example:

  /* Default styles for larger screens */
  .container {
    width: 960px;
    margin: 0 auto;
  }
  
  /* Media query for smaller screens (e.g., tablets) */
  @media screen and (max-width: 768px) {
    .container {
      width: 100%;
      padding: 0 20px;
    }
  }
  
  /* Media query for even smaller screens (e.g., mobile phones) */
  @media screen and (max-width: 480px) {
    .container {
      padding: 0 10px;
    }
  }
  

• Mobile-first approach: Start with styles for small screens and then use media queries to add styles for larger screens
• Breakpoints: Specific screen widths at which the layout changes
  • Common breakpoints: 480px (mobile), 768px (tablet), 992px (laptop), 1200px (desktop)