CSS can be added using inline CSS, internal CSS, and external CSS. Inline styles work on single elements, internal CSS stays inside the HTML file, and external CSS is stored in a separate .css file. Example: <p style="color:red">Hello</p>

Inline CSS styles one element directly. Internal CSS is written inside the <style> tag within the HTML file. External CSS is written in a separate file and linked to multiple webpages. Example: <link rel="stylesheet" href="style.css">

A class selector can be used on multiple elements, while an id selector should be unique for one element only. Classes use . and ids use # in CSS. Example: .box { color: blue; } #title { color: red; }

Specificity decides which CSS rule is applied when multiple rules target the same element. Inline CSS has the highest priority, followed by id selectors, classes, and element selectors. Example: #heading { color: red; }

relative moves an element from its normal position. absolute positions relative to its parent. fixed stays fixed on screen while scrolling. sticky behaves like relative until scrolling reaches a specific point. Example: .box { position: fixed; top: 0; }

Margin creates space outside an element's border, while padding creates space inside the border around the content. Both help improve layout spacing and readability. Example: div { margin: 20px; padding: 10px; }

The CSS box model describes how elements are structured using content, padding, border, and margin. Every HTML element follows this box structure for spacing and layout calculations. Example: div { border: 2px solid black; }

z-index controls which element appears on top when elements overlap. Higher z-index values appear above lower values. It only works on positioned elements. Example: .box { position: absolute; z-index: 10; }

display: none completely removes the element from the layout. visibility: hidden hides the element visually but still keeps its space reserved in the page layout. Example: div { visibility: hidden; }

Flexbox is a CSS layout system used to arrange items easily in rows or columns. It helps align, distribute, and center elements efficiently without complex positioning. Example: .container { display: flex; }

justify-content aligns items horizontally along the main axis, while align-items aligns items vertically along the cross axis inside a flex container. Example: .container { display: flex; justify-content: center; align-items: center; }

flex-wrap controls whether flex items stay on one line or move to the next line when space becomes limited. It helps create responsive layouts. Example: .container { display: flex; flex-wrap: wrap; }

align-items aligns individual flex items inside a row, while align-content controls spacing between multiple rows inside a flex container when wrapping occurs. Example: .container { align-content: space-between; }

Flexbox centers elements using justify-content and align-items. This method works for both horizontal and vertical alignment and is commonly used in modern layouts. Example: .container { display: flex; justify-content: center; align-items: center; }

CSS Grid is a two-dimensional layout system used for creating rows and columns together. It is useful for designing complete webpage layouts and responsive grids. Example: .container { display: grid; grid-template-columns: 1fr 1fr; }

Flexbox works mainly in one direction, either row or column. Grid works in two directions, handling both rows and columns together for complex layouts. Example: display: grid; display: flex;

grid-template-columns defines the number and width of columns inside a grid container. It helps structure layouts into equal or custom-sized columns. Example: .container { grid-template-columns: 200px 1fr; }

auto-fit expands grid items to fill available space, while auto-fill keeps empty column tracks even if no items exist. Both are used in responsive grids. Example: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Responsive grids are created using CSS Grid, flexible units, and media queries. minmax() and auto-fit help adjust columns automatically based on screen size. Example: .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

Responsive web design makes websites adapt properly to different screen sizes like mobiles, tablets, and desktops. It improves readability and user experience across devices. Example: img { max-width: 100%; }

Media queries apply different CSS styles based on screen size, resolution, or device type. They are important for building responsive websites. Example: @media (max-width: 600px) { body { background: lightgray; } }

em depends on parent font size, rem depends on root font size, % depends on parent dimensions, vh uses viewport height, and vw uses viewport width. Example: div { width: 50vw; }

Mobile-first design means designing webpages for smaller mobile screens first, then adding styles for tablets and desktops later using media queries. Example: body { font-size: 14px; }

The viewport meta tag controls webpage scaling and responsiveness on mobile devices. Without it, webpages may appear zoomed out or improperly sized. Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">