\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Manon Gerrd (manongerard)}
\pdfinfo{
  /Title (css.pdf)
  /Creator (Cheatography)
  /Author (Manon Gerrd (manongerard))
  /Subject (CSS Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{89D0FE}
\definecolor{LightBackground}{HTML}{F0F9FE}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{CSS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Manon Gerrd (manongerard)} via \textcolor{DarkBackground}{\uline{cheatography.com/195339/cs/40966/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Manon Gerrd (manongerard) \\
  \uline{cheatography.com/manongerard} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 30th October, 2023.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Syntax}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{A CSS rule consists of a {\bf{selector}} and a {\bf{declaration}} block. \newline % Row Count 2 (+ 2)
`selector \{\{\{nl\}\}    property1: value1;\{\{nl\}\}    property2: value2;\{\{nl\}\}\}` \newline % Row Count 4 (+ 2)
No space between the property value and its unit% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.8 cm} x{3.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Simple selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\emph{name}} \{ ... \} & \textless{}{\emph{name}}\textgreater{} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\#{\emph{id}} \{ ... \} & \textless{}{\emph{element}} id="{\emph{id}}"\textgreater{} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
.{\emph{class}} \{ ... \} & \textless{}{\emph{element}} class="{\emph{class}}"\textgreater{} \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
{\emph{name}}.{\emph{class}} \{ ... \} & \textless{}name class="{\emph{class}}"\textgreater{} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
* \{ ... \} & all elements \tn 
% Row Count 8 (+ 1)
% Row 5
\SetRowColor{white}
{\emph{selector1}}, {\emph{selector2}}, ..., {\emph{selectorX}} \{...\} & Grouping selector \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Combinator selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Based on a specific relationship between them} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\emph{x}} {\emph{y}} \{ ... \} & Descendant selector: all {\emph{y}} elements inside {\emph{x}} elements \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\emph{x}} \textgreater{} {\emph{y}} \{ ... \} & Child selector: all {\emph{y}} elements where the parent is a {\emph{x}} elements \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
{\emph{x}} + {\emph{y}} \{ ... \} & Adjacent sibling selector: the first {\emph{y}} element placed immediately after {\emph{x}} elements \tn 
% Row Count 11 (+ 4)
% Row 4
\SetRowColor{LightBackground}
{\emph{x}} \textasciitilde{} {\emph{y}} \{ ... \} & General sibling selector: all {\emph{y}} elements that are preceded by a {\emph{x}} element \tn 
% Row Count 14 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-elements selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Part of an element} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Syntax & \seqsplit{`selector::pseudo-element} \{\{\{nl\}\}    property: value;\{\{nl\}\}\}` \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\emph{selector}}::after & Insert content after every {\emph{selector}} element\{\{nl\}\}Onlyapply to block-level elements \tn 
% Row Count 8 (+ 4)
% Row 3
\SetRowColor{white}
{\emph{selector}}::before & Insert content before every {\emph{selector}} element \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
{\emph{selector}}::first-letter & Selects the first letter of every {\emph{selector}} element \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
{\emph{selector}}::first-line & Selects the first line of every {\emph{selector}} element \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
{\emph{selector}}::marker & Selects the markers of list items \tn 
% Row Count 18 (+ 2)
% Row 7
\SetRowColor{white}
{\emph{selector}}::selection & Selects the portion of an element that is selected by a user \tn 
% Row Count 21 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Only some limited types of properties apply to each of the pseudo-elements}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Attribute selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
Based on an attribute or attribute value & All elements with a target attribute \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{[}{\emph{attribute}}{]} & All elements with an {\emph{attribute}} attribute \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{[}{\emph{attribute}} = "{\emph{value}}"{]} & All elements with {\emph{attribute}} = {\emph{value}} \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
{[}{\emph{attribute}} \textasciitilde{}= "{\emph{value}}"{]} & All elements with an {\emph{attribute}} attribute that contains a space-separated list of words, one of which is {\emph{value}} \tn 
% Row Count 13 (+ 6)
% Row 4
\SetRowColor{LightBackground}
{[}{\emph{attribute}} |= "{\emph{value}}"{]} & All elements with an {\emph{attribute}} attribute value starting with {\emph{value}} \tn 
% Row Count 17 (+ 4)
% Row 5
\SetRowColor{white}
{\emph{selector}}{[}{\emph{attribute}} \textasciicircum{}= "{\emph{value}}"{]} & All {\emph{selector}} elements with an {\emph{attribute}} attribute value starting with {\emph{value}} \tn 
% Row Count 22 (+ 5)
% Row 6
\SetRowColor{LightBackground}
{\emph{selector}}{[}{\emph{attribute}} \$= "{\emph{value}}"{]} & All {\emph{selector}} elements with an {\emph{attribute}} attribute value ending with {\emph{value}} \tn 
% Row Count 26 (+ 4)
% Row 7
\SetRowColor{white}
{\emph{selector}}{[}{\emph{attribute}} {\emph{= "}}value*"{]} & All {\emph{selector}} elements with an {\emph{attribute}} attribute value containing the substring {\emph{value}} \tn 
% Row Count 31 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Colors and background}}  \tn
% Row 0
\SetRowColor{LightBackground}
color & {\emph{color}} | initial|inherit \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
background & {\emph{bg-color}} {\emph{bg-image}} {\emph{position/bg-size}} {\emph{bg-repeat}} {\emph{bg-origin}} {\emph{bg-clip}} {\emph{bg-attachment}} | initial | inherit \tn 
% Row Count 8 (+ 6)
% Row 2
\SetRowColor{LightBackground}
background-color & {\emph{color}} | transparent {[}def{]} | initial | inherit \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
background-image & {\emph{url}} | none {[}def{]} | initial | inherit \tn 
% Row Count 13 (+ 2)
% Row 4
\SetRowColor{LightBackground}
background-position & {\emph{value}} {[}def: 0\% 0\%{]} | initial | inherit \tn 
% Row Count 15 (+ 2)
% Row 5
\SetRowColor{white}
background-position-y\{\{nl\}\}background-position-x & like background-position, but def: 0\% \tn 
% Row Count 18 (+ 3)
% Row 6
\SetRowColor{LightBackground}
background-size & auto {[}def{]} | {\emph{length}} | {\emph{percentage}} | cover | contain | initial | inherit \tn 
% Row Count 22 (+ 4)
% Row 7
\SetRowColor{white}
background-repeat & repeat {[}def{]} | repeat-x | repeat-y | no-repeat | initial | inherit \tn 
% Row Count 26 (+ 4)
% Row 8
\SetRowColor{LightBackground}
background-clip & border-box {[}def{]} | padding-box | content-box | initial | inherit \tn 
% Row Count 30 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Colors and background (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
background-origin & border-box | padding-box {[}def{]} | content-box | initial | inherit \tn 
% Row Count 4 (+ 4)
% Row 10
\SetRowColor{white}
\seqsplit{background-attachment} & scroll {[}def{]} | fixed | local | initial | inherit \tn 
% Row Count 7 (+ 3)
% Row 11
\SetRowColor{LightBackground}
\seqsplit{background-blend-mode} & normal {[}def{]} | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity \tn 
% Row Count 13 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{They are different ways to tell the colors: name | hex | rgb({\emph{red, green, blue}}) | rgba({\emph{red, green, blue, alpha}}) | hsl({\emph{hue, saturation, lightness}}) | hsla({\emph{hue, saturation, lightness, alpha}}) | hwb}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Border}}  \tn
% Row 0
\SetRowColor{LightBackground}
border & {\emph{border-width}} {\emph{border-style}} {[}req{]} {\emph{border-color}} | initial | inherit \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\seqsplit{border-top/right/bottom/left} & {\emph{border-left/right/top-width}} {[}req{]} {\emph{border-left/right/top-style}} {[}req{]} {\emph{border-left/right/top-color}} | initial | inherit \tn 
% Row Count 10 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{border-block/inline} & {\emph{border-block/inline-width}} {\emph{border-block/inline-style}} {[}req{]} {\emph{border-block/inline-color}} | initial | inherit \tn 
% Row Count 16 (+ 6)
% Row 3
\SetRowColor{white}
\seqsplit{border-block/inline-end/start} & {\emph{border-block/inline-end/start-width}} {\emph{border-block/inline-end/start-style}} {\emph{border-block/inline-end/start-color}} | initial | inherit \tn 
% Row Count 23 (+ 7)
% Row 4
\SetRowColor{LightBackground}
{\bf{width}} & {[}def: medium{]} \tn 
% Row Count 24 (+ 1)
% Row 5
\SetRowColor{white}
border-width & 1 to 4 values: medium | thin | thick | {\emph{length}} | initial | inherit\{\{nl\}\}To take effect, the {\emph{border-style}} must be set \tn 
% Row Count 30 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Border (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\seqsplit{border-top/right/bottom/left-width} & 1 value: like border-width \tn 
% Row Count 2 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{border-block/inline-width} & 1 to 2 values: like border-width\{\{nl\}\}To take effect, the {\emph{border-block/inline-style}} must be set \tn 
% Row Count 7 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{border-block/inline-end/start-width} & 1 value: like border-width\{\{nl\}\}To take effect, the {\emph{border-block/inline-end/start-style}} must be set \tn 
% Row Count 12 (+ 5)
% Row 9
\SetRowColor{white}
{\bf{style}} & {[}def: none{]} \tn 
% Row Count 13 (+ 1)
% Row 10
\SetRowColor{LightBackground}
border-style & 1 to 4 values: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit \tn 
% Row Count 19 (+ 6)
% Row 11
\SetRowColor{white}
\seqsplit{border-top/right/bottom/left-style} & 1 value: like border-style \tn 
% Row Count 21 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\seqsplit{border-block/inline-style} & 1 to 2 values: like border-style \tn 
% Row Count 23 (+ 2)
% Row 13
\SetRowColor{white}
\seqsplit{border-block/inline-end/start-style} & 1 value: like border-style \tn 
% Row Count 25 (+ 2)
% Row 14
\SetRowColor{LightBackground}
{\bf{color}} & {[}def: text color{]} \tn 
% Row Count 26 (+ 1)
% Row 15
\SetRowColor{white}
border-color & 1 to 4 values: {\emph{colors}} | transparent | initial | inherit\{\{nl\}\}To take effect, the {\emph{border-style}} must be set \tn 
% Row Count 32 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Border (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
\seqsplit{border-top/right/bottom/left-color} & 1 value: like border-color\{\{nl\}\}To take effect, the {\emph{border-style}} or {\emph{border-left/right/top-style}} must be set \tn 
% Row Count 6 (+ 6)
% Row 17
\SetRowColor{white}
\seqsplit{border-block/inline-color} & 1 to 2 values: like border-color\{\{nl\}\}To take effect, the {\emph{border-block/inline-style}} must be set \tn 
% Row Count 11 (+ 5)
% Row 18
\SetRowColor{LightBackground}
\seqsplit{border-block/inline-end/start-color} & 1 value: like border-color\{\{nl\}\}To take effect, the {\emph{border-block/inline-end/start-style}} must be set \tn 
% Row Count 16 (+ 5)
% Row 19
\SetRowColor{white}
{\bf{radius}} & {[}def: 0{]} \tn 
% Row Count 17 (+ 1)
% Row 20
\SetRowColor{LightBackground}
border-radius & 1 to 4 values: {\emph{length}} | {\emph{\%}} | initial | inherit \tn 
% Row Count 20 (+ 3)
% Row 21
\SetRowColor{white}
\seqsplit{border-top/right/bottom/left-radius} & 1 value: like border-radius \tn 
% Row Count 22 (+ 2)
% Row 22
\SetRowColor{LightBackground}
\seqsplit{border-end/start-end/start-radius} & 1 to 2 values: like border-radius \tn 
% Row Count 24 (+ 2)
% Row 23
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{image}}} \tn 
% Row Count 25 (+ 1)
% Row 24
\SetRowColor{LightBackground}
border-image & {\emph{border-image-source border-image-slice border-image-width border-image-outset border-image-repeat}} | initial | inherit \tn 
% Row Count 31 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Border (cont)}}  \tn
% Row 25
\SetRowColor{LightBackground}
\seqsplit{border-image-slice} & {\emph{number}} | {\emph{\%}} {[}def: 100\%{]} | fill | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 26
\SetRowColor{white}
\seqsplit{border-image-source} & none {[}def{]} | {\emph{image}} | initial | inherit \tn 
% Row Count 5 (+ 2)
% Row 27
\SetRowColor{LightBackground}
\seqsplit{border-image-width} & {\emph{number}} {[}def: 1{]} | {\emph{length}} | {\emph{\%}} | auto | initial | inherit \tn 
% Row Count 8 (+ 3)
% Row 28
\SetRowColor{white}
\seqsplit{border-image-outset} & {\emph{length}} {[}def: 0{]} | {\emph{number}} | initial | inherit \tn 
% Row Count 11 (+ 3)
% Row 29
\SetRowColor{LightBackground}
\seqsplit{border-image-repeat} & stretch {[}def{]} | repeat | round | space | initial | inherit \tn 
% Row Count 14 (+ 3)
% Row 30
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{table}}} \tn 
% Row Count 15 (+ 1)
% Row 31
\SetRowColor{LightBackground}
border-collapse & separate {[}def{]} | collapse | initial | inherit \tn 
% Row Count 18 (+ 3)
% Row 32
\SetRowColor{white}
border-spacing & 1 or 2 values: {\emph{length}} | initial | inherit\{\{nl\}\}Only works when border-collapse is separate \tn 
% Row Count 23 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.76 cm} x{4.24 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Position}}  \tn
% Row 0
\SetRowColor{LightBackground}
position & static {[}def{]} | absolute | fixed | relative | sticky | initial | inherit \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
bottom\{\{nl\}\}top\{\{nl\}\}right\{\{nl\}\}left & auto {[}def{]} | {\emph{length}} | {\emph{\%}} | initial | inherit\{\{nl\}\}Negatives values are allowed\{\{nl\}\}different depending on the position property \tn 
% Row Count 11 (+ 7)
% Row 2
\SetRowColor{LightBackground}
clip-path & {\emph{clip-source}} | {\emph{basic-shape}} | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit \tn 
% Row Count 18 (+ 7)
% Row 3
\SetRowColor{white}
z-index & auto {[}def{]} | {\emph{number}} | initial | inherit\{\{nl\}\}= stack order of an element \tn 
% Row Count 22 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.6 cm} x{6.4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Display}}  \tn
% Row 0
\SetRowColor{LightBackground}
display & {\emph{value}} {[}def: block or inline{]} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{visibility} & visible {[}def{]} | hidden | collapse | initial | inherit \tn 
% Row Count 3 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there. \newline  \newline visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.6 cm} x{6.4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Float}}  \tn
% Row 0
\SetRowColor{LightBackground}
float & none {[}def{]} | left | right | initial | inherit \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
clear & none {[}def{]} | left | right | both | initial | inherit \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{box-sizing} & content-box {[}def{]} | border-box | initial | inherit \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{List}}  \tn
% Row 0
\SetRowColor{LightBackground}
list-style & {\emph{list-style-type}} {\emph{list-style-position}} {\emph{list-style-image}} | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{list-style-type} & {\emph{value}} {[}def: disc{]} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{list-style-position} & inside | outside {[}def{]} | initial | inherit \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{list-style-image} & none {[}def{]} | {\emph{url}} | initial | inherit \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.92 cm} x{6.08 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Table}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{caption-side} & top | bottom | initial | inherit \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\seqsplit{empty-cells} & show | hide | initial | inherit \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{table-layout} & auto {[}def{]} | fixed | initial | inherit \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.08 cm} x{3.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Units}}  \tn
% Row 0
\SetRowColor{LightBackground}
0 & unit can be omitted \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{Absolute Lengths}} & not recommended \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{cm, mm, in, px, pt, pc} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Relative Lengths}}} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{em, ex, ch, rem, vw, vh, vmin, vmax, \%} \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{A whitespace cannot appear between the number and the unit}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Column}}  \tn
% Row 0
\SetRowColor{LightBackground}
columns & auto {[}def{]} | {\emph{column-width}} {\emph{column-count}} | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{column-count} & {\emph{number}} | auto {[}def{]} | initial | inherit \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{column-width} & auto {[}def{]} | {\emph{length}} | initial | inherit \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
column-fill & balance {[}def{]} | auto | initial | inherit \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
column-span & none {[}def{]} | all | initial | inherit \tn 
% Row Count 11 (+ 2)
% Row 5
\SetRowColor{white}
column-rule & {\emph{column-rule-width}} {\emph{column-rule-style}} {\emph{column-rule-color}} | initial | inherit \tn 
% Row Count 14 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{column-rule-width} & medium {[}def{]} | thin | thick | {\emph{length}} | initial | inherit \tn 
% Row Count 17 (+ 3)
% Row 7
\SetRowColor{white}
\seqsplit{column-rule-style} & none {[}def{]} | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit \tn 
% Row Count 21 (+ 4)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{column-rule-color} & {\emph{color}} {[}def: current color{]} | initial | inherit \tn 
% Row Count 23 (+ 2)
% Row 9
\SetRowColor{white}
column-gap & {\emph{length}} | normal | initial | inherit \tn 
% Row Count 25 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.12 cm} x{4.88 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Transition}}  \tn
% Row 0
\SetRowColor{LightBackground}
transition & {\emph{transition-property}} {\emph{transition-duration}} {\emph{transition-timing-function}} {\emph{transition-delay}} | initial | inherit \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\seqsplit{transition-property} & none | all {[}def{]} | {\emph{property}} | initial | inherit \tn 
% Row Count 8 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{transition-duration} & {\emph{time}} {[}def: 0s{]} | initial | inherit \tn 
% Row Count 10 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{transition-timing-function} & linear | ease {[}def{]} | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier({\emph{n,n,n,n}}) | initial | inherit \tn 
% Row Count 17 (+ 7)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{transition-delay} & {\emph{time}} {[}def: 0s{]} | initial | inherit \tn 
% Row Count 19 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Counter}}  \tn
% Row 0
\SetRowColor{LightBackground}
content & normal {[}def{]} | none | counter | attr | {\emph{string}} | open-quote | close-quote | no-open-quote | no-close-quote | {\emph{url}} | initial | inherit\{\{nl\}\}Used with ::before and ::after \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\seqsplit{counter-increment} & none {[}def{]} | {\emph{id}} | initial | inherit \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{counter-reset} & none {[}def{]}| {\emph{id number}} | initial | inherit \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{counter({\emph{countername}}, {\emph{counterstyle}})} \tn 
% Row Count 12 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Icons}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Font Awesome Icons} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{Bootstrap Icons} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Google Icons} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Specificity Hierarchy}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{1. Inline styles} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{2. IDs} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{3. Classes, pseudo-classes, attribute selectors} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{4. Elements and pseudo-elements} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{!important can overide this hierachy}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.36 cm} x{6.64 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Insert CSS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{external} & inside \textless{}head\textgreater{}: \textless{}link rel="stylesheet" href="{\emph{mystyle.css}}"\textgreater{} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\seqsplit{internal} & inside \textless{}head\textgreater{}: inside \textless{}style\textgreater{} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{inline} & inside and element: using the style attribute \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-class selectors}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Based on a certain state} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Syntax & \seqsplit{`selector:pseudo-class} \{\{\{nl\}\}    property: value;\{\{nl\}\}\}` \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\emph{selector}}:active & The active link \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
{\emph{selector}}:checked & All checked {\emph{selector}} elements \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
{\emph{selector}}:disabled & All disabled {\emph{selector}} elements \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
{\emph{selector}}:empty & All {\emph{selector}} elements that has no children \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
{\emph{selector}}:enabled & All enabled {\emph{selector}} elements \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
{\emph{selector}}:first-child & All {\emph{selector}} elements that is the first child of its parent \tn 
% Row Count 16 (+ 3)
% Row 8
\SetRowColor{LightBackground}
{\emph{selector}}:first-of-type & All {\emph{selector}} elements that is the first {\emph{selector}} element of its parent \tn 
% Row Count 20 (+ 4)
% Row 9
\SetRowColor{white}
{\emph{selector}}:focus & The {\emph{selector}} element that has focus \tn 
% Row Count 22 (+ 2)
% Row 10
\SetRowColor{LightBackground}
{\emph{selector}}:hover & Links on mouse over \tn 
% Row Count 23 (+ 1)
% Row 11
\SetRowColor{white}
{\emph{selector}}:in-range & {\emph{selector}} elements with a value within a specified range \tn 
% Row Count 26 (+ 3)
% Row 12
\SetRowColor{LightBackground}
{\emph{selector}}:invalid & All {\emph{selector}} elements with an invalid value \tn 
% Row Count 29 (+ 3)
% Row 13
\SetRowColor{white}
{\emph{selector}}:lang({\emph{language}}) & All {\emph{selector}} elements with a lang attribute value starting with {\emph{language}} \tn 
% Row Count 33 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-class selectors (cont)}}  \tn
% Row 14
\SetRowColor{LightBackground}
{\emph{selector}}:last-child & All {\emph{selector}} elements that is the last child of its parent \tn 
% Row Count 3 (+ 3)
% Row 15
\SetRowColor{white}
{\emph{selector}}:last-of-type & All {\emph{selector}} elements that is the last {\emph{selector}} element of its parent \tn 
% Row Count 7 (+ 4)
% Row 16
\SetRowColor{LightBackground}
{\emph{selector}}:link & All unvisited links \tn 
% Row Count 8 (+ 1)
% Row 17
\SetRowColor{white}
{\emph{selector}}:not({\emph{selector}}) & All elements that is not a {\emph{selector}} element \tn 
% Row Count 11 (+ 3)
% Row 18
\SetRowColor{LightBackground}
{\emph{selector}}:nth-child({\emph{n}}) & All {\emph{selector}} elements that is the second child of its parent \tn 
% Row Count 14 (+ 3)
% Row 19
\SetRowColor{white}
{\emph{selector}}:nth-last-child({\emph{n}}) & All {\emph{selector}} elements that is the second child of its parent, counting from the last child \tn 
% Row Count 19 (+ 5)
% Row 20
\SetRowColor{LightBackground}
{\emph{selector}}:nth-last-of-type({\emph{n}}) & All {\emph{selector}} elements that is the second {\emph{selector}} element of its parent, counting from the last child \tn 
% Row Count 24 (+ 5)
% Row 21
\SetRowColor{white}
{\emph{selector}}:nth-of-type({\emph{n}}) & All {\emph{selector}} elements that is the {\emph{n}}th {\emph{selector}} element of its parent \tn 
% Row Count 28 (+ 4)
% Row 22
\SetRowColor{LightBackground}
{\emph{selector}}:only-of-type & All {\emph{selector}} elements that is the only {\emph{selector}} element of its parent \tn 
% Row Count 32 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-class selectors (cont)}}  \tn
% Row 23
\SetRowColor{LightBackground}
{\emph{selector}}:only-child & All {\emph{selector}} elements that is the only child of its parent \tn 
% Row Count 3 (+ 3)
% Row 24
\SetRowColor{white}
{\emph{selector}}:optional & {\emph{selector}} elements with no "required" attribute \tn 
% Row Count 6 (+ 3)
% Row 25
\SetRowColor{LightBackground}
{\emph{selector}}:out-of-range & {\emph{selector}} elements with a value outside a specified range \tn 
% Row Count 9 (+ 3)
% Row 26
\SetRowColor{white}
{\emph{selector}}:read-only & {\emph{selector}} elements with a "readonly" attribute specified \tn 
% Row Count 12 (+ 3)
% Row 27
\SetRowColor{LightBackground}
{\emph{selector}}:read-write & {\emph{selector}} elements with no "readonly" attribute \tn 
% Row Count 15 (+ 3)
% Row 28
\SetRowColor{white}
{\emph{selector}}:required & {\emph{selector}} elements with a "required" attribute specified \tn 
% Row Count 18 (+ 3)
% Row 29
\SetRowColor{LightBackground}
{\emph{selector}}:root & The document's root element \tn 
% Row Count 20 (+ 2)
% Row 30
\SetRowColor{white}
{\emph{selector}}:target & The current active \#news element (clicked on a URL containing that anchor name) \tn 
% Row Count 24 (+ 4)
% Row 31
\SetRowColor{LightBackground}
{\emph{selector}}:valid & All {\emph{selector}} elements with a valid value \tn 
% Row Count 26 (+ 2)
% Row 32
\SetRowColor{white}
{\emph{selector}}:visited & All visited links \tn 
% Row Count 28 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.36 cm} x{4.64 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Margin}}  \tn
% Row 0
\SetRowColor{LightBackground}
margin & 1 to 4 values: {\emph{length}} {[}def: 0{]} | {\emph{\%}} | auto {[}horizontally center{]} | initial | inherit; \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\seqsplit{margin-bottom/left/right/top} & 1 value: like margin \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{margin-block/inline} & 1 to 2 values: like margin, but auto by default \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\seqsplit{margin-block/inline-end/start} & 1 value: like margin-block/inline \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Negative values are allowed\{\{nl\}\}Margin Collapse: top and bottom (not left and right !) margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.44 cm} x{4.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Padding}}  \tn
% Row 0
\SetRowColor{LightBackground}
padding & 1 to 4 values: {\emph{length}} {[}def:0{]} | {\emph{\%}} | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{padding-top/right/bottom/left} & 1 value: like padding \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{padding-block/inline} & 1 to 2 values: like padding, but def: auto \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{padding-block/inline-end/start} & 1 value: like padding-block/inline \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
box-sizing & content-box {[}def, border and padding not included{]}| border-box {[}content, padding and border included{]} | initial | inherit \tn 
% Row Count 15 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Padding and Element Width: if an element has a specified width, the padding added to that element will be added to the total width of the element.\{\{nl\}\}To keep the given width, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Box model}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/manongerard_1698095368_box-model.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.32 cm} x{5.68 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Height and width}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{height/width} & {\emph{length}} | {\emph{\%}} | auto {[}def{]} | initial | inherit\{\{nl\}\}min/max-height/width override the height/width property \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\seqsplit{max-height/width} & {\emph{length}} | {\emph{\%}} | none {[}def{]} | initial | inherit\{\{nl\}\}Improves the browser's handling of small windows \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{min-height/width} & {\emph{length}} | {\emph{\%}} | initial | inherit \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The height and width properties do not include padding, borders, or margins.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Text}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{alignment and direction}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
text-align & left {[}def: if direction is ltr{]} | right {[}def: if direction is rtl{]} | center | justify | initial | inherit \tn 
% Row Count 6 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{text-align-last} & auto {[}def{]} | left | right | center | justify | start | end | initial | inherit \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
direction & ltr {[}def{]} | rtl | initial | inherit \tn 
% Row Count 12 (+ 2)
% Row 4
\SetRowColor{LightBackground}
unicode-bidi & normal {[}def{]} | embed | bidi-override | initial | inherit \tn 
% Row Count 15 (+ 3)
% Row 5
\SetRowColor{white}
vertical-align & baseline {[}def{]} | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit \tn 
% Row Count 20 (+ 5)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{decoration}}} \tn 
% Row Count 21 (+ 1)
% Row 7
\SetRowColor{white}
\seqsplit{text-decoration} & {\emph{text-decoration-line}} {[}req{]} {\emph{text-decoration-color}} {\emph{text-decoration-style}} {\emph{text-decoration-thickness}} | initial | inherit \tn 
% Row Count 27 (+ 6)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{text-decoration-line} & none {[}def{]} | underline | overline | line-through | initial | inherit\{\{nl\}\}Can combine more than 1 value \tn 
% Row Count 32 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Text (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
\seqsplit{text-decoration-color} & {\emph{color}} {[}def: {\emph{current color}}{]} | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 10
\SetRowColor{white}
\seqsplit{text-decoration-style} & solid {[}def{]} | double | dotted | dashed | wavy | initial | inherit \tn 
% Row Count 6 (+ 3)
% Row 11
\SetRowColor{LightBackground}
\seqsplit{text-decoration-thickness} & auto {[}def{]} | from-font | {\emph{length/percentage}} | initial | inherit \tn 
% Row Count 9 (+ 3)
% Row 12
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{transformation}}} \tn 
% Row Count 10 (+ 1)
% Row 13
\SetRowColor{LightBackground}
text-transform & none {[}def{]} | capitalize | uppercase | lowercase | initial | inherit \tn 
% Row Count 13 (+ 3)
% Row 14
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{text spacing}}} \tn 
% Row Count 14 (+ 1)
% Row 15
\SetRowColor{LightBackground}
text-indent & {\emph{length}} {[}def: 0{]} | {\emph{\%}} | initial | inherit\{\{nl\}\}Negative values are allowed \tn 
% Row Count 18 (+ 4)
% Row 16
\SetRowColor{white}
letter-spacing & normal {[}def{]} | {\emph{length}} | initial | inherit\{\{nl\}\}Negative value also allowed \tn 
% Row Count 22 (+ 4)
% Row 17
\SetRowColor{LightBackground}
line-height & normal {[}def{]} | {\emph{number}} | {\emph{length}} | {\emph{\%}} | initial | inherit \tn 
% Row Count 25 (+ 3)
% Row 18
\SetRowColor{white}
word-spacing & normal {[}def{]} | {\emph{length}} | initial | inherit \tn 
% Row Count 27 (+ 2)
% Row 19
\SetRowColor{LightBackground}
white-space & normal {[}def{]} | nowrap | pre | pre-line | pre-wrap | initial | inherit \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Text (cont)}}  \tn
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{shadow}}} \tn 
% Row Count 1 (+ 1)
% Row 21
\SetRowColor{white}
text-shadow & {\emph{h-shadow}} {[}req{]} {\emph{v-shadow}} {[}req{]} {\emph{blur-radius}} {[}def: 0{]} {\emph{color}} | none {[}def{]} | initial | inherit \tn 
% Row Count 6 (+ 5)
% Row 22
\SetRowColor{LightBackground}
text-justify & auto {[}def{]} | inter-word | inter-character | none | initial | inherit \tn 
% Row Count 9 (+ 3)
% Row 23
\SetRowColor{white}
\seqsplit{text-orientation} & mixed {[}def{]} | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit\{\{nl\}\}Works only when writing-mode is set to vertical \tn 
% Row Count 16 (+ 7)
% Row 24
\SetRowColor{LightBackground}
text-overflow & clip {[}def{]} | ellipsis | {\emph{string}} | initial | inherit\{\{nl\}\}requires white-space: nowrap; overflow: hidden \tn 
% Row Count 21 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{text-decoration: none; is used to remove the underline from links:\{\{nl\}\}`a \{ text-decoration: none; \}`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.72 cm} x{5.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Font}}  \tn
% Row 0
\SetRowColor{LightBackground}
font & {\emph{font-style}} {\emph{font-variant}} {\emph{font-weight}} {\emph{font-size/line-height}} {[}req{]} {\emph{font-family}} {[}req{]} | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
font-style & normal {[}def{]} | italic | oblique | initial | inherit \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
font-variant & normal {[}def{]} | small-caps | initial | inherit \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
font-weight & normal {[}def{]} | bold | bolder | lighter | number | initial | inherit \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
font-size & medium {[}def{]} | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit \tn 
% Row Count 19 (+ 5)
% Row 5
\SetRowColor{white}
font-family & {\emph{family-name}} | {\emph{generic-family}} | initial | inherit\{\{nl\}\}Start with the font you want, {\emph{{[}then add backup fonts,{]}}} and always end with a generic family. Separate each value with a comma. \tn 
% Row Count 27 (+ 8)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{font-feature-settings} & normal {[}def{]} | feature-value {\emph{{[}1 | 0 | on | off{]}}} \tn 
% Row Count 29 (+ 2)
% Row 7
\SetRowColor{white}
font-kerning & auto | normal | none \tn 
% Row Count 30 (+ 1)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.72 cm} x{5.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Font (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
\seqsplit{font-size-adjust} & {\emph{number}} | none | initial | inherit \tn 
% Row Count 2 (+ 2)
% Row 9
\SetRowColor{white}
font-stretch & ultra-condensed | extra-condensed | condensed | semi-condensed | normal {[}def{]} | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit \tn 
% Row Count 9 (+ 7)
% Row 10
\SetRowColor{LightBackground}
\seqsplit{font-variant-caps} & normal {[}def{]} | \seqsplit{small-caps|all-small-caps} | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit | unset \tn 
% Row Count 14 (+ 5)
% Row 11
\SetRowColor{white}
@font-face & font-family {[}req{]} src {[}req{]} font-stretch font-style font-weight unicode-range \tn 
% Row Count 17 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Outline}}  \tn
% Row 0
\SetRowColor{LightBackground}
outline & {\emph{outline-width}} {\emph{outline-style}} {[}def: invert{]} {\emph{outline-color}} | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{outline-width} & medium {[}def{]} | thin | thick | {\emph{length}} | initial | inherit\{\{nl\}\}Must Always declare outline-style before \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{outline-style} & none {[}def{]} | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit \tn 
% Row Count 11 (+ 4)
% Row 3
\SetRowColor{white}
\seqsplit{outline-color} & color {[}def: {\emph{current color}}{]} | initial | inherit\{\{nl\}\}Must Always declare outline-style before \tn 
% Row Count 15 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{outline-offset} & {\emph{length}} {[}def: 0{]} | initial | inherit \tn 
% Row Count 17 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Math functions}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{calc({\emph{expression}})} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{max({\emph{value1}}, {\emph{value2}}, ..., {\emph{valueX}})} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{min({\emph{value1}}, {\emph{value2}}, ..., {\emph{valueX}})} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.16 cm} x{5.84 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Overflow}}  \tn
% Row 0
\SetRowColor{LightBackground}
overflow & visible {[}def{]} | hidden | clip | scroll | auto | initial | inherit \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{overflow-wrap} & normal {[}def{]} | anywhere | break-word | initial | inherit \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{overflow-x/y} & visible {[}def{]} | hidden | scroll | auto | initial | inherit \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{overflow-anchor} & auto {[}def{]} | none | initial | inherit \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Only works for block elements with a specified height}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.08 cm} x{5.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Other}}  \tn
% Row 0
\SetRowColor{LightBackground}
/* ... */ & Comment \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
opacity & {\emph{number}} {[}def: 1{]} | initial | inherit \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Navigation} bar & \seqsplit{https://www.w3schools.com/css/css\_navbar.asp} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
Dropdown & \seqsplit{https://www.w3schools.com/css/css\_dropdowns.asp} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Dropdown are useful for addition info to help the users}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}