m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-07 03:16:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dev-notes/languages/css/css.html

6558 lines
No EOL
232 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Marcello Lamonaca">
<link rel="canonical" href="http://m-lamonaca.github.io/dev-notes/languages/css/css.html">
<link rel="prev" href="../markdown.html">
<link rel="next" href="../c/c.html">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.34">
<title>CSS - Dev Notes</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.35f28582.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<script src="https://unpkg.com/iframe-worker/shim"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="CSS - Dev Notes" >
<meta property="og:description" content="None" >
<meta property="og:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/css/css.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://m-lamonaca.github.io/dev-notes/languages/css/css.html" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="CSS - Dev Notes" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/css/css.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#css" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../index.html" title="Dev Notes" class="md-header__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Dev Notes
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
CSS
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../index.html" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../containers/docker.html" class="md-tabs__link">
Containers
</a>
</li>
<li class="md-tabs__item">
<a href="../../databases/redis.html" class="md-tabs__link">
Databases
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../html/html.html" class="md-tabs__link">
Languages
</a>
</li>
<li class="md-tabs__item">
<a href="../../misc/git.html" class="md-tabs__link">
Misc
</a>
</li>
<li class="md-tabs__item">
<a href="../../linux/filesystem/file-links.html" class="md-tabs__link">
Linux
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../index.html" title="Dev Notes" class="md-nav__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
Dev Notes
</label>
<div class="md-nav__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../index.html" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../containers/docker.html" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../containers/kubernetes.html" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Databases
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Databases
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../databases/redis.html" class="md-nav__link">
<span class="md-ellipsis">
Redis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/sql.html" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/mongo-db.html" class="md-nav__link">
<span class="md-ellipsis">
MongoDB
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Languages
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Languages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../html/html.html" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../markdown.html" class="md-nav__link">
<span class="md-ellipsis">
Markdown
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
CSS
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="css.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
CSS
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#applying-css-to-html" class="md-nav__link">
<span class="md-ellipsis">
Applying CSS to HTML
</span>
</a>
<nav class="md-nav" aria-label="Applying CSS to HTML">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#inline-css" class="md-nav__link">
<span class="md-ellipsis">
Inline CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#embedded-css" class="md-nav__link">
<span class="md-ellipsis">
Embedded CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#external-css" class="md-nav__link">
<span class="md-ellipsis">
External CSS
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#css-selectors" class="md-nav__link">
<span class="md-ellipsis">
CSS Selectors
</span>
</a>
<nav class="md-nav" aria-label="CSS Selectors">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#multiple-selectors" class="md-nav__link">
<span class="md-ellipsis">
Multiple Selectors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#nested-selectors" class="md-nav__link">
<span class="md-ellipsis">
Nested Selectors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#id-selector" class="md-nav__link">
<span class="md-ellipsis">
ID Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#class-selector" class="md-nav__link">
<span class="md-ellipsis">
Class Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#universal-selector" class="md-nav__link">
<span class="md-ellipsis">
Universal Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#descendant-selector-space" class="md-nav__link">
<span class="md-ellipsis">
Descendant selector (space)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#direct-child-selector" class="md-nav__link">
<span class="md-ellipsis">
Direct child selector (&gt;)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#general-sibling-selector" class="md-nav__link">
<span class="md-ellipsis">
General sibling selector (~)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adjacent-sibling-selector" class="md-nav__link">
<span class="md-ellipsis">
Adjacent sibling selector (+)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#namespace-separator" class="md-nav__link">
<span class="md-ellipsis">
Namespace Separator (|)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#column-selector" class="md-nav__link">
<span class="md-ellipsis">
Column Selector (||)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-present-selector-tagattr" class="md-nav__link">
<span class="md-ellipsis">
Attribute Present Selector (tag[attr])
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-equals-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Equals Selector (=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-contains-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Contains Selector (*=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-begins-with-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Begins With Selector (^=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-ends-with-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Ends With Selector ($=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-spaced-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Spaced Selector (~=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-hyphenated-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Hyphenated Selector (|=)
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Pseudo-Classes
</span>
</a>
<nav class="md-nav" aria-label="Pseudo-Classes">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#link-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Link Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-action-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
User Action Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-interface-state-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
User Interface State Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#structural-position-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Structural &amp; Position Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#empty-negation-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Empty &amp; Negation Pseudo-Classes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Pseudo-Elements
</span>
</a>
<nav class="md-nav" aria-label="Pseudo-Elements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#textual-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Textual Pseudo-Elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Content Pseudo-Elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fragment-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Fragment Pseudo-Elements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#css-cascading" class="md-nav__link">
<span class="md-ellipsis">
CSS Cascading
</span>
</a>
<nav class="md-nav" aria-label="CSS Cascading">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#cascading-override-with-important" class="md-nav__link">
<span class="md-ellipsis">
Cascading Override With !important
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#specificity" class="md-nav__link">
<span class="md-ellipsis">
Specificity
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#units" class="md-nav__link">
<span class="md-ellipsis">
Units
</span>
</a>
<nav class="md-nav" aria-label="Units">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#absolute-length-units" class="md-nav__link">
<span class="md-ellipsis">
Absolute Length units
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#relative-length-units" class="md-nav__link">
<span class="md-ellipsis">
Relative Length Units
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-element-properties" class="md-nav__link">
<span class="md-ellipsis">
Common Element Properties
</span>
</a>
<nav class="md-nav" aria-label="Common Element Properties">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color" class="md-nav__link">
<span class="md-ellipsis">
Color
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#background" class="md-nav__link">
<span class="md-ellipsis">
Background
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#font" class="md-nav__link">
<span class="md-ellipsis">
Font
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#text-decoration-aliment" class="md-nav__link">
<span class="md-ellipsis">
Text Decoration &amp; Aliment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#size" class="md-nav__link">
<span class="md-ellipsis">
Size
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hiding-elements" class="md-nav__link">
<span class="md-ellipsis">
Hiding Elements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#box-model" class="md-nav__link">
<span class="md-ellipsis">
Box Model
</span>
</a>
<nav class="md-nav" aria-label="Box Model">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#padding" class="md-nav__link">
<span class="md-ellipsis">
Padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#border" class="md-nav__link">
<span class="md-ellipsis">
Border
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#box-sizing" class="md-nav__link">
<span class="md-ellipsis">
Box Sizing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#margin" class="md-nav__link">
<span class="md-ellipsis">
Margin
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#element-positioning" class="md-nav__link">
<span class="md-ellipsis">
Element Positioning
</span>
</a>
<nav class="md-nav" aria-label="Element Positioning">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#static-positioning" class="md-nav__link">
<span class="md-ellipsis">
Static Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#relative-positioning" class="md-nav__link">
<span class="md-ellipsis">
Relative positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#absolute-positioning" class="md-nav__link">
<span class="md-ellipsis">
Absolute Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fixed-positioning" class="md-nav__link">
<span class="md-ellipsis">
Fixed Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sticky-positioning" class="md-nav__link">
<span class="md-ellipsis">
Sticky Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#z-index" class="md-nav__link">
<span class="md-ellipsis">
Z-Index
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#layouts" class="md-nav__link">
<span class="md-ellipsis">
Layouts
</span>
</a>
<nav class="md-nav" aria-label="Layouts">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#inline" class="md-nav__link">
<span class="md-ellipsis">
Inline
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#block" class="md-nav__link">
<span class="md-ellipsis">
Block
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#inline-block" class="md-nav__link">
<span class="md-ellipsis">
Inline Block
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#none" class="md-nav__link">
<span class="md-ellipsis">
None
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#flex" class="md-nav__link">
<span class="md-ellipsis">
Flex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#grid" class="md-nav__link">
<span class="md-ellipsis">
Grid
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#responsive-design" class="md-nav__link">
<span class="md-ellipsis">
Responsive Design
</span>
</a>
<nav class="md-nav" aria-label="Responsive Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#viewport-meta-tag" class="md-nav__link">
<span class="md-ellipsis">
Viewport Meta-Tag
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#media-queries" class="md-nav__link">
<span class="md-ellipsis">
Media Queries
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../c/c.html" class="md-nav__link">
<span class="md-ellipsis">
C
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../kotlin/kotlin.html" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../swift/swift.html" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="">
<span class="md-ellipsis">
Assembly
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
Assembly
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../assembly/intel.html" class="md-nav__link">
<span class="md-ellipsis">
Intel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../assembly/riscv.html" class="md-nav__link">
<span class="md-ellipsis">
RISC-V
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/python.html" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_2" >
<label class="md-nav__link" for="__nav_4_8_2" id="__nav_4_8_2_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_2">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/modules/argparse.html" class="md-nav__link">
<span class="md-ellipsis">
argparse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/collections.html" class="md-nav__link">
<span class="md-ellipsis">
collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/csv.html" class="md-nav__link">
<span class="md-ellipsis">
csv
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/ftplib.html" class="md-nav__link">
<span class="md-ellipsis">
ftplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/itertools.html" class="md-nav__link">
<span class="md-ellipsis">
itertools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/json.html" class="md-nav__link">
<span class="md-ellipsis">
json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/logging.html" class="md-nav__link">
<span class="md-ellipsis">
logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/shutil.html" class="md-nav__link">
<span class="md-ellipsis">
shutil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/smtplib.html" class="md-nav__link">
<span class="md-ellipsis">
smtplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/socket.html" class="md-nav__link">
<span class="md-ellipsis">
socket
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/sqlite.html" class="md-nav__link">
<span class="md-ellipsis">
sqlite
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/time-datetime.html" class="md-nav__link">
<span class="md-ellipsis">
time & datetime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/unittest.html" class="md-nav__link">
<span class="md-ellipsis">
unittest
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
Libraries
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
Libraries
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/libs/tkinter.html" class="md-nav__link">
<span class="md-ellipsis">
TKinter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/numpy.html" class="md-nav__link">
<span class="md-ellipsis">
Numpy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/pandas.html" class="md-nav__link">
<span class="md-ellipsis">
Pandas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/seaborn.html" class="md-nav__link">
<span class="md-ellipsis">
Seaborn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/requests.html" class="md-nav__link">
<span class="md-ellipsis">
Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/beautiful-soup.html" class="md-nav__link">
<span class="md-ellipsis">
Beatiful Soup
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" >
<label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="">
<span class="md-ellipsis">
.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_1" >
<label class="md-nav__link" for="__nav_4_9_1" id="__nav_4_9_1_label" tabindex="0">
<span class="md-ellipsis">
C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_1">
<span class="md-nav__icon md-icon"></span>
C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/csharp/csharp.html" class="md-nav__link">
<span class="md-ellipsis">
C#
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/linq.html" class="md-nav__link">
<span class="md-ellipsis">
Linq
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/collections.html" class="md-nav__link">
<span class="md-ellipsis">
Collections
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/reactive-extensions.html" class="md-nav__link">
<span class="md-ellipsis">
Reactive Extensions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/async-programming.html" class="md-nav__link">
<span class="md-ellipsis">
Async Programming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" >
<label class="md-nav__link" for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-ellipsis">
ASP.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
ASP.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/asp.net/minimal-api.html" class="md-nav__link">
<span class="md-ellipsis">
Minimal API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/filters.html" class="md-nav__link">
<span class="md-ellipsis">
FIlters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/middleware.html" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/razor-syntax.html" class="md-nav__link">
<span class="md-ellipsis">
Razor Syntax
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/blazor.html" class="md-nav__link">
<span class="md-ellipsis">
Blazor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/signalr.html" class="md-nav__link">
<span class="md-ellipsis">
SignalR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/web-forms.html" class="md-nav__link">
<span class="md-ellipsis">
Web Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Database
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/database/ado.net.html" class="md-nav__link">
<span class="md-ellipsis">
ADO.NET
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/database/entity-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Entity Framework
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<label class="md-nav__link" for="__nav_4_10" id="__nav_4_10_label" tabindex="">
<span class="md-ellipsis">
Java
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Java
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/java.html" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/java-collection-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Java Collection Framework
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/dao.html" class="md-nav__link">
<span class="md-ellipsis">
DAO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4" >
<label class="md-nav__link" for="__nav_4_10_4" id="__nav_4_10_4_label" tabindex="0">
<span class="md-ellipsis">
Web
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4">
<span class="md-nav__icon md-icon"></span>
Web
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/web/servlet.html" class="md-nav__link">
<span class="md-ellipsis">
Serverlet
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4_2" >
<label class="md-nav__link" for="__nav_4_10_4_2" id="__nav_4_10_4_2_label" tabindex="0">
<span class="md-ellipsis">
Spring
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_10_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4_2">
<span class="md-nav__icon md-icon"></span>
Spring
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/spring/pom.xml.html" class="md-nav__link">
<span class="md-ellipsis">
POM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/spring/spring-project.html" class="md-nav__link">
<span class="md-ellipsis">
Project Structure
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" >
<label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="">
<span class="md-ellipsis">
PHP
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11">
<span class="md-nav__icon md-icon"></span>
PHP
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/php.html" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/database.html" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/web.html" class="md-nav__link">
<span class="md-ellipsis">
Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/dependency-injection.html" class="md-nav__link">
<span class="md-ellipsis">
Dependency Injection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/composer.html" class="md-nav__link">
<span class="md-ellipsis">
Composer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/psr-7.html" class="md-nav__link">
<span class="md-ellipsis">
PSR 7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/plates-templating.html" class="md-nav__link">
<span class="md-ellipsis">
Plates
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11_9" >
<label class="md-nav__link" for="__nav_4_11_9" id="__nav_4_11_9_label" tabindex="0">
<span class="md-ellipsis">
Simple MVC
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_11_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11_9">
<span class="md-nav__icon md-icon"></span>
Simple MVC
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/simple-mvc/simple-mvc.html" class="md-nav__link">
<span class="md-ellipsis">
Simple MVC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/simple-mvc/rest-api.html" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_12" >
<label class="md-nav__link" for="__nav_4_12" id="__nav_4_12_label" tabindex="">
<span class="md-ellipsis">
Rust
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_12">
<span class="md-nav__icon md-icon"></span>
Rust
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../rust/rust.html" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/macros.html" class="md-nav__link">
<span class="md-ellipsis">
Macros
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/cargo.html" class="md-nav__link">
<span class="md-ellipsis">
Cargo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/concurrency.html" class="md-nav__link">
<span class="md-ellipsis">
Concurrency
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13" >
<label class="md-nav__link" for="__nav_4_13" id="__nav_4_13_label" tabindex="">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13">
<span class="md-nav__icon md-icon"></span>
Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../javascript/javascript.html" class="md-nav__link">
<span class="md-ellipsis">
Javascript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/dom.html" class="md-nav__link">
<span class="md-ellipsis">
DOM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/events-animation.html" class="md-nav__link">
<span class="md-ellipsis">
Events & Animation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/ajax.html" class="md-nav__link">
<span class="md-ellipsis">
AJAX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/jquery.html" class="md-nav__link">
<span class="md-ellipsis">
jQuery
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13_6" >
<label class="md-nav__link" for="__nav_4_13_6" id="__nav_4_13_6_label" tabindex="0">
<span class="md-ellipsis">
React
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_13_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13_6">
<span class="md-nav__icon md-icon"></span>
React
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../javascript/react/react.html" class="md-nav__link">
<span class="md-ellipsis">
React
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/react/react-router.html" class="md-nav__link">
<span class="md-ellipsis">
React Router
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/react/react-tests.html" class="md-nav__link">
<span class="md-ellipsis">
React Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/react/redux.html" class="md-nav__link">
<span class="md-ellipsis">
Redux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../javascript/react/redux-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Redux Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../javascript/svelte/svelte.html" class="md-nav__link">
<span class="md-ellipsis">
Svelte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_14" >
<label class="md-nav__link" for="__nav_4_14" id="__nav_4_14_label" tabindex="">
<span class="md-ellipsis">
PowerShell
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_14">
<span class="md-nav__icon md-icon"></span>
PowerShell
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../powershell/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../powershell/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_15" >
<label class="md-nav__link" for="__nav_4_15" id="__nav_4_15_label" tabindex="">
<span class="md-ellipsis">
Bash
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_15">
<span class="md-nav__icon md-icon"></span>
Bash
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../bash/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../bash/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Misc
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Misc
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../misc/git.html" class="md-nav__link">
<span class="md-ellipsis">
Git
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/graph-ql.html" class="md-nav__link">
<span class="md-ellipsis">
GraphQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/regular-expressions.html" class="md-nav__link">
<span class="md-ellipsis">
RegEx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/ssh.html" class="md-nav__link">
<span class="md-ellipsis">
SSH
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/web-components.html" class="md-nav__link">
<span class="md-ellipsis">
WebComponents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Linux
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Linux
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-ellipsis">
Filesystem
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Filesystem
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/filesystem/file-links.html" class="md-nav__link">
<span class="md-ellipsis">
File Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/procfs.html" class="md-nav__link">
<span class="md-ellipsis">
/proc
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/sysfs.html" class="md-nav__link">
<span class="md-ellipsis">
/sys
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
<span class="md-ellipsis">
System Init
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
System Init
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/init/systemd.html" class="md-nav__link">
<span class="md-ellipsis">
Systemd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/init/open-rc.html" class="md-nav__link">
<span class="md-ellipsis">
OpenRC
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#applying-css-to-html" class="md-nav__link">
<span class="md-ellipsis">
Applying CSS to HTML
</span>
</a>
<nav class="md-nav" aria-label="Applying CSS to HTML">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#inline-css" class="md-nav__link">
<span class="md-ellipsis">
Inline CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#embedded-css" class="md-nav__link">
<span class="md-ellipsis">
Embedded CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#external-css" class="md-nav__link">
<span class="md-ellipsis">
External CSS
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#css-selectors" class="md-nav__link">
<span class="md-ellipsis">
CSS Selectors
</span>
</a>
<nav class="md-nav" aria-label="CSS Selectors">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#multiple-selectors" class="md-nav__link">
<span class="md-ellipsis">
Multiple Selectors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#nested-selectors" class="md-nav__link">
<span class="md-ellipsis">
Nested Selectors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#id-selector" class="md-nav__link">
<span class="md-ellipsis">
ID Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#class-selector" class="md-nav__link">
<span class="md-ellipsis">
Class Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#universal-selector" class="md-nav__link">
<span class="md-ellipsis">
Universal Selector
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#descendant-selector-space" class="md-nav__link">
<span class="md-ellipsis">
Descendant selector (space)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#direct-child-selector" class="md-nav__link">
<span class="md-ellipsis">
Direct child selector (&gt;)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#general-sibling-selector" class="md-nav__link">
<span class="md-ellipsis">
General sibling selector (~)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adjacent-sibling-selector" class="md-nav__link">
<span class="md-ellipsis">
Adjacent sibling selector (+)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#namespace-separator" class="md-nav__link">
<span class="md-ellipsis">
Namespace Separator (|)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#column-selector" class="md-nav__link">
<span class="md-ellipsis">
Column Selector (||)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-present-selector-tagattr" class="md-nav__link">
<span class="md-ellipsis">
Attribute Present Selector (tag[attr])
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-equals-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Equals Selector (=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-contains-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Contains Selector (*=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-begins-with-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Begins With Selector (^=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-ends-with-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Ends With Selector ($=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-spaced-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Spaced Selector (~=)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#attribute-hyphenated-selector" class="md-nav__link">
<span class="md-ellipsis">
Attribute Hyphenated Selector (|=)
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Pseudo-Classes
</span>
</a>
<nav class="md-nav" aria-label="Pseudo-Classes">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#link-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Link Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-action-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
User Action Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-interface-state-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
User Interface State Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#structural-position-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Structural &amp; Position Pseudo-Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#empty-negation-pseudo-classes" class="md-nav__link">
<span class="md-ellipsis">
Empty &amp; Negation Pseudo-Classes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Pseudo-Elements
</span>
</a>
<nav class="md-nav" aria-label="Pseudo-Elements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#textual-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Textual Pseudo-Elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Content Pseudo-Elements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fragment-pseudo-elements" class="md-nav__link">
<span class="md-ellipsis">
Fragment Pseudo-Elements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#css-cascading" class="md-nav__link">
<span class="md-ellipsis">
CSS Cascading
</span>
</a>
<nav class="md-nav" aria-label="CSS Cascading">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#cascading-override-with-important" class="md-nav__link">
<span class="md-ellipsis">
Cascading Override With !important
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#specificity" class="md-nav__link">
<span class="md-ellipsis">
Specificity
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#units" class="md-nav__link">
<span class="md-ellipsis">
Units
</span>
</a>
<nav class="md-nav" aria-label="Units">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#absolute-length-units" class="md-nav__link">
<span class="md-ellipsis">
Absolute Length units
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#relative-length-units" class="md-nav__link">
<span class="md-ellipsis">
Relative Length Units
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#common-element-properties" class="md-nav__link">
<span class="md-ellipsis">
Common Element Properties
</span>
</a>
<nav class="md-nav" aria-label="Common Element Properties">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color" class="md-nav__link">
<span class="md-ellipsis">
Color
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#background" class="md-nav__link">
<span class="md-ellipsis">
Background
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#font" class="md-nav__link">
<span class="md-ellipsis">
Font
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#text-decoration-aliment" class="md-nav__link">
<span class="md-ellipsis">
Text Decoration &amp; Aliment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#size" class="md-nav__link">
<span class="md-ellipsis">
Size
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#hiding-elements" class="md-nav__link">
<span class="md-ellipsis">
Hiding Elements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#box-model" class="md-nav__link">
<span class="md-ellipsis">
Box Model
</span>
</a>
<nav class="md-nav" aria-label="Box Model">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#padding" class="md-nav__link">
<span class="md-ellipsis">
Padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#border" class="md-nav__link">
<span class="md-ellipsis">
Border
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#box-sizing" class="md-nav__link">
<span class="md-ellipsis">
Box Sizing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#margin" class="md-nav__link">
<span class="md-ellipsis">
Margin
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#element-positioning" class="md-nav__link">
<span class="md-ellipsis">
Element Positioning
</span>
</a>
<nav class="md-nav" aria-label="Element Positioning">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#static-positioning" class="md-nav__link">
<span class="md-ellipsis">
Static Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#relative-positioning" class="md-nav__link">
<span class="md-ellipsis">
Relative positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#absolute-positioning" class="md-nav__link">
<span class="md-ellipsis">
Absolute Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fixed-positioning" class="md-nav__link">
<span class="md-ellipsis">
Fixed Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sticky-positioning" class="md-nav__link">
<span class="md-ellipsis">
Sticky Positioning
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#z-index" class="md-nav__link">
<span class="md-ellipsis">
Z-Index
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#layouts" class="md-nav__link">
<span class="md-ellipsis">
Layouts
</span>
</a>
<nav class="md-nav" aria-label="Layouts">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#inline" class="md-nav__link">
<span class="md-ellipsis">
Inline
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#block" class="md-nav__link">
<span class="md-ellipsis">
Block
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#inline-block" class="md-nav__link">
<span class="md-ellipsis">
Inline Block
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#none" class="md-nav__link">
<span class="md-ellipsis">
None
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#flex" class="md-nav__link">
<span class="md-ellipsis">
Flex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#grid" class="md-nav__link">
<span class="md-ellipsis">
Grid
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#responsive-design" class="md-nav__link">
<span class="md-ellipsis">
Responsive Design
</span>
</a>
<nav class="md-nav" aria-label="Responsive Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#viewport-meta-tag" class="md-nav__link">
<span class="md-ellipsis">
Viewport Meta-Tag
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#media-queries" class="md-nav__link">
<span class="md-ellipsis">
Media Queries
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="css">CSS</h1>
<h2 id="applying-css-to-html">Applying CSS to HTML</h2>
<h3 id="inline-css">Inline CSS</h3>
<p>The style only applies to one element at a time.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="p">&lt;</span><span class="nt">tag</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;property:value&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">tag</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="embedded-css">Embedded CSS</h3>
<p>The style is not shared but only applies to one HTML file.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span>
<span class="normal"><a href="#__codelineno-1-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="external-css">External CSS</h3>
<ul>
<li>Shared resource, can be referenced from multiple pages. </li>
<li>Can be cached, reduced HTML file size &amp; bandwidth. </li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;style.css&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h2 id="css-selectors"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a></h2>
<p>A CSS selector points to an html element to style.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span>
<span class="normal"><a href="#__codelineno-3-2">2</a></span>
<span class="normal"><a href="#__codelineno-3-3">3</a></span>
<span class="normal"><a href="#__codelineno-3-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="multiple-selectors">Multiple Selectors</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="nt">selector1</span><span class="o">,</span><span class="w"> </span><span class="nt">selector2</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="nested-selectors">Nested Selectors</h3>
<p>Used to select tags nested in other tags.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="nt">outerSelector</span><span class="w"> </span><span class="nt">innerSelector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="id-selector">ID Selector</h3>
<p>Can only apply to one element in a page.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="p">#</span><span class="nn">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* selects &lt;tag id=&quot;selector&quot;&gt; */</span>
</code></pre></div></td></tr></table></div>
<h3 id="class-selector">Class Selector</h3>
<p>Many elements can have the same class, classes are used to group HTML elements together.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="p">.</span><span class="nc">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* selects &lt;tag class=&quot;selector&quot;&gt; */</span>
</code></pre></div></td></tr></table></div>
<h3 id="universal-selector">Universal Selector</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="o">*</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* selects every HTML element */</span>
</code></pre></div></td></tr></table></div>
<h3 id="descendant-selector-space">Descendant selector (space)</h3>
<p>Selects an element that resides anywhere within an identified ancestor element.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="nt">article</span><span class="w"> </span><span class="nt">h2</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-10-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-10-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-10-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-10-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-10-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-10-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-10-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-10-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-10-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a><span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>title<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>
<a id="__codelineno-10-4" name="__codelineno-10-4"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-10-5" name="__codelineno-10-5"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>subtitle<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-10-6" name="__codelineno-10-6"></a> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-10-7" name="__codelineno-10-7"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-10-8" name="__codelineno-10-8"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>subtitle<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-10-9" name="__codelineno-10-9"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-10-10" name="__codelineno-10-10"></a><span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="direct-child-selector">Direct child selector (<code>&gt;</code>)</h3>
<p>Selects an elements that resides immediately inside an identified parent element.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="nt">article</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-12-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-12-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-12-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-12-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-12-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-12-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-12-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-12-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-12-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-12-2" name="__codelineno-12-2"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-12-3" name="__codelineno-12-3"></a><span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>
<a id="__codelineno-12-4" name="__codelineno-12-4"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-12-5" name="__codelineno-12-5"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This paragraph will be selected<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-12-6" name="__codelineno-12-6"></a> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-12-7" name="__codelineno-12-7"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-12-8" name="__codelineno-12-8"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-12-9" name="__codelineno-12-9"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-12-10" name="__codelineno-12-10"></a><span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="general-sibling-selector">General sibling selector (<code>~</code>)</h3>
<p>Selects an element that follows anywhere after the prior element.<br />
Both elements share the same parent.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a><span class="nt">h2</span><span class="w"> </span><span class="o">~</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-14-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-14-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-14-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-14-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-14-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-14-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-14-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-14-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-14-10">10</a></span>
<span class="normal"><a href="#__codelineno-14-11">11</a></span>
<span class="normal"><a href="#__codelineno-14-12">12</a></span>
<span class="normal"><a href="#__codelineno-14-13">13</a></span>
<span class="normal"><a href="#__codelineno-14-14">14</a></span>
<span class="normal"><a href="#__codelineno-14-15">15</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span>
<a id="__codelineno-14-2" name="__codelineno-14-2"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-14-3" name="__codelineno-14-3"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-14-4" name="__codelineno-14-4"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>title<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-14-5" name="__codelineno-14-5"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-14-6" name="__codelineno-14-6"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This paragraph will be selected<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-14-7" name="__codelineno-14-7"></a> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-14-8" name="__codelineno-14-8"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-14-9" name="__codelineno-14-9"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-14-10" name="__codelineno-14-10"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-14-11" name="__codelineno-14-11"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-14-12" name="__codelineno-14-12"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This paragraph will be selected<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-14-13" name="__codelineno-14-13"></a><span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<a id="__codelineno-14-14" name="__codelineno-14-14"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-14-15" name="__codelineno-14-15"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="adjacent-sibling-selector">Adjacent sibling selector (<code>+</code>)</h3>
<p>Selects an element that follows directly after the prior element.<br />
Both elements share the same parent.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a><span class="nt">h2</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-16-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-16-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-16-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-16-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-16-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-16-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-16-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-16-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-16-10">10</a></span>
<span class="normal"><a href="#__codelineno-16-11">11</a></span>
<span class="normal"><a href="#__codelineno-16-12">12</a></span>
<span class="normal"><a href="#__codelineno-16-13">13</a></span>
<span class="normal"><a href="#__codelineno-16-14">14</a></span>
<span class="normal"><a href="#__codelineno-16-15">15</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a><span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span>
<a id="__codelineno-16-2" name="__codelineno-16-2"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-4" name="__codelineno-16-4"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>title<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-16-5" name="__codelineno-16-5"></a> <span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-16-6" name="__codelineno-16-6"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This paragraph will be selected<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-7" name="__codelineno-16-7"></a> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-16-8" name="__codelineno-16-8"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-16-9" name="__codelineno-16-9"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-10" name="__codelineno-16-10"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-16-11" name="__codelineno-16-11"></a> <span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-16-12" name="__codelineno-16-12"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-13" name="__codelineno-16-13"></a><span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
<a id="__codelineno-16-14" name="__codelineno-16-14"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-16-15" name="__codelineno-16-15"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="namespace-separator">Namespace Separator (<code>|</code>)</h3>
<p>The <strong>namespace</strong> separator separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-17-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-17-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-17-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-17-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-17-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-17-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-17-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-17-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-17-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a><span class="p">@</span><span class="k">namespace</span><span class="w"> </span><span class="o">&lt;</span><span class="nt">namespace</span><span class="o">&gt;</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="s2">&quot;&lt;XML-namespace-URL&gt;&quot;</span><span class="o">)</span><span class="p">;</span>
<a id="__codelineno-17-2" name="__codelineno-17-2"></a>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a><span class="c">/* specific namespace */</span>
<a id="__codelineno-17-4" name="__codelineno-17-4"></a><span class="nt">namespace</span><span class="o">|</span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a>
<a id="__codelineno-17-6" name="__codelineno-17-6"></a><span class="c">/* any namespace */</span>
<a id="__codelineno-17-7" name="__codelineno-17-7"></a><span class="o">*|</span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-8" name="__codelineno-17-8"></a>
<a id="__codelineno-17-9" name="__codelineno-17-9"></a><span class="c">/* no namespace */</span>
<a id="__codelineno-17-10" name="__codelineno-17-10"></a><span class="o">|</span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-18-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-18-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-18-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-18-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-18-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-18-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-18-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-18-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-18-10">10</a></span>
<span class="normal"><a href="#__codelineno-18-11">11</a></span>
<span class="normal"><a href="#__codelineno-18-12">12</a></span>
<span class="normal"><a href="#__codelineno-18-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a><span class="p">@</span><span class="k">namespace</span><span class="w"> </span><span class="nt">svg</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="s1">&#39;http://www.w3.org/2000/svg&#39;</span><span class="o">)</span><span class="p">;</span>
<a id="__codelineno-18-2" name="__codelineno-18-2"></a>
<a id="__codelineno-18-3" name="__codelineno-18-3"></a><span class="nt">a</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-18-4" name="__codelineno-18-4"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">orangered</span><span class="p">;</span>
<a id="__codelineno-18-5" name="__codelineno-18-5"></a><span class="w"> </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">underline</span><span class="w"> </span><span class="kc">dashed</span><span class="p">;</span>
<a id="__codelineno-18-6" name="__codelineno-18-6"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span>
<a id="__codelineno-18-7" name="__codelineno-18-7"></a><span class="p">}</span>
<a id="__codelineno-18-8" name="__codelineno-18-8"></a>
<a id="__codelineno-18-9" name="__codelineno-18-9"></a><span class="nt">svg</span><span class="o">|</span><span class="nt">a</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-18-10" name="__codelineno-18-10"></a><span class="w"> </span><span class="k">fill</span><span class="p">:</span><span class="w"> </span><span class="kc">blueviolet</span><span class="p">;</span>
<a id="__codelineno-18-11" name="__codelineno-18-11"></a><span class="w"> </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">underline</span><span class="w"> </span><span class="kc">solid</span><span class="p">;</span>
<a id="__codelineno-18-12" name="__codelineno-18-12"></a><span class="w"> </span><span class="k">text-transform</span><span class="p">:</span><span class="w"> </span><span class="kc">uppercase</span><span class="p">;</span>
<a id="__codelineno-18-13" name="__codelineno-18-13"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-19-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-19-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-19-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-19-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-19-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-19-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-19-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-19-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-19-10">10</a></span>
<span class="normal"><a href="#__codelineno-19-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This paragraph
<a id="__codelineno-19-2" name="__codelineno-19-2"></a> <span class="cm">&lt;!-- will be colored orangered --&gt;</span>
<a id="__codelineno-19-3" name="__codelineno-19-3"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>has a link<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.
<a id="__codelineno-19-4" name="__codelineno-19-4"></a><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-19-5" name="__codelineno-19-5"></a>
<a id="__codelineno-19-6" name="__codelineno-19-6"></a><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">&quot;0 0 400 20&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-19-7" name="__codelineno-19-7"></a> <span class="cm">&lt;!-- will be colored blueviolet --&gt;</span>
<a id="__codelineno-19-8" name="__codelineno-19-8"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-19-9" name="__codelineno-19-9"></a> <span class="p">&lt;</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">y</span><span class="o">=</span><span class="s">&quot;15&quot;</span><span class="p">&gt;</span>Link created in SVG<span class="p">&lt;/</span><span class="nt">text</span><span class="p">&gt;</span>
<a id="__codelineno-19-10" name="__codelineno-19-10"></a> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-19-11" name="__codelineno-19-11"></a><span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="column-selector">Column Selector (<code>||</code>)</h3>
<p>The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-20-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1"></a><span class="nt">column-selector</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nt">cell-selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-present-selector-tagattr">Attribute Present Selector (<code>tag[attr]</code>)</h3>
<p><code>a[target]{ property: value; }</code> will match</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-21-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>click here<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-equals-selector">Attribute Equals Selector (<code>=</code>)</h3>
<p><code>a[href="https://google.com"] { property: value; }</code> will match</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-22-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://google.com/&quot;</span><span class="p">&gt;</span>search on google<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-contains-selector">Attribute Contains Selector (<code>*=</code>)</h3>
<p><code>a[href*="login"] { property: value; }</code> will match</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-23-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/login.php&quot;</span><span class="p">&gt;</span>login page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-begins-with-selector">Attribute Begins With Selector (<code>^=</code>)</h3>
<p><code>a[href^="Https://"] { property: value; }</code> will match</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-24-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://www.bbc.com/&quot;</span><span class="p">&gt;</span>The BBC<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-ends-with-selector">Attribute Ends With Selector (<code>$=</code>)</h3>
<p><code>a[href$=".pdf"] { property: value; }</code></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-25-1">1</a></span>
<span class="normal"><a href="#__codelineno-25-2">2</a></span>
<span class="normal"><a href="#__codelineno-25-3">3</a></span>
<span class="normal"><a href="#__codelineno-25-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-25-1" name="__codelineno-25-1"></a><span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-25-2" name="__codelineno-25-2"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/docs/menu.pdf&quot;</span><span class="p">&gt;</span>download menu<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-25-3" name="__codelineno-25-3"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-25-4" name="__codelineno-25-4"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/audio/song.mp3&quot;</span><span class="p">&gt;</span>download song<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-spaced-selector">Attribute Spaced Selector (<code>~=</code>)</h3>
<p><code>img[alt~="child"] { property: value; }</code></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-26-1">1</a></span>
<span class="normal"><a href="#__codelineno-26-2">2</a></span>
<span class="normal"><a href="#__codelineno-26-3">3</a></span>
<span class="normal"><a href="#__codelineno-26-4">4</a></span>
<span class="normal"><a href="#__codelineno-26-5">5</a></span>
<span class="normal"><a href="#__codelineno-26-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-26-1" name="__codelineno-26-1"></a><span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-26-2" name="__codelineno-26-2"></a><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;child.jpg&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#39;a small child&#39;</span><span class="p">&gt;</span>
<a id="__codelineno-26-3" name="__codelineno-26-3"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-26-4" name="__codelineno-26-4"></a><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;child.jpg&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#39;a-small-child&#39;</span><span class="p">&gt;</span>
<a id="__codelineno-26-5" name="__codelineno-26-5"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-26-6" name="__codelineno-26-6"></a><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;child.jpg&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#39;asmallchild&#39;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="attribute-hyphenated-selector">Attribute Hyphenated Selector (<code>|=</code>)</h3>
<p><code>p[lang|="en"] { property: value; }</code></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-27-1">1</a></span>
<span class="normal"><a href="#__codelineno-27-2">2</a></span>
<span class="normal"><a href="#__codelineno-27-3">3</a></span>
<span class="normal"><a href="#__codelineno-27-4">4</a></span>
<span class="normal"><a href="#__codelineno-27-5">5</a></span>
<span class="normal"><a href="#__codelineno-27-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-27-1" name="__codelineno-27-1"></a><span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-27-2" name="__codelineno-27-2"></a><span class="p">&lt;</span><span class="nt">p</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>English<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-27-3" name="__codelineno-27-3"></a><span class="cm">&lt;!-- WILL match --&gt;</span>
<a id="__codelineno-27-4" name="__codelineno-27-4"></a><span class="p">&lt;</span><span class="nt">p</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en-US&quot;</span><span class="p">&gt;</span>American english<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-27-5" name="__codelineno-27-5"></a><span class="cm">&lt;!-- Will NOT match --&gt;</span>
<a id="__codelineno-27-6" name="__codelineno-27-6"></a><span class="p">&lt;</span><span class="nt">p</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;fr&quot;</span><span class="p">&gt;</span>Français<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h2 id="pseudo-classes"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-Classes</a></h2>
<p>Pseudo-classes can style elements based on their current state. They must be specified after the base case.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-28-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-28-1" name="__codelineno-28-1"></a><span class="nt">selector</span><span class="p">:</span><span class="nd">pseudo-class</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="link-pseudo-classes">Link Pseudo-Classes</h3>
<p><code>a:link {...}</code> selects only <code>&lt;a&gt;</code> tags that have <code>href</code> attribute, same as <code>a[href]</code>.<br />
<code>a:visited {...}</code> selects links that have already been visited by the current browser.</p>
<h3 id="user-action-pseudo-classes">User Action Pseudo-Classes</h3>
<p><code>a:hover {...}</code> selects a link when the mouse rolls over it (hover state).<br />
<code>a:active {...}</code> selects the link while it's being activated (clicked or otherwise).<br />
<code>selector:focus {...}</code> selects an element when the user focuses on it (e.g. tab w/ keyboard). Often used on links, inputs, text-areas.</p>
<h3 id="user-interface-state-pseudo-classes">User Interface State Pseudo-Classes</h3>
<p><code>input:enabled {...}</code> selects an input that is in the default state of enabled and available for use.<br />
<code>input:disabled {...}</code> selects an input that has the attribute.<br />
<code>input:checked {...}</code> selects checkboxes or radio buttons that are checked.<br />
<code>input:indeterminate {...}</code> selects checkboxes or radio button that has neither selected nor unselected.</p>
<h3 id="structural-position-pseudo-classes">Structural &amp; Position Pseudo-Classes</h3>
<p><code>selector:first-child {...}</code> selects an element if it's the first child within its parent.<br />
<code>selector:last-child {...}</code> selects an element if it's the last element within its parent.<br />
<code>selector:only-child {...}</code> will select an element if it is the only element within a parent. </p>
<p><code>selector:first-of-type {...}</code> selects the first element of its type within a parent.<br />
<code>selector:last-of-type {...}</code> selects the last element of its type within a parent.<br />
<code>selector:only-of-type {...}</code> selects an element if it is the only of its type within a parent.</p>
<p><code>selector:nth-child() {...}</code> selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1").
Can select even/odd elements, "every third", "the first five", etc.<br />
<code>selector:nth-of-type() {...}</code> works like <code>:nth-child</code> in places where the elements at the same level are of different types.<br />
<code>selector:nth-last-of-type() {...}</code> like <code>:nth-of-type</code> but counts up from the bottom instead of the top.<br />
<code>selector:nth-last-child() {...}</code> like <code>:nth-child</code> but counts up from the bottom instead of the top.</p>
<h3 id="empty-negation-pseudo-classes">Empty &amp; Negation Pseudo-Classes</h3>
<p><code>selector:empty {...}</code> selects elements with no content (empty tags).<br />
<code>selector:not() {...}</code> selects elements that do not have a certain tag, attribute, class, ID, etc.</p>
<h2 id="pseudo-elements"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-Elements</a></h2>
<p>Dynamic elements that don't exist in the document tree.
When used within selectors allow unique parts of the page to be stylized. Only one pseudo-element may be used within a selector at a given time.</p>
<h3 id="textual-pseudo-elements">Textual Pseudo-Elements</h3>
<p><code>selector::first-letter {...}</code> selects the first letter of the text within an element.<br />
<code>selector::first-line {...}</code> selects the first line of text within an element.</p>
<h3 id="content-pseudo-elements">Content Pseudo-Elements</h3>
<p><code>selector::before {...}</code> creates a pseudo-element before, or in front of, the selected element.<br />
<code>selector::after {...}</code> creates a pseudo-element after, or behind, the selected element.<br />
<strong>These pseudo-elements appear nested within the selected element, not outside of it.</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-29-1">1</a></span>
<span class="normal"><a href="#__codelineno-29-2">2</a></span>
<span class="normal"><a href="#__codelineno-29-3">3</a></span>
<span class="normal"><a href="#__codelineno-29-4">4</a></span>
<span class="normal"><a href="#__codelineno-29-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-29-1" name="__codelineno-29-1"></a><span class="nt">selector</span><span class="o">::&lt;</span><span class="nt">after</span><span class="o">|</span><span class="nt">before</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-29-2" name="__codelineno-29-2"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-29-3" name="__codelineno-29-3"></a><span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot; (&quot;</span><span class="w"> </span><span class="nb">attr</span><span class="p">(</span><span class="n">attribute_name</span><span class="p">)</span><span class="w"> </span><span class="s2">&quot;)&quot;</span><span class="p">;</span>
<a id="__codelineno-29-4" name="__codelineno-29-4"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-29-5" name="__codelineno-29-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="fragment-pseudo-elements">Fragment Pseudo-Elements</h3>
<p><code>selector::selection {...}</code> identifies part of the document that has been selected, or highlighted, by a user's actions. </p>
<h2 id="css-cascading">CSS Cascading</h2>
<p>The browser assigns different priorities to CSS depending on the type of selector.</p>
<ol>
<li>Inline CSS (Most Important)</li>
<li>ID selector</li>
<li>Class selector</li>
<li>Element selector (Least Important)</li>
</ol>
<p>The browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.<br />
Rules lower in the file overwrite higher rules in the file.</p>
<h3 id="cascading-override-with-important">Cascading Override With <code>!important</code></h3>
<p>The <code>!important</code> declaration overrides any other declaration.<br />
Using it is very bad practice because it makes debugging more difficult by breaking the natural cascading in stylesheets.</p>
<p>Only use <code>!important</code> when:</p>
<ul>
<li>overriding foreign CSS (e.g. from a library)</li>
<li>overriding inline CSS</li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-30-1">1</a></span>
<span class="normal"><a href="#__codelineno-30-2">2</a></span>
<span class="normal"><a href="#__codelineno-30-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-30-1" name="__codelineno-30-1"></a><span class="nt">selector</span><span class="o">[</span><span class="nt">style</span><span class="o">*=</span><span class="s2">&quot;property:value&quot;</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-2" name="__codelineno-30-2"></a><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="w"> </span><span class="cp">!important</span><span class="p">;</span>
<a id="__codelineno-30-3" name="__codelineno-30-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="specificity">Specificity</h3>
<p>A weight is applied to a CSS declaration, determined by the number of each selector type:</p>
<ul>
<li><code>1-0-0</code>: ID selector </li>
<li><code>0-1-0</code>: Class selector, Attribute selector, Pseudo-class </li>
<li><code>0-0-1</code>: Element Selector, Pseudo-element </li>
<li><code>0-0-0</code>: Universal selector (<code>*</code>), combinators (<code>+</code>, <code>&gt;</code>, <code>~</code>, <code>||</code>) and negation pseudo-class <code>:not()</code> </li>
</ul>
<blockquote>
<p><strong>Note</strong>: The selectors declared inside <code>:not()</code> contribute to the weight.</p>
</blockquote>
<h2 id="units"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Units</a></h2>
<h3 id="absolute-length-units">Absolute Length units</h3>
<table>
<thead>
<tr>
<th>Unit</th>
<th>Name</th>
<th>Equivalent to</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cm</code></td>
<td>centimeters</td>
<td>1cm = 38px = 25/64in</td>
</tr>
<tr>
<td><code>mm</code></td>
<td>Millimeters</td>
<td>1mm = 1/10<sup>th</sup> of 1cm</td>
</tr>
<tr>
<td><code>Q</code></td>
<td>Quarter-millimeters</td>
<td>1Q = 1/40<sup>th</sup> of 1cm</td>
</tr>
<tr>
<td><code>in</code></td>
<td>Inches</td>
<td>1in = 2.54cm = 96px</td>
</tr>
<tr>
<td><code>pc</code></td>
<td>Picas</td>
<td>1pc = &#8537;th of 1in</td>
</tr>
<tr>
<td><code>pt</code></td>
<td>Points</td>
<td>1pt = 1/72th of 1in</td>
</tr>
<tr>
<td><code>px</code></td>
<td>Pixels</td>
<td>1px = 1/96<sup>th</sup> of 1in</td>
</tr>
</tbody>
</table>
<h3 id="relative-length-units">Relative Length Units</h3>
<table>
<thead>
<tr>
<th>Unit</th>
<th>Relative to</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>rem</code></td>
<td>Font size of the root element.</td>
</tr>
<tr>
<td><code>em</code></td>
<td>Font size of the parent or the element itself</td>
</tr>
<tr>
<td><code>ex</code></td>
<td>x-height of the element's font.</td>
</tr>
<tr>
<td><code>ch</code></td>
<td>The advance measure (width) of the glyph "0" of the element's font.</td>
</tr>
<tr>
<td><code>lh</code></td>
<td>Line height of the element.</td>
</tr>
<tr>
<td><code>vw</code></td>
<td>1% of the viewport's width.</td>
</tr>
<tr>
<td><code>vh</code></td>
<td>1% of the viewport's height.</td>
</tr>
<tr>
<td><code>vmin</code></td>
<td>1% of the viewport's smaller dimension.</td>
</tr>
<tr>
<td><code>vmax</code></td>
<td>1% of the viewport's larger dimension.</td>
</tr>
<tr>
<td><code>%</code></td>
<td>Relative to the parent element</td>
</tr>
</tbody>
</table>
<h2 id="common-element-properties">Common Element Properties</h2>
<h3 id="color">Color</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-31-1">1</a></span>
<span class="normal"><a href="#__codelineno-31-2">2</a></span>
<span class="normal"><a href="#__codelineno-31-3">3</a></span>
<span class="normal"><a href="#__codelineno-31-4">4</a></span>
<span class="normal"><a href="#__codelineno-31-5">5</a></span>
<span class="normal"><a href="#__codelineno-31-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-31-1" name="__codelineno-31-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-31-2" name="__codelineno-31-2"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">color</span><span class="o">-</span><span class="n">name</span><span class="p">;</span>
<a id="__codelineno-31-3" name="__codelineno-31-3"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="err">#</span><span class="o">&lt;</span><span class="n">hex-digits</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-31-4" name="__codelineno-31-4"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">();</span>
<a id="__codelineno-31-5" name="__codelineno-31-5"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">();</span>
<a id="__codelineno-31-6" name="__codelineno-31-6"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="background">Background</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-32-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-32-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-32-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-32-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-32-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-32-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-32-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-32-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-32-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-32-10">10</a></span>
<span class="normal"><a href="#__codelineno-32-11">11</a></span>
<span class="normal"><a href="#__codelineno-32-12">12</a></span>
<span class="normal"><a href="#__codelineno-32-13">13</a></span>
<span class="normal"><a href="#__codelineno-32-14">14</a></span>
<span class="normal"><a href="#__codelineno-32-15">15</a></span>
<span class="normal"><a href="#__codelineno-32-16">16</a></span>
<span class="normal"><a href="#__codelineno-32-17">17</a></span>
<span class="normal"><a href="#__codelineno-32-18">18</a></span>
<span class="normal"><a href="#__codelineno-32-19">19</a></span>
<span class="normal"><a href="#__codelineno-32-20">20</a></span>
<span class="normal"><a href="#__codelineno-32-21">21</a></span>
<span class="normal"><a href="#__codelineno-32-22">22</a></span>
<span class="normal"><a href="#__codelineno-32-23">23</a></span>
<span class="normal"><a href="#__codelineno-32-24">24</a></span>
<span class="normal"><a href="#__codelineno-32-25">25</a></span>
<span class="normal"><a href="#__codelineno-32-26">26</a></span>
<span class="normal"><a href="#__codelineno-32-27">27</a></span>
<span class="normal"><a href="#__codelineno-32-28">28</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-32-1" name="__codelineno-32-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-32-2" name="__codelineno-32-2"></a><span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">image</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="k">position</span><span class="o">&gt;</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">repeat</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">attachment</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">origin</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">clip</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-3" name="__codelineno-32-3"></a>
<a id="__codelineno-32-4" name="__codelineno-32-4"></a><span class="w"> </span><span class="k">background-image</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">image-path</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-5" name="__codelineno-32-5"></a>
<a id="__codelineno-32-6" name="__codelineno-32-6"></a><span class="w"> </span><span class="k">background-position</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">|</span><span class="kc">bottom</span><span class="o">|</span><span class="kc">left</span><span class="o">|</span><span class="kc">right</span><span class="o">|</span><span class="kc">center</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-7" name="__codelineno-32-7"></a><span class="w"> </span><span class="k">background-position</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">inherit</span><span class="o">|</span><span class="kc">initial</span><span class="o">|</span><span class="n">revert</span><span class="o">|</span><span class="n">revert-layer</span><span class="o">|</span><span class="kc">unset</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-8" name="__codelineno-32-8"></a><span class="w"> </span><span class="k">background-position</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">x</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">y</span><span class="o">&gt;</span>
<a id="__codelineno-32-9" name="__codelineno-32-9"></a>
<a id="__codelineno-32-10" name="__codelineno-32-10"></a><span class="w"> </span><span class="k">background-size</span><span class="o">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-11" name="__codelineno-32-11"></a><span class="w"> </span><span class="k">background-size</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="k">width</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="k">height</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-12" name="__codelineno-32-12"></a><span class="w"> </span><span class="k">background-size</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">,</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* multiple background */</span>
<a id="__codelineno-32-13" name="__codelineno-32-13"></a>
<a id="__codelineno-32-14" name="__codelineno-32-14"></a>
<a id="__codelineno-32-15" name="__codelineno-32-15"></a><span class="w"> </span><span class="k">background-repeat</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">horizontal</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">vertical</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-16" name="__codelineno-32-16"></a><span class="w"> </span><span class="k">background-repeat</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">repeat</span><span class="o">|</span><span class="kc">no-repeat</span><span class="o">|</span><span class="kc">repeat-x</span><span class="o">|</span><span class="kc">repeat-y</span><span class="o">|</span><span class="kc">space</span><span class="o">|</span><span class="kc">round</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-17" name="__codelineno-32-17"></a>
<a id="__codelineno-32-18" name="__codelineno-32-18"></a><span class="w"> </span><span class="k">background-attachment</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">scroll</span><span class="o">|</span><span class="kc">fixed</span><span class="o">|</span><span class="kc">local</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-19" name="__codelineno-32-19"></a>
<a id="__codelineno-32-20" name="__codelineno-32-20"></a><span class="w"> </span><span class="k">background-origin</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">border-box</span><span class="o">|</span><span class="kc">padding-box</span><span class="o">|</span><span class="kc">content-box</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-21" name="__codelineno-32-21"></a><span class="w"> </span><span class="k">background-clip</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">border-box</span><span class="o">|</span><span class="kc">padding-box</span><span class="o">|</span><span class="kc">content-box</span><span class="o">|</span><span class="kc">text</span><span class="o">&gt;</span>
<a id="__codelineno-32-22" name="__codelineno-32-22"></a>
<a id="__codelineno-32-23" name="__codelineno-32-23"></a><span class="w"> </span><span class="k">background-color</span><span class="o">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-24" name="__codelineno-32-24"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">color</span><span class="o">-</span><span class="n">name</span><span class="p">;</span>
<a id="__codelineno-32-25" name="__codelineno-32-25"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="err">#</span><span class="o">&lt;</span><span class="n">hex-digits</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-32-26" name="__codelineno-32-26"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">();</span>
<a id="__codelineno-32-27" name="__codelineno-32-27"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">();</span>
<a id="__codelineno-32-28" name="__codelineno-32-28"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="font">Font</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-33-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-33-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-33-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-33-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-33-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-33-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-33-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-33-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-33-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-33-10">10</a></span>
<span class="normal"><a href="#__codelineno-33-11">11</a></span>
<span class="normal"><a href="#__codelineno-33-12">12</a></span>
<span class="normal"><a href="#__codelineno-33-13">13</a></span>
<span class="normal"><a href="#__codelineno-33-14">14</a></span>
<span class="normal"><a href="#__codelineno-33-15">15</a></span>
<span class="normal"><a href="#__codelineno-33-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-33-1" name="__codelineno-33-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-33-2" name="__codelineno-33-2"></a><span class="w"> </span><span class="k">font</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">weight</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">family</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-33-3" name="__codelineno-33-3"></a><span class="w"> </span><span class="k">font-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-33-4" name="__codelineno-33-4"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">weight</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-33-5" name="__codelineno-33-5"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-33-6" name="__codelineno-33-6"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">family</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-33-7" name="__codelineno-33-7"></a>
<a id="__codelineno-33-8" name="__codelineno-33-8"></a><span class="w"> </span><span class="c">/* specific font name */</span>
<a id="__codelineno-33-9" name="__codelineno-33-9"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Font Name&quot;</span><span class="p">;</span>
<a id="__codelineno-33-10" name="__codelineno-33-10"></a>
<a id="__codelineno-33-11" name="__codelineno-33-11"></a><span class="w"> </span><span class="c">/* generic name */</span>
<a id="__codelineno-33-12" name="__codelineno-33-12"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">generic-name</span><span class="p">;</span>
<a id="__codelineno-33-13" name="__codelineno-33-13"></a>
<a id="__codelineno-33-14" name="__codelineno-33-14"></a><span class="w"> </span><span class="c">/* comma separated list */</span>
<a id="__codelineno-33-15" name="__codelineno-33-15"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Font Name&quot;</span><span class="p">,</span><span class="w"> </span><span class="n">generic-name</span><span class="p">;</span>
<a id="__codelineno-33-16" name="__codelineno-33-16"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="text-decoration-aliment">Text Decoration &amp; Aliment</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-34-1">1</a></span>
<span class="normal"><a href="#__codelineno-34-2">2</a></span>
<span class="normal"><a href="#__codelineno-34-3">3</a></span>
<span class="normal"><a href="#__codelineno-34-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-34-1" name="__codelineno-34-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-34-2" name="__codelineno-34-2"></a><span class="w"> </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">line</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="n">thickness</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-34-3" name="__codelineno-34-3"></a><span class="w"> </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="n">alignment</span><span class="p">;</span>
<a id="__codelineno-34-4" name="__codelineno-34-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p><code>text-decoration</code> values:</p>
<ul>
<li><code>text-decoration-line</code>: Sets the kind of decoration used, such as underline or line-through.</li>
<li><code>text-decoration-color</code>: Sets the color of the decoration.</li>
<li><code>text-decoration-style</code>: Sets the style of the line used for the decoration, such as solid, wavy, or dashed.</li>
<li><code>text-decoration-thickness</code>: Sets the thickness of the line used for the decoration.</li>
</ul>
<p><code>text-align</code> values:</p>
<ul>
<li><code>start</code>: The same as left if direction is left-to-right and right if direction is right-to-left.</li>
<li><code>end</code>: The same as right if direction is left-to-right and left if direction is right-to-left.</li>
<li><code>left</code>: The inline contents are aligned to the left edge of the line box.</li>
<li><code>right</code>: The inline contents are aligned to the right edge of the line box.</li>
<li><code>center</code>: The inline contents are centered within the line box.</li>
<li><code>justify</code>: The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</li>
<li><code>justify-all</code>: Same as justify, but also forces the last line to be justified.</li>
<li><code>match-parent</code>: Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.</li>
</ul>
<h3 id="size">Size</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-35-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-35-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-35-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-35-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-35-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-35-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-35-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-35-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-35-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-35-10">10</a></span>
<span class="normal"><a href="#__codelineno-35-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-35-1" name="__codelineno-35-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-35-2" name="__codelineno-35-2"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-3" name="__codelineno-35-3"></a><span class="w"> </span><span class="k">max-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-4" name="__codelineno-35-4"></a><span class="w"> </span><span class="k">min-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-5" name="__codelineno-35-5"></a>
<a id="__codelineno-35-6" name="__codelineno-35-6"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-7" name="__codelineno-35-7"></a><span class="w"> </span><span class="k">max-height</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-8" name="__codelineno-35-8"></a><span class="w"> </span><span class="k">min-height</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-9" name="__codelineno-35-9"></a>
<a id="__codelineno-35-10" name="__codelineno-35-10"></a><span class="w"> </span><span class="k">aspect-ratio</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="k">width</span><span class="o">&gt;</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="o">&lt;</span><span class="k">height</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-35-11" name="__codelineno-35-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p><strong>Note</strong>: <code>width</code> and <code>height</code> properties do not have effect on inline elements.</p>
</blockquote>
<h3 id="hiding-elements">Hiding Elements</h3>
<p>There are several methods to 'hide' elements:</p>
<ul>
<li><code>display: none</code> removes the element from the document flow</li>
<li><code>visibility: hidden</code> hides the element, but it still takes up space in the layout</li>
<li><code>opacity: 0</code> hides the element, still takes up space in the layout, events work</li>
</ul>
<table>
<thead>
<tr>
<th>Rule</th>
<th>Collapse</th>
<th>Events</th>
<th>Tab Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>display: none</code></td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><code>visibility: hidden</code></td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><code>opacity: 0</code></td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<h2 id="box-model"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Box Model</a></h2>
<p><img alt="Box Model" src="../../img/css_box-model.avif" /></p>
<h3 id="padding">Padding</h3>
<p>Space between the border and the content.</p>
<p>It's possible to specify the padding for each side of the element:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-36-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-36-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-36-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-36-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-36-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-36-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-36-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-36-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-36-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-36-10">10</a></span>
<span class="normal"><a href="#__codelineno-36-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-36-1" name="__codelineno-36-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-36-2" name="__codelineno-36-2"></a><span class="w"> </span><span class="k">padding-top</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-36-3" name="__codelineno-36-3"></a><span class="w"> </span><span class="k">padding-right</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-36-4" name="__codelineno-36-4"></a><span class="w"> </span><span class="k">padding-bottom</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-36-5" name="__codelineno-36-5"></a><span class="w"> </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-36-6" name="__codelineno-36-6"></a>
<a id="__codelineno-36-7" name="__codelineno-36-7"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Four values (TRBL) */</span>
<a id="__codelineno-36-8" name="__codelineno-36-8"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">/</span><span class="kc">left</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Three values (T/TL/B) */</span>
<a id="__codelineno-36-9" name="__codelineno-36-9"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">/</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">/</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Two values (TB/RL) */</span>
<a id="__codelineno-36-10" name="__codelineno-36-10"></a><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">all</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* One value */</span>
<a id="__codelineno-36-11" name="__codelineno-36-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p><strong>Note</strong>: Padding adds to the total size of the box, unless <code>box-sizing: border-box;</code> is used.</p>
</blockquote>
<h3 id="border">Border</h3>
<p>Borders are specified as "size, style, color".</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-37-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-37-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-37-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-37-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-37-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-37-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-37-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-37-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-37-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-37-10">10</a></span>
<span class="normal"><a href="#__codelineno-37-11">11</a></span>
<span class="normal"><a href="#__codelineno-37-12">12</a></span>
<span class="normal"><a href="#__codelineno-37-13">13</a></span>
<span class="normal"><a href="#__codelineno-37-14">14</a></span>
<span class="normal"><a href="#__codelineno-37-15">15</a></span>
<span class="normal"><a href="#__codelineno-37-16">16</a></span>
<span class="normal"><a href="#__codelineno-37-17">17</a></span>
<span class="normal"><a href="#__codelineno-37-18">18</a></span>
<span class="normal"><a href="#__codelineno-37-19">19</a></span>
<span class="normal"><a href="#__codelineno-37-20">20</a></span>
<span class="normal"><a href="#__codelineno-37-21">21</a></span>
<span class="normal"><a href="#__codelineno-37-22">22</a></span>
<span class="normal"><a href="#__codelineno-37-23">23</a></span>
<span class="normal"><a href="#__codelineno-37-24">24</a></span>
<span class="normal"><a href="#__codelineno-37-25">25</a></span>
<span class="normal"><a href="#__codelineno-37-26">26</a></span>
<span class="normal"><a href="#__codelineno-37-27">27</a></span>
<span class="normal"><a href="#__codelineno-37-28">28</a></span>
<span class="normal"><a href="#__codelineno-37-29">29</a></span>
<span class="normal"><a href="#__codelineno-37-30">30</a></span>
<span class="normal"><a href="#__codelineno-37-31">31</a></span>
<span class="normal"><a href="#__codelineno-37-32">32</a></span>
<span class="normal"><a href="#__codelineno-37-33">33</a></span>
<span class="normal"><a href="#__codelineno-37-34">34</a></span>
<span class="normal"><a href="#__codelineno-37-35">35</a></span>
<span class="normal"><a href="#__codelineno-37-36">36</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-37-1" name="__codelineno-37-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-37-2" name="__codelineno-37-2"></a><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-3" name="__codelineno-37-3"></a><span class="w"> </span><span class="k">border-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-4" name="__codelineno-37-4"></a><span class="w"> </span><span class="k">border-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-5" name="__codelineno-37-5"></a><span class="w"> </span><span class="k">border-color</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-6" name="__codelineno-37-6"></a>
<a id="__codelineno-37-7" name="__codelineno-37-7"></a><span class="w"> </span><span class="k">border-top</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-8" name="__codelineno-37-8"></a><span class="w"> </span><span class="k">border-right</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-9" name="__codelineno-37-9"></a><span class="w"> </span><span class="k">border-bottom</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-10" name="__codelineno-37-10"></a><span class="w"> </span><span class="k">border-left</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">style</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">color</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-11" name="__codelineno-37-11"></a>
<a id="__codelineno-37-12" name="__codelineno-37-12"></a><span class="w"> </span><span class="k">border-top-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-13" name="__codelineno-37-13"></a><span class="w"> </span><span class="k">border-right-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-14" name="__codelineno-37-14"></a><span class="w"> </span><span class="k">border-bottom-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-15" name="__codelineno-37-15"></a><span class="w"> </span><span class="k">border-left-width</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-16" name="__codelineno-37-16"></a>
<a id="__codelineno-37-17" name="__codelineno-37-17"></a><span class="w"> </span><span class="k">border-top-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-18" name="__codelineno-37-18"></a><span class="w"> </span><span class="k">border-right-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-19" name="__codelineno-37-19"></a><span class="w"> </span><span class="k">border-bottom-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-20" name="__codelineno-37-20"></a><span class="w"> </span><span class="k">border-left-style</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-21" name="__codelineno-37-21"></a>
<a id="__codelineno-37-22" name="__codelineno-37-22"></a><span class="w"> </span><span class="k">border-top-color</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-23" name="__codelineno-37-23"></a><span class="w"> </span><span class="k">border-right-color</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-24" name="__codelineno-37-24"></a><span class="w"> </span><span class="k">border-bottom-color</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-25" name="__codelineno-37-25"></a><span class="w"> </span><span class="k">border-left-color</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-26" name="__codelineno-37-26"></a>
<a id="__codelineno-37-27" name="__codelineno-37-27"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">left</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">right</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">-</span><span class="n">tight</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">-</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-28" name="__codelineno-37-28"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">left</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">right</span><span class="o">/</span><span class="kc">bottom</span><span class="o">-</span><span class="kc">left</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">-</span><span class="kc">right</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-29" name="__codelineno-37-29"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">left</span><span class="o">/</span><span class="kc">bottom</span><span class="o">-</span><span class="kc">right</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">-</span><span class="kc">right</span><span class="o">/</span><span class="kc">bottom</span><span class="o">-</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-30" name="__codelineno-37-30"></a><span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">all</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-31" name="__codelineno-37-31"></a>
<a id="__codelineno-37-32" name="__codelineno-37-32"></a><span class="w"> </span><span class="k">border-top-left-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-33" name="__codelineno-37-33"></a><span class="w"> </span><span class="k">border-top-right-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-34" name="__codelineno-37-34"></a><span class="w"> </span><span class="k">border-bottom-right-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-35" name="__codelineno-37-35"></a><span class="w"> </span><span class="k">border-bottom-left-radius</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-37-36" name="__codelineno-37-36"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p><strong>Note</strong>: Border adds to the total size of the box, <code>unless box-sizing: border-box;</code> is used</p>
</blockquote>
<h3 id="box-sizing">Box Sizing</h3>
<p>Defines whether the width and height (and min/max) of an element should include padding and borders or not.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-38-1">1</a></span>
<span class="normal"><a href="#__codelineno-38-2">2</a></span>
<span class="normal"><a href="#__codelineno-38-3">3</a></span>
<span class="normal"><a href="#__codelineno-38-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-38-1" name="__codelineno-38-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-38-2" name="__codelineno-38-2"></a><span class="w"> </span><span class="k">box-sizing</span><span class="p">:</span><span class="w"> </span><span class="kc">content-box</span><span class="p">;</span><span class="w"> </span><span class="c">/* Border and padding are not included */</span>
<a id="__codelineno-38-3" name="__codelineno-38-3"></a><span class="w"> </span><span class="k">box-sizing</span><span class="p">:</span><span class="w"> </span><span class="kc">border-box</span><span class="p">;</span><span class="w"> </span><span class="c">/* Include the content, padding and border */</span>
<a id="__codelineno-38-4" name="__codelineno-38-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="margin">Margin</h3>
<p>Transparent area around the box that separates it from other elements.</p>
<p>It's possible to specify the margin for each side of the element.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-39-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-39-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-39-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-39-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-39-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-39-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-39-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-39-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-39-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-39-10">10</a></span>
<span class="normal"><a href="#__codelineno-39-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-39-1" name="__codelineno-39-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-39-2" name="__codelineno-39-2"></a><span class="w"> </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-39-3" name="__codelineno-39-3"></a><span class="w"> </span><span class="k">margin-right</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-39-4" name="__codelineno-39-4"></a><span class="w"> </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-39-5" name="__codelineno-39-5"></a><span class="w"> </span><span class="k">margin-left</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">size</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-39-6" name="__codelineno-39-6"></a>
<a id="__codelineno-39-7" name="__codelineno-39-7"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Four values (TRBL) */</span>
<a id="__codelineno-39-8" name="__codelineno-39-8"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">/</span><span class="kc">left</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Three values (T/TL/B) */</span>
<a id="__codelineno-39-9" name="__codelineno-39-9"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">top</span><span class="o">/</span><span class="kc">bottom</span><span class="o">&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">right</span><span class="o">/</span><span class="kc">left</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* Two values (TB/RL) */</span>
<a id="__codelineno-39-10" name="__codelineno-39-10"></a><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">all</span><span class="o">&gt;</span><span class="p">;</span><span class="w"> </span><span class="c">/* One value */</span>
<a id="__codelineno-39-11" name="__codelineno-39-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p><strong>Note</strong>: Top and bottom margins of near elements are collapsed into a single margin that is equal to the largest of the two margins.</p>
</blockquote>
<h2 id="element-positioning"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">Element Positioning</a></h2>
<h3 id="static-positioning">Static Positioning</h3>
<p>All HTML elements are positioned static by default.<br />
Static elements are positioned in the normal flow of the page.<br />
Static elements ignore top, bottom, right, or left property specifications.</p>
<p>In normal flow block elements flow from top to bottom making a new line after every element.
In normal flow inline elements flow from left to right wrapping to next line when needed.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-40-1">1</a></span>
<span class="normal"><a href="#__codelineno-40-2">2</a></span>
<span class="normal"><a href="#__codelineno-40-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-40-1" name="__codelineno-40-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-40-2" name="__codelineno-40-2"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">static</span><span class="p">;</span>
<a id="__codelineno-40-3" name="__codelineno-40-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="relative-positioning">Relative positioning</h3>
<p>Takes the element out of the normal flow, allowing it to be moved in relation to the top, bottom, right, or left but does not affect the elements surrounding it.<br />
Makes an element a "positioning context" in which to position other elements relative to it.<br />
The relative value will still put the element in the normal flow, but then offset it according to top, bottom, right and left properties.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-41-1">1</a></span>
<span class="normal"><a href="#__codelineno-41-2">2</a></span>
<span class="normal"><a href="#__codelineno-41-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-41-1" name="__codelineno-41-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-41-2" name="__codelineno-41-2"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
<a id="__codelineno-41-3" name="__codelineno-41-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="absolute-positioning">Absolute Positioning</h3>
<p>Positions element outside of the normal flow and other elements act as if it's not there.<br />
An absolutely positioned element is offset from its container block, set with the properties top, bottom, right and left.<br />
Its container block is the first surrounding element that has any position other than static.<br />
If no such element is found, the container block is <code>&lt;html&gt;</code>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-42-1">1</a></span>
<span class="normal"><a href="#__codelineno-42-2">2</a></span>
<span class="normal"><a href="#__codelineno-42-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-42-1" name="__codelineno-42-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-42-2" name="__codelineno-42-2"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
<a id="__codelineno-42-3" name="__codelineno-42-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="fixed-positioning">Fixed Positioning</h3>
<p>The fixed value takes an element out of the normal flow, it positions it relative to the viewport.<br />
Parent positioning will no longer affect fixed elements.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-43-1">1</a></span>
<span class="normal"><a href="#__codelineno-43-2">2</a></span>
<span class="normal"><a href="#__codelineno-43-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-43-1" name="__codelineno-43-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-43-2" name="__codelineno-43-2"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">fixed</span><span class="p">;</span>
<a id="__codelineno-43-3" name="__codelineno-43-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="sticky-positioning">Sticky Positioning</h3>
<p>Sticky positioning is a hybrid of relative and fixed positioning.<br />
The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-44-1">1</a></span>
<span class="normal"><a href="#__codelineno-44-2">2</a></span>
<span class="normal"><a href="#__codelineno-44-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-44-1" name="__codelineno-44-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-44-2" name="__codelineno-44-2"></a><span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">sticky</span><span class="p">;</span>
<a id="__codelineno-44-3" name="__codelineno-44-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p><code>Note</code>: sticky is not supported by IE and still needs to be prefixed for webkit based browsers</p>
<h3 id="z-index">Z-Index</h3>
<p>When elements overlap, the order of overlapping can be changed with z-index:</p>
<ul>
<li>The element with highest z-index goes on top</li>
<li>Without z-index, elements stack in the order that they appear in the DOM</li>
<li>Elements with non-static positioning will always appear on top of elements with default static positioning</li>
</ul>
<p><strong>Nesting is important</strong>: if element <em>B</em> is on top of element <em>A</em>, a child of element <em>A</em> can never be higher than element <em>B</em>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-45-1">1</a></span>
<span class="normal"><a href="#__codelineno-45-2">2</a></span>
<span class="normal"><a href="#__codelineno-45-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-45-1" name="__codelineno-45-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-45-2" name="__codelineno-45-2"></a><span class="w"> </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">int</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-45-3" name="__codelineno-45-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="layouts"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">Layouts</a></h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-46-1">1</a></span>
<span class="normal"><a href="#__codelineno-46-2">2</a></span>
<span class="normal"><a href="#__codelineno-46-3">3</a></span>
<span class="normal"><a href="#__codelineno-46-4">4</a></span>
<span class="normal"><a href="#__codelineno-46-5">5</a></span>
<span class="normal"><a href="#__codelineno-46-6">6</a></span>
<span class="normal"><a href="#__codelineno-46-7">7</a></span>
<span class="normal"><a href="#__codelineno-46-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-46-1" name="__codelineno-46-1"></a><span class="nt">div</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-46-2" name="__codelineno-46-2"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline</span><span class="p">;</span><span class="w"> </span><span class="c">/* Default of all elements, unless UA (user agent) stylesheet overrides */</span>
<a id="__codelineno-46-3" name="__codelineno-46-3"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span><span class="w"> </span><span class="c">/* block is default for elements like &lt;div&gt; and &lt;section&gt;*/</span>
<a id="__codelineno-46-4" name="__codelineno-46-4"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">inline-block</span><span class="p">;</span><span class="w"> </span><span class="c">/* Characteristics of block, but sits on a line */</span>
<a id="__codelineno-46-5" name="__codelineno-46-5"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span>
<a id="__codelineno-46-6" name="__codelineno-46-6"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="k">grid</span><span class="p">;</span><span class="w"> </span><span class="c">/* divide page into major regions or define the relationship in terms of size */</span>
<a id="__codelineno-46-7" name="__codelineno-46-7"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span><span class="w"> </span><span class="c">/* Hide */</span>
<a id="__codelineno-46-8" name="__codelineno-46-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="inline">Inline</h3>
<ul>
<li>The default value for elements (e.g. <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;b&gt;</code>, etc.)</li>
<li>Doesn't break the flow of the text</li>
<li>The element will accept margin and padding, but the element still sits inline</li>
<li>Margin and padding will only push other elements horizontally, not vertically</li>
<li>An inline element will not accept height and width.</li>
</ul>
<h3 id="block">Block</h3>
<ul>
<li>Some elements are set to block by the browser UA (user agent) stylesheet</li>
<li>Container elements, like <code>&lt;div&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;ul&gt;</code>, etc.</li>
<li>Text block elements like <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, etc.</li>
<li>Do not sit inline</li>
<li>By default take up as much horizontal space as they can</li>
</ul>
<h3 id="inline-block">Inline Block</h3>
<ul>
<li>Combines aspects of inline and block</li>
<li>Very similar to inline in that it will sit inline with the natural flow of text</li>
<li>Able to set a width and height</li>
</ul>
<h3 id="none">None</h3>
<ul>
<li><code>display: none</code> removes the element from the document flow</li>
<li>The element does not take up any space</li>
</ul>
<h3 id="flex"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout">Flex</a></h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-47-1">1</a></span>
<span class="normal"><a href="#__codelineno-47-2">2</a></span>
<span class="normal"><a href="#__codelineno-47-3">3</a></span>
<span class="normal"><a href="#__codelineno-47-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-47-1" name="__codelineno-47-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-47-2" name="__codelineno-47-2"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;flex&quot;</span><span class="p">;</span>
<a id="__codelineno-47-3" name="__codelineno-47-3"></a><span class="w"> </span><span class="k">flex-direction</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="kc">row</span><span class="o">|</span><span class="kc">column</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-47-4" name="__codelineno-47-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="grid"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid</a></h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-48-1">1</a></span>
<span class="normal"><a href="#__codelineno-48-2">2</a></span>
<span class="normal"><a href="#__codelineno-48-3">3</a></span>
<span class="normal"><a href="#__codelineno-48-4">4</a></span>
<span class="normal"><a href="#__codelineno-48-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-48-1" name="__codelineno-48-1"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-48-2" name="__codelineno-48-2"></a><span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="k">grid</span><span class="p">;</span>
<a id="__codelineno-48-3" name="__codelineno-48-3"></a><span class="w"> </span><span class="k">grid-template-columns</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="p">;</span><span class="w"> </span><span class="c">/* 3 equal columns */</span>
<a id="__codelineno-48-4" name="__codelineno-48-4"></a><span class="w"> </span><span class="k">grid-template-rows</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="w"> </span><span class="mi">1</span><span class="n">fr</span><span class="p">;</span><span class="w"> </span><span class="c">/* 3 equal rows */</span>
<a id="__codelineno-48-5" name="__codelineno-48-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="variables">Variables</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-49-1">1</a></span>
<span class="normal"><a href="#__codelineno-49-2">2</a></span>
<span class="normal"><a href="#__codelineno-49-3">3</a></span>
<span class="normal"><a href="#__codelineno-49-4">4</a></span>
<span class="normal"><a href="#__codelineno-49-5">5</a></span>
<span class="normal"><a href="#__codelineno-49-6">6</a></span>
<span class="normal"><a href="#__codelineno-49-7">7</a></span>
<span class="normal"><a href="#__codelineno-49-8">8</a></span>
<span class="normal"><a href="#__codelineno-49-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-49-1" name="__codelineno-49-1"></a><span class="p">:</span><span class="nd">root</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-49-2" name="__codelineno-49-2"></a><span class="w"> </span><span class="c">/* define variables on :root element */</span>
<a id="__codelineno-49-3" name="__codelineno-49-3"></a><span class="w"> </span><span class="nv">--variable</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span>
<a id="__codelineno-49-4" name="__codelineno-49-4"></a><span class="p">}</span>
<a id="__codelineno-49-5" name="__codelineno-49-5"></a>
<a id="__codelineno-49-6" name="__codelineno-49-6"></a><span class="nt">selector</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-49-7" name="__codelineno-49-7"></a><span class="w"> </span><span class="nv">--variable</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="c">/* overwrite value */</span>
<a id="__codelineno-49-8" name="__codelineno-49-8"></a><span class="w"> </span><span class="n">prop</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--variable</span><span class="p">);</span><span class="w"> </span><span class="c">/* use value of variable */</span>
<a id="__codelineno-49-9" name="__codelineno-49-9"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="responsive-design">Responsive Design</h2>
<p>A <strong>responsive</strong> website or application automatically adjusts to the screen and adapts to any device.</p>
<h3 id="viewport-meta-tag">Viewport Meta-Tag</h3>
<p>Is located in the <code>&lt;head&gt;</code> of the HTML document. It defines how a site should render in a web browser for mobile devices and makes media queries will work as intended.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-50-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-50-1" name="__codelineno-50-1"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<ul>
<li><code>device-width</code>: indicates the width should match with the viewport of the device</li>
<li><code>initial-scale</code>: ensure the zoom will not be applied and the layout will always show on a <code>1:1</code> scale</li>
</ul>
<h3 id="media-queries">Media Queries</h3>
<p><strong>Media queries</strong> allow the customization of web pages for specific devices screen sizes.
A media query is a logical expression: true or false; if a media query is true, the related rules are applied to the target device.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">CSS</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-51-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-51-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-51-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-51-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-51-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-51-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-51-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-51-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-51-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-51-10">10</a></span>
<span class="normal"><a href="#__codelineno-51-11">11</a></span>
<span class="normal"><a href="#__codelineno-51-12">12</a></span>
<span class="normal"><a href="#__codelineno-51-13">13</a></span>
<span class="normal"><a href="#__codelineno-51-14">14</a></span>
<span class="normal"><a href="#__codelineno-51-15">15</a></span>
<span class="normal"><a href="#__codelineno-51-16">16</a></span>
<span class="normal"><a href="#__codelineno-51-17">17</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-51-1" name="__codelineno-51-1"></a><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="nt">type</span><span class="w"> </span><span class="nt">operator</span><span class="w"> </span><span class="o">(</span><span class="nt">feature</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-51-2" name="__codelineno-51-2"></a><span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-51-3" name="__codelineno-51-3"></a><span class="p">}</span>
<a id="__codelineno-51-4" name="__codelineno-51-4"></a>
<a id="__codelineno-51-5" name="__codelineno-51-5"></a><span class="c">/* AND logic: Both conditions must be true */</span>
<a id="__codelineno-51-6" name="__codelineno-51-6"></a><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="nt">screen</span><span class="w"> </span><span class="nt">and</span><span class="w"> </span><span class="o">(</span><span class="nt">min-width</span><span class="o">:</span><span class="w"> </span><span class="nt">400px</span><span class="o">)</span><span class="w"> </span><span class="nt">and</span><span class="w"> </span><span class="o">(</span><span class="nt">orientation</span><span class="o">:</span><span class="w"> </span><span class="nt">landscape</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-51-7" name="__codelineno-51-7"></a><span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-51-8" name="__codelineno-51-8"></a><span class="p">}</span>
<a id="__codelineno-51-9" name="__codelineno-51-9"></a><span class="c">/* OR logic: At least one conditions should be true */</span>
<a id="__codelineno-51-10" name="__codelineno-51-10"></a><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="nt">screen</span><span class="w"> </span><span class="nt">and</span><span class="w"> </span><span class="o">(</span><span class="nt">min-width</span><span class="o">:</span><span class="w"> </span><span class="nt">400px</span><span class="o">),</span><span class="w"> </span><span class="nt">screen</span><span class="w"> </span><span class="nt">and</span><span class="w"> </span><span class="o">(</span><span class="nt">orientation</span><span class="o">:</span><span class="w"> </span><span class="nt">landscape</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-51-11" name="__codelineno-51-11"></a><span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-51-12" name="__codelineno-51-12"></a><span class="p">}</span>
<a id="__codelineno-51-13" name="__codelineno-51-13"></a>
<a id="__codelineno-51-14" name="__codelineno-51-14"></a><span class="c">/* NOT logic: Negates the entire condition */</span>
<a id="__codelineno-51-15" name="__codelineno-51-15"></a><span class="p">@</span><span class="k">media</span><span class="w"> </span><span class="nt">not</span><span class="w"> </span><span class="nt">all</span><span class="w"> </span><span class="nt">and</span><span class="w"> </span><span class="o">(</span><span class="nt">orientation</span><span class="o">:</span><span class="w"> </span><span class="nt">landscape</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-51-16" name="__codelineno-51-16"></a><span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="n">value</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-51-17" name="__codelineno-51-17"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<p>Types:</p>
<ul>
<li><code>all</code>: all media type devices.</li>
<li><code>print</code>: printers.</li>
<li><code>screen</code>: computer screens, tablets, smart-phones, etc.</li>
<li><code>speech</code>: screen readers that "reads" the page out loud.</li>
</ul>
<p>Features:</p>
<ul>
<li><code>width</code></li>
<li><code>min-width</code></li>
<li><code>max-width</code></li>
<li><code>height</code></li>
<li><code>min-height</code></li>
<li><code>max-height</code></li>
<li><code>orientation</code></li>
</ul>
<p>It's possible to specify a media attribute in the link element. This applies a whole stylesheet when the condition is true:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-52-1">1</a></span>
<span class="normal"><a href="#__codelineno-52-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-52-1" name="__codelineno-52-1"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">media</span><span class="o">=</span><span class="s">&quot;screen and (min-width: 900px)&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;widescreen.css&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-52-2" name="__codelineno-52-2"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">media</span><span class="o">=</span><span class="s">&quot;screen and (max-width: 600px)&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;smallscreen.css&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>It's also possible to have different stylesheets based on media type:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-53-1">1</a></span>
<span class="normal"><a href="#__codelineno-53-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-53-1" name="__codelineno-53-1"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;screen.css&quot;</span> <span class="na">media</span><span class="o">=</span><span class="s">&quot;screen&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-53-2" name="__codelineno-53-2"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;print.css&quot;</span> <span class="na">media</span><span class="o">=</span><span class="s">&quot;print&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../markdown.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: Markdown">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Markdown
</div>
</div>
</a>
<a href="../c/c.html" class="md-footer__link md-footer__link--next" aria-label="Next: C">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
C
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://hachyderm.io/@m_lamonaca" target="_blank" rel="noopener me" title="hachyderm.io" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://github.com/m-lamonaca" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.indexes", "navigation.tracking", "navigation.pruning", "navigation.sections", "navigation.top", "navigation.tabs", "navigation.tabs.sticky", "navigation.footer", "toc.follow", "content.code.copy"], "search": "../../assets/javascripts/workers/search.07f07601.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.56dfad97.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink