\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{{[}deleted{]}}
\pdfinfo{
  /Title (css-cheat-sheet.pdf)
  /Creator (Cheatography)
  /Author ({[}deleted{]})
  /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}{00676B}
\definecolor{LightBackground}{HTML}{EFF5F5}
\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}{{[}deleted{]}} via \textcolor{DarkBackground}{\uline{cheatography.com/30467/cs/9077/}}}
\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}{[}deleted{]} \\
  \uline{cheatography.com/deleted-30467} \\
  \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 12th September, 2016.\\
   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*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS box model}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{The CSS box model is essentially a box that wraps around every HTML element.} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Content}}   \newline {\bf{Padding}}   \newline {\bf{Border}}   \newline {\bf{Margin}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS length units}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{cm}} - centimeters \newline % Row Count 1 (+ 1)
{\bf{em}} - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size) \newline % Row Count 4 (+ 3)
{\bf{in}} - inches \newline % Row Count 5 (+ 1)
{\bf{mm}} - millimeters \newline % Row Count 6 (+ 1)
{\bf{pc}} - picas (1 pc = 12 pt = 1/6th of an inch) \newline % Row Count 7 (+ 1)
{\bf{pt}} - points (1 pt = 1/72nd of an inch) \newline % Row Count 8 (+ 1)
{\bf{px}} - pixels (1 px = 1/96th of an inch)% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS position Property}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute) \newline % Row Count 3 (+ 3)
{\bf{position: static;}} - HTML elements are positioned static {\bf{by default}}. Static positioned elements are {\bf{NOT}} affected by the {\bf{top, bottom, left, and right}} properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page: \newline % Row Count 10 (+ 7)
{\bf{position: relative;}} - An element with position: relative; is positioned {\bf{relative to its normal position}}. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. \newline % Row Count 17 (+ 7)
{\bf{position: fixed;}} -  An element with position: fixed; is positioned {\bf{relative to the viewport}}, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. \newline % Row Count 23 (+ 6)
{\bf{position: absolute;}} - An element with position: absolute; is positioned {\bf{relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed)}}. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. A fixed element does not leave a gap in the page where it would normally have been located.% Row Count 32 (+ 9)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS3 Features}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Media Queries \newline % Row Count 1 (+ 1)
Box Sizing \newline % Row Count 2 (+ 1)
Webfonts @font-face \newline % Row Count 3 (+ 1)
Animations and Transitions \newline % Row Count 4 (+ 1)
Gradients% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{3 main ways to apply CSS styles}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Inline}} - HTML elements may have CSS applied to them via the STYLE attribute. \newline % Row Count 2 (+ 2)
{\bf{Embedded}} - By placing the code in a STYLE element within the HEAD element. \newline % Row Count 4 (+ 2)
{\bf{Linked/ Imported }} - Place the CSS in an external file and link it via a link element.% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS Display property}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The display CSS property specifies the type of rendering box used for an element. \newline % Row Count 2 (+ 2)
A block element is an element that takes up the full width available, and has a line break before and after it. \textless{}h1\textgreater{}, \textless{}p\textgreater{}, \textless{}li\textgreater{}, and \textless{}div\textgreater{} are all examples of block elements. \newline % Row Count 6 (+ 4)
An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. \textless{}a\textgreater{} and \textless{}span\textgreater{} are examples of inline elements. \newline % Row Count 10 (+ 4)
display: inline; \newline % Row Count 11 (+ 1)
display: block; \newline % Row Count 12 (+ 1)
display: inline-block; \newline % Row Count 13 (+ 1)
display: list-item; \newline % Row Count 14 (+ 1)
display: table;% Row Count 15 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS Cascade}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{There are three main concepts that control the order in which CSS declarations are applied: \newline % Row Count 2 (+ 2)
1. {\bf{Importance}} - !important keyword \newline % Row Count 3 (+ 1)
2. {\bf{Specificity}} \newline % Row Count 4 (+ 1)
- Inline styles \newline % Row Count 5 (+ 1)
- IDs \newline % Row Count 6 (+ 1)
- Classes attributes and pseudo-classes \newline % Row Count 7 (+ 1)
- Elements and pseudo-elements  \newline % Row Count 8 (+ 1)
3. {\bf{Source order}} \newline % Row Count 9 (+ 1)
All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions.% Row Count 13 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS Selectors}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Type selector}} - selects which elements in the DOM the rule applies to. - eg h1, p \newline % Row Count 2 (+ 2)
In addition to tag names, you can use attribute values in selectors. This allows your rules to be more specific. \newline % Row Count 5 (+ 3)
{\bf{Class selectors}} - Multiple elements in a document can have the same class value. - eg {\bf{.class}} \newline % Row Count 8 (+ 3)
{\bf{ID selectors}} - The ID name must be unique in the document. - eg {\bf{\#id}} \newline % Row Count 10 (+ 2)
{\bf{Attribute Selectors}} - You can specify other attributes by using square brackets. Inside the brackets you put the attribute name, optionally followed by a matching operator and a value. eg  {\bf{{[}type='button'{]}}} \newline % Row Count 15 (+ 5)
{\bf{Pseudo-classes selectors}} - A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.  \newline % Row Count 20 (+ 5)
    :link \newline % Row Count 21 (+ 1)
    :visited \newline % Row Count 22 (+ 1)
    :active \newline % Row Count 23 (+ 1)
    :hover \newline % Row Count 24 (+ 1)
    :focus \newline % Row Count 25 (+ 1)
    :first-child \newline % Row Count 26 (+ 1)
    :last-child \newline % Row Count 27 (+ 1)
    :nth-child \newline % Row Count 28 (+ 1)
    :nth-last-child \newline % Row Count 29 (+ 1)
    :nth-of-type \newline % Row Count 30 (+ 1)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS Selectors (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{    :first-of-type \newline % Row Count 1 (+ 1)
    :last-of-type \newline % Row Count 2 (+ 1)
    :empty \newline % Row Count 3 (+ 1)
    :target \newline % Row Count 4 (+ 1)
    :checked \newline % Row Count 5 (+ 1)
    :enabled \newline % Row Count 6 (+ 1)
    :disabled \newline % Row Count 7 (+ 1)
{\bf{Pseudo-elements}} -  Added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only  the first line of an element specified by the selector. Double colon notation \newline % Row Count 13 (+ 6)
    ::after \newline % Row Count 14 (+ 1)
    ::before \newline % Row Count 15 (+ 1)
    ::first-letter \newline % Row Count 16 (+ 1)
    ::first-line \newline % Row Count 17 (+ 1)
    ::selection \newline % Row Count 18 (+ 1)
    ::backdrop \newline % Row Count 19 (+ 1)
    ::placeholder \newline % Row Count 20 (+ 1)
    ::marker \newline % Row Count 21 (+ 1)
    ::spelling-error \newline % Row Count 22 (+ 1)
    ::grammar-error% Row Count 23 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}