Inline styled text
``` #### The Cascade and Inheritance CSS applies styles based on three factors: 1. **Source Order**: Later rules override earlier ones 2. **Specificity**: More specific selectors win 3. **Importance**: `!important` overrides everything (use sparingly) ```css /* Cascade example - last rule wins */ p { color: blue; } p { color: red; } /* This wins */ /* Inheritance example */ body { font-family: Arial, sans-serif; /* Inherited by all text */ color: #333; /* Inherited */ border: 1px solid black; /* NOT inherited */ } /* Force inheritance */ .child { color: inherit; /* Explicitly inherit parent's color */ } ``` {% hint style="warning" %} When two rules target the same element with the same property, the last one in your code wins—this is why it's called "cascading." Understanding this helps you debug why certain styles aren't appearing as expected. {% endhint %} ### CSS Selectors #### Basic Selectors ```css /* Universal selector */ * { margin: 0; padding: 0; } /* Type/Element selector */ p { line-height: 1.6; } /* Class selector */ .highlight { background-color: yellow; } /* ID selector */ #header { position: fixed; } /* Attribute selectors */ input[type="text"] { border: 1px solid #ccc; } a[href^="https"] { color: green; } /* Starts with */ a[href$=".pdf"] { color: red; } /* Ends with */ a[href*="google"] { color: blue; } /* Contains */ ``` {% hint style="warning" %} Selectors are patterns that tell CSS which HTML elements to target—from very broad (the `*` universal selector hits everything) to very specific (IDs target a single unique element). Attribute selectors let you style elements based on their HTML attributes, like styling all links that go to PDFs differently. {% endhint %} #### Pseudo-Classes and Pseudo-Elements ```css /* Pseudo-classes (state) */ a:hover { color: red; } a:active { color: darkred; } a:visited { color: purple; } input:focus { outline: 2px solid blue; } li:first-child { font-weight: bold; } li:last-child { margin-bottom: 0; } li:nth-child(2n) { background: #f0f0f0; } /* Even items */ li:nth-child(odd) { background: white; } /* Odd items */ input:disabled { opacity: 0.5; } input:checked + label { color: green; } div:empty { display: none; } /* Pseudo-elements (create elements) */ p::before { content: "→ "; } p::after { content: " ←"; } p::first-line { font-weight: bold; } p::first-letter { font-size: 2em; } input::placeholder { color: #999; } ::selection { background: yellow; } ``` {% hint style="warning" %} Pseudo-classes target elements in specific states or positions, like `:hover` for when someone moves their mouse over something, or `:nth-child(2n)` for every even item in a list. These let you create interactive effects and pattern-based styling without adding extra classes to your HTML. Pseudo-elements let you style specific parts of elements (like `::first-line`) or even inject content (`::before` and `::after`) without adding extra HTML. They're powerful for decorative elements and typography effects that would otherwise require cluttering your markup. {% endhint %} #### Advanced Selectors ```css /* Descendant combinator (space) */ article p { margin-bottom: 1em; } /* Child combinator (>) */ ul > li { list-style: none; } /* Adjacent sibling (+) */ h1 + p { font-size: 1.2em; } /* First p after h1 */ /* General sibling (~) */ h1 ~ p { color: gray; } /* All p siblings after h1 */ /* Multiple selectors (,) */ h1, h2, h3 { font-family: 'Georgia', serif; } /* Combining selectors */ div.container > ul.menu li:hover a { color: blue; } /* :not() pseudo-class */ input:not([type="submit"]) { width: 100%; } /* :has() - Parent selector (modern browsers) */ div:has(> img) { padding: 20px; /* Divs containing images */ } ``` {% hint style="warning" %} Combinators describe relationships between elements—a space means "anywhere inside," `>` means "direct child only," `+` means "immediately after," and `~` means "any sibling after." {% endhint %} ### Specificity calculation Specificity determines which styles apply when multiple rules target the same element. #### Specificity Hierarchy (0-0-0-0) ```css /* Inline styles: 1-0-0-0 (1000 points) */ /* IDs: 0-1-0-0 (100 points) */ /* Classes/pseudo: 0-0-1-0 (10 points) */ /* Elements: 0-0-0-1 (1 point) */ /* Examples with calculated specificity: */ p /* 0-0-0-1 = 1 */ .class /* 0-0-1-0 = 10 */ #id /* 0-1-0-0 = 100 */ p.class /* 0-0-1-1 = 11 */ #id .class p /* 0-1-1-1 = 111 */ #id #anotherId /* 0-2-0-0 = 200 */ style="..." /* 1-0-0-0 = 1000 */ /* !important overrides everything (avoid!) */ p { color: red !important; } ``` {% hint style="warning" %} CSS uses a point system to determine which rule wins when multiple rules target the same element—inline styles beat everything, IDs are stronger than classes, classes are stronger than element selectors. This hierarchy prevents chaos when you have conflicting styles, though it can be frustrating until you understand it. {% endhint %}  ### The Box Model Every element is a rectangular box with content, padding, border, and margin:  #### Box Model properties ```css .box { /* Content dimensions */ width: 300px; height: 200px; /* Padding (inside border) */ padding: 20px; /* All sides */ padding: 10px 20px; /* Vertical | Horizontal */ padding: 10px 20px 30px; /* Top | Horizontal | Bottom */ padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */ /* Border */ border: 2px solid #333; border-radius: 8px; /* Margin (outside border) */ margin: 20px auto; /* Center horizontally */ /* Box sizing */ box-sizing: border-box; /* Include padding/border in width */ } /* Global box-sizing reset (recommended) */ *, *::before, *::after { box-sizing: border-box; } ``` {% hint style="warning" %} Every element has an onion-like structure: content in the center, padding around that, a border around the padding, and margin pushing other elements away on the outside. The shorthand syntax lets you set values for all four sides at once, using patterns like `padding: 10px 20px` (vertical, then horizontal). {% endhint %} #### Understanding box-sizing ```css /* Default (content-box) */ .content-box { box-sizing: content-box; width: 300px; padding: 20px; border: 10px solid; /* Total width = 300 + (20*2) + (10*2) = 360px */ } /* Border-box (recommended) */ .border-box { box-sizing: border-box; width: 300px; padding: 20px; border: 10px solid; /* Total width = 300px (padding/border included) */ } ``` {% hint style="warning" %} By default, when you set width to 300px and add 20px padding, your element actually becomes 340px wide—confusing! Setting `box-sizing: border-box` makes width include padding and border, so 300px stays 300px, making layouts much more predictable. {% endhint %} ### Display property Controls how elements behave in the document flow: ```css /* Common display values */ .element { display: block; /* Full width, new line */ display: inline; /* Inline with text */ display: inline-block; /* Inline but respects width/height */ display: none; /* Hidden, removed from flow */ display: flex; /* Flexbox container */ display: grid; /* Grid container */ display: inline-flex; /* Inline flexbox */ display: inline-grid; /* Inline grid */ } ``` {% hint style="warning" %} The display property fundamentally changes how an element behaves: `block` elements take up the full width and start new lines (like paragraphs), `inline` elements flow with text (like links), and `flex`/`grid` unlock powerful layout systems. Choosing the right display value is the foundation of any layout. {% endhint %} ### Modern layout systems #### Flexbox (one-dimensional layout) ```css /* Flex container */ .flex-container { display: flex; flex-direction: row; /* row | column | row-reverse | column-reverse */ justify-content: center; /* Main axis: flex-start | center | space-between | space-around | space-evenly */ align-items: center; /* Cross axis: stretch | center | flex-start | flex-end | baseline */ flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */ gap: 20px; /* Space between items */ } /* Flex items */ .flex-item { flex: 1; /* Grow to fill space */ flex-basis: 200px; /* Initial size */ flex-grow: 1; /* Growth factor */ flex-shrink: 0; /* Shrink factor */ align-self: flex-start; /* Override align-items */ order: 2; /* Display order */ } /* Common flexbox patterns */ /* Center everything */ .center { display: flex; justify-content: center; align-items: center; } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; } /* Card layout */ .card-container { display: flex; flex-wrap: wrap; gap: 20px; } ``` {% hint style="warning" %} **Flex container:** Flexbox is perfect for one-dimensional layouts (either a row or column) and gives you superpowers for alignment: `justify-content` controls spacing along your main direction, `align-items` controls the perpendicular direction, and `gap` adds consistent spacing between items without margin math. **Flex items:** Items inside a flex container can grow (`flex-grow: 1`) to fill available space, shrink when needed, or stay a specific size. The shorthand `flex: 1` tells an item "take up equal space with your siblings," which is incredibly useful for responsive layouts. **Common flexbox patterns:** These are real-world solutions you'll use constantly: centering anything with just two properties, creating navigation bars with space between items, and making responsive card grids that automatically wrap. Memorizing these patterns will speed up your development significantly. {% endhint %} #### CSS Grid (two-dimensional layout) ```css /* Grid container */ .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* Three columns */ grid-template-columns: repeat(3, 1fr); /* Three equal columns */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */ grid-template-rows: 100px auto 50px; /* Three rows */ gap: 20px; /* Row and column gap */ grid-template-areas: /* Named areas */ "header header header" "sidebar main main" "footer footer footer"; } /* Grid items */ .grid-item { grid-column: 1 / 3; /* Span columns 1-2 */ grid-row: 2 / 4; /* Span rows 2-3 */ grid-area: header; /* Use named area */ place-self: center; /* Center in cell */ } /* Responsive grid example */ .responsive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } ``` {% hint style="warning" %} **Grid container:** Grid is the most powerful CSS layout system, letting you define both rows and columns at once. The `fr` unit means "fraction of available space," so `1fr 2fr 1fr` creates three columns where the middle one is twice as wide as the others, and `repeat(auto-fit, minmax(200px, 1fr))` creates a responsive grid that automatically adjusts column count. **Grid items:** Grid items can span multiple cells using row/column numbers, or you can name areas in your grid template and assign items to them by name (much more readable). This level of control makes complex layouts straightforward instead of hack-y. **Responsive grid example:** The `auto-fill` pattern with `minmax` is magic: it automatically creates as many columns as will fit (minimum 250px each), and those columns grow to fill space. This gives you responsive layouts without writing media queries. {% endhint %} ### Positioning ```css /* Position values */ .element { position: static; /* Default - normal flow */ position: relative; /* Relative to normal position */ position: absolute; /* Relative to positioned parent */ position: fixed; /* Relative to viewport */ position: sticky; /* Hybrid relative/fixed */ } /* Positioning properties */ .positioned { position: absolute; top: 20px; right: 20px; bottom: auto; left: auto; z-index: 10; /* Stacking order */ } /* Common patterns */ /* Center absolutely positioned element */ .center-absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Sticky header */ .sticky-header { position: sticky; top: 0; z-index: 100; background: white; } /* Overlay */ .overlay { position: fixed; inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */ background: rgba(0, 0, 0, 0.5); } ``` {% hint style="warning" %} **Position values:** Positioning removes elements from normal document flow: `relative` lets you nudge an element from where it would normally be, `absolute` positions relative to the nearest positioned ancestor, `fixed` sticks to the viewport (like sticky headers), and `sticky` is a hybrid that acts relative until you scroll past it, then becomes fixed. **Common patterns:** These solve frequent design challenges: centering with `absolute` positioning uses a trick where you move the element's top-left corner to the center, then shift it back by half its size with `transform`. The `inset: 0` shorthand is cleaner than writing all four directions separately for overlays. {% endhint %} ### CSS custom properties (variables) ```css /* Define variables */ :root { /* Colors */ --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #333; --bg-color: #f8f9fa; /* Spacing */ --spacing-unit: 8px; --spacing-small: calc(var(--spacing-unit) * 2); --spacing-medium: calc(var(--spacing-unit) * 3); --spacing-large: calc(var(--spacing-unit) * 4); /* Typography */ --font-family: 'Inter', -apple-system, sans-serif; --font-size-base: 16px; --line-height: 1.5; } /* Use variables */ .button { background: var(--primary-color); padding: var(--spacing-small) var(--spacing-medium); font-family: var(--font-family); color: var(--text-color, black); /* Fallback value */ } /* Change variables dynamically */ .dark-theme { --text-color: #f0f0f0; --bg-color: #1a1a1a; } /* Scoped variables */ .card { --card-padding: 20px; padding: var(--card-padding); } ``` {% hint style="warning" %} **Define variables:** CSS variables (custom properties) let you store values like colors and spacing in one place, then reuse them throughout your stylesheet. They're defined with `--name` syntax and used with `var(--name)`, making it easy to maintain consistent design systems and create theme switching. **Use variables and dynamic changes:** Variables can reference other variables with `calc()`, creating mathematical relationships in your design. The real power is that variables can be scoped to elements or changed dynamically, so you can create dark themes just by redefining color variables at the root level. {% endhint %} ### Responsive Design #### Media Queries ```css /* Mobile-first approach (recommended) */ /* Base styles for mobile */ .container { width: 100%; padding: 15px; } /* Tablet and up */ @media (min-width: 768px) { .container { max-width: 750px; margin: 0 auto; } } /* Desktop and up */ @media (min-width: 1024px) { .container { max-width: 960px; } } /* Large desktop */ @media (min-width: 1200px) { .container { max-width: 1140px; } } /* Other media query features */ @media (orientation: landscape) { } @media (prefers-color-scheme: dark) { } @media (prefers-reduced-motion: reduce) { } @media print { } /* Container queries (modern browsers) */ .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } } ``` {% hint style="warning" %} **Mobile-first approach:** Modern responsive design starts with mobile styles as the base, then uses `min-width` media queries to progressively enhance for larger screens. This approach ensures your site works on small screens first (where most traffic comes from), then adds complexity for devices that can handle it. **Other media query features:** Media queries can respond to more than just screen width: orientation detects if the device is rotated, `prefers-color-scheme` respects system dark mode settings, and `prefers-reduced-motion` helps users who find animations uncomfortable. Container queries are newer and let elements respond to their container's size instead of the viewport. {% endhint %} #### Responsive Units ```css /* Relative units */ .text { font-size: 1rem; /* Relative to root font-size */ padding: 1em; /* Relative to current font-size */ width: 50%; /* Percentage of parent */ height: 100vh; /* Viewport height */ max-width: 90vw; /* Viewport width */ margin: 5vmin; /* Smaller of vw or vh */ font-size: clamp(1rem, 2.5vw, 2rem); /* Responsive clamping */ } /* Modern responsive typography */ :root { font-size: clamp(14px, 2vw, 18px); } h1 { font-size: clamp(1.5rem, 4vw, 3rem); } ``` {% hint style="warning" %} Viewport units (`vh`, `vw`) size things relative to the browser window, `rem` sizes relative to the root font size (making everything scalable), and `clamp()` sets a responsive value with minimum and maximum bounds. The `clamp()` function is particularly powerful for fluid typography that grows with screen size but never gets too small or too large. {% endhint %} ### Transforms and Transitions ```css /* Transforms */ .transform { transform: translate(50px, 100px); transform: translateX(-50%); transform: rotate(45deg); transform: scale(1.5); transform: skew(10deg, 20deg); transform: rotate(45deg) scale(1.2) translateX(100px); /* Multiple */ transform-origin: center; /* Transform anchor point */ } /* Transitions */ .transition { transition: all 0.3s ease; transition: opacity 0.3s, transform 0.3s; transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(); } /* Common transition pattern */ .button { background: blue; transform: translateY(0); transition: all 0.3s ease; } .button:hover { background: darkblue; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } ``` {% hint style="warning" %} **Transforms:** Transforms move, rotate, scale, or skew elements without affecting document flow, making them perfect for animations. You can chain multiple transforms together in one property, and `transform-origin` lets you control the pivot point (useful for rotating things around corners instead of centers). **Common transition pattern:** Transitions animate changes between states smoothly—instead of a button instantly changing color when hovered, it fades over 0.3s. This pattern of setting `transition` on the base state and different values on `:hover` is the foundation of interactive UI feedback that feels polished. {% endhint %} ### Animations ```css /* Define keyframes */ @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Apply animation */ .animated { animation: slideIn 0.5s ease forwards; animation-name: slideIn; animation-duration: 0.5s; animation-timing-function: ease; animation-delay: 0.2s; animation-iteration-count: 1; /* or infinite */ animation-direction: normal; /* or reverse, alternate */ animation-fill-mode: forwards; /* or backwards, both */ } /* Multiple animations */ .multi-animated { animation: slideIn 0.5s ease, fadeIn 0.3s ease 0.2s; } ``` {% hint style="warning" %} **Define keyframes and apply:** While transitions animate between two states, animations give you full control over multiple steps in the sequence using keyframes. You define what happens at different points (from/to or percentages), then apply the animation to elements with control over duration, timing, delays, and whether it repeats or plays in reverse. {% endhint %} ### Modern CSS features #### CSS Logical Properties ```css /* Physical properties (old way) */ .old { margin-left: 20px; padding-right: 10px; } /* Logical properties (internationalization-friendly) */ .modern { margin-inline-start: 20px; /* left in LTR, right in RTL */ padding-inline-end: 10px; /* right in LTR, left in RTL */ border-block-start: 1px solid; /* top */ border-block-end: 1px solid; /* bottom */ inline-size: 100%; /* width */ block-size: 50px; /* height */ } ``` {% hint style="warning" %} Logical properties use "start/end" instead of "left/right," making your CSS automatically work for languages that read right-to-left (like Arabic or Hebrew). This internationalization-friendly approach means you write code once that works globally, rather than maintaining separate stylesheets for different text directions. {% endhint %} #### Aspect ratio ```css /* Maintain aspect ratio */ .video-container { aspect-ratio: 16 / 9; width: 100%; background: black; } .square { aspect-ratio: 1; /* 1:1 ratio */ } ``` {% hint style="warning" %} The `aspect-ratio` property maintains proportional width-to-height relationships as elements resize, which used to require padding hacks. Now you can simply say "keep this video container at 16:9 no matter the screen size" with one line of code. {% endhint %} #### CSS functions ```css /* Calculations */ .calculated { width: calc(100% - 40px); height: calc(100vh - var(--header-height)); padding: calc(var(--spacing) * 2); } /* Min, Max, Clamp */ .responsive { width: min(90%, 1200px); height: max(300px, 50vh); font-size: clamp(14px, 2vw, 20px); } /* CSS Filters */ .filtered { filter: blur(5px); filter: brightness(1.2); filter: contrast(1.5); filter: grayscale(100%); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } ``` {% hint style="warning" %} CSS functions perform calculations and comparisons: `calc()` does math with mixed units, `min()`/`max()` pick the smaller/larger value, and `clamp()` sets a value with boundaries. These make your CSS truly responsive and adaptive without JavaScript. {% endhint %} ### CSS Architecture Patterns #### BEM (Block Element Modifier) ```css /* Block */ .card { } /* Element */ .card__header { } .card__body { } .card__footer { } /* Modifier */ .card--featured { } .card__header--large { } ``` {% hint style="warning" %} BEM (Block Element Modifier) is a naming convention that makes relationships clear: `.card` is the component, `.card__header` is a part of that component, and `.card--featured` is a variation. This prevents naming conflicts and makes it obvious which styles affect which elements in large projects. {% endhint %} #### Utility-First (similar to Tailwind) ```css /* Utility classes */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .p-4 { padding: 1rem; } .mt-2 { margin-top: 0.5rem; } .text-center { text-align: center; } .bg-primary { background: var(--primary-color); } ``` ### Examples of CSS patterns for modern web apps #### Loading Spinner ```css .spinner { width: 40px; height: 40px; border: 4px solid rgba(0,0,0,0.1); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } ``` {% hint style="info" %} This creates a spinning circle using a border trick where only the top is colored, combined with a continuous rotation animation. It's a simple, pure CSS solution for loading states that works everywhere without images or external dependencies. {% endhint %} #### Card Component ```css .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } ``` {% hint style="info" %} This demonstrates modern card styling with rounded corners, subtle shadows, and smooth hover effects that lift the card and intensify the shadow. This pattern creates depth and interactive feedback that makes interfaces feel polished and responsive. {% endhint %} #### Modal Overlay ```css .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; } ``` {% hint style="info" %} This pattern creates centered modal dialogs: a full-screen semi-transparent backdrop using `inset: 0` with flexbox to center the actual content, plus high `z-index` to appear above everything else. The `max-height` with `overflow-y` ensures modals work even if content is too tall for the screen. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://mihai-gheorghe.gitbook.io/tic/basic-css/descriere-limbaj.md?ask=