\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-partiel.pdf)
  /Creator (Cheatography)
  /Author ({[}deleted{]})
  /Subject (CSS Partiel 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}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\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 Partiel Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{{[}deleted{]}} via \textcolor{DarkBackground}{\uline{cheatography.com/77669/cs/19058/}}}
\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-77669} \\
  \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 10th March, 2019.\\
   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 12-4}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{body \{ \newline     margin: 0; \newline     counter-reset: section, nav; \newline \} \newline  \newline \#menu, \#contents \{ \newline     border: solid 1px \#930; \newline     margin: 10px; \newline \} \newline  \newline \#menu \{ \newline     margin-bottom: 20px; \newline     background-color: \#fa0; \newline \} \newline  \newline \#menu ul \{ \newline     display: list-item; \newline     list-style: none; \newline     padding-left: 0; \newline     margin: 5px; \newline \} \newline  \newline \#menu ul li \{ \newline     display: inline-block; \newline     margin-left: 5px; \newline     font-weight: bold; \newline  \newline \} \newline  \newline \#menu ul li:before \{ \newline     content: "\textbackslash{}25A0"; \newline     color: \#930; \newline     display: inline-block; \newline \} \newline  \newline \#menu ul li a \{ \newline     text-decoration: none; \newline     color: \#930; \newline \} \newline  \newline \#contents \{ \newline     padding: 20px; \newline     position: relative; \newline \} \newline  \newline .introduction \{ \newline     display: flex; \newline     align-items: flex-start; \newline \} \newline  \newline .introduction h1 \{ \newline     background-color: \#fa0; \newline     border: solid 1px \#930; \newline     text-transform: uppercase; \newline     padding: 15px; \newline     margin: 0; \newline     min-width: 320px; \newline \} \newline  \newline .introduction h1::after \{ \newline     content: " From Wikipedia, the free encyclopedia"; \newline     font-size: 0.35em; \newline     text-transform: none; \newline     display: block; \newline \} \newline  \newline .introduction p \{ \newline     font-style: italic; \newline     font-size: 0.7em; \newline     margin: 0; \newline     margin-left: 25px; \newline     text-align: right; \newline \} \newline  \newline .introduction + .section \{ \newline     border-bottom: solid 1px \#fa0; \newline \} \newline  \newline .section h2 \{ \newline     text-decoration: underline; \newline \} \newline  \newline .section h2:before \{ \newline     counter-increment: section; \newline     content: counter(section) ". "; \newline \} \newline  \newline .section p \{ \newline     text-align: justify; \newline \} \newline  \newline \#conclusion \{ \newline     background-color: \#930; \newline     color: white; \newline     display: inline-block; \newline     position: absolute; \newline     right: 15px; \newline     bottom: -20px; \newline \} \newline  \newline \#conclusion p\{ \newline     margin: 1px; \newline \} \newline  \newline \#conclusion p:before \{ \newline     content: "("; \newline \} \newline  \newline \#conclusion p:after \{ \newline     content: ")"; \newline \} \newline  \newline @media (max-width: 1000px) \{ \newline  \newline     \#menu, \#contents \{ \newline         border: 0px; \newline         margin: 0; \newline     \} \newline  \newline     \#contents \{ \newline         padding: 0; \newline     \} \newline  \newline     \#menu \{ \newline         margin-bottom: 0; \newline         background-color: \#fff; \newline     \} \newline  \newline     \#menu ul \{ \newline         display: none; \newline         margin: 0; \newline     \} \newline  \newline     \#menu::before \{ \newline         content: "☰"; \newline         color: white; \newline         background-color: \#02b; \newline         display: block; \newline     \} \newline     \#menu:hover ul \{ \newline         display: block; \newline     \} \newline  \newline     \#menu ul li \{ \newline         background-color: \#777; \newline         text-align: center; \newline         border-radius: 5px; \newline         display: block; \newline         margin: 0; \newline     \} \newline     \#menu ul li:before \{ \newline         content: ""; \newline     \} \newline  \newline     \#menu ul li a \{ \newline         text-decoration: none; \newline         color: white; \newline         text-transform: uppercase; \newline         font-weight: normal; \newline     \} \newline  \newline     \#menu ul li a::before \{ \newline         counter-increment: nav; \newline         content: counter(nav) " - "; \newline     \} \newline  \newline     .introduction \{ \newline         display: block; \newline     \} \newline  \newline     .introduction h1 \{ \newline         background-color: \#fff; \newline         border: 0; \newline         text-transform: none; \newline         padding: 0; \newline         min-width: 0; \newline     \} \newline  \newline     .introduction h1::after \{ \newline         content: ""; \newline         display: none; \newline     \} \newline  \newline     .introduction p \{ \newline         font-style: normal; \newline         font-size: 1em; \newline         margin: 0; \newline         margin-left: 0; \newline         text-align: left; \newline     \} \newline  \newline     .introduction + .section \{ \newline         border-bottom: solid 1px black; \newline     \} \newline  \newline     .section, .introduction \{ \newline         border-bottom: solid 1px black; \newline         padding: 20px 0; \newline     \} \newline  \newline     .introduction h1, .section h2 \{ \newline         text-align: center; \newline         text-decoration: none; \newline     \} \newline  \newline     .introduction h1:before, .section h2:before \{ \newline         counter-increment: section; \newline         content: counter(section) " - "; \newline     \} \newline  \newline     .section p \{ \newline         text-align: left; \newline     \} \newline  \newline     \#conclusion \{ \newline         position: inherit; \newline         display: block; \newline         color: white; \newline         background-color: black; \newline         right: 0; \newline         bottom: 0; \newline     \} \newline  \newline     \#conclusion p \{ \newline         font-size: 0.8em; \newline         text-align: right; \newline     \} \newline  \newline     \#conclusion p:before \{ \newline         content: ""; \newline     \} \newline  \newline     \#conclusion p:after \{ \newline         content: ""; \newline     \} \newline \}} \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}{HTML 12-4}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}!DOCTYPE html\textgreater{} \newline \textless{}html\textgreater{} \newline \textless{}head\textgreater{} \newline 	\textless{}title\textgreater{}Web Applications\textless{}/title\textgreater{} \newline 	\textless{}meta \seqsplit{http-equiv="content-type"} content="text/html; charset=UTF-8"\textgreater{} \newline 	\textless{}link rel="StyleSheet" href="Exercice-12-3.css" type="text/css"\textgreater{} \newline \textless{}/head\textgreater{} \newline \textless{}body\textgreater{} \newline \textless{}div id="menu"\textgreater{} \newline 	\textless{}ul\textgreater{} \newline 		\textless{}li\textgreater{}\textless{}a href="\#introduction"\textgreater{}Introduction\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline 		\textless{}li\textgreater{}\textless{}a href="\#history"\textgreater{}History\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline 		\textless{}li\textgreater{}\textless{}a href="\#interface"\textgreater{}Interface\textless{}/a\textgreater{}\textless{}/li\textgreater{} \newline 	\textless{}/ul\textgreater{} \newline \textless{}/div\textgreater{} \newline \textless{}div id="contents"\textgreater{} \newline 	\textless{}div class="introduction"\textgreater{} \newline 		\textless{}h1 id="introduction"\textgreater{}Web application\textless{}/h1\textgreater{} \newline 		\textless{}p\textgreater{}A web application is an application that is accessed by users over a network such as the Internet or an intranet. \newline 			The term may also mean a computer software application that is coded in a browser-supported programming language \newline 			and reliant on a common web browser to render the application executable.\textless{}/p\textgreater{} \newline 	\textless{}/div\textgreater{} \newline  \newline 	\textless{}div class="section"\textgreater{} \newline 		\textless{}h2 id="history"\textgreater{}History\textless{}/h2\textgreater{} \newline 		\textless{}p\textgreater{}In earlier computing models, e.g. in client-server, the load for the application was shared between code on the \newline 			server and code installed on each client locally. In other words, an application had its own client program \newline 			which served as its user interface and had to be separately installed on each user's personal computer.\textless{}/p\textgreater{} \newline 		\textless{}p\textgreater{}In contrast, web applications use web documents written in a standard format such as HTML and JavaScript, \newline 			which are supported by a variety of web browsers. Web applications can be considered as a specific variant \newline 			of client-server software where the client software is downloaded to the client machine when visiting the \newline 			relevant web page, using standard procedures such as HTTP. During the session, the web browser interprets and \newline 			displays the pages, and acts as the universal client for any web application.\textless{}/p\textgreater{} \newline 	\textless{}/div\textgreater{} \newline  \newline 	\textless{}div class="section"\textgreater{} \newline 		\textless{}h2 id="interface"\textgreater{}Interface\textless{}/h2\textgreater{} \newline 		\textless{}p\textgreater{}Through Java, JavaScript and other technologies, application-specific methods such as \newline 			drawing on the screen, playing audio, and access to the keyboard and mouse are all possible. Many services have \newline 			worked to combine all of these into a more familiar interface that adopts the appearance of an operating system. \newline 			General purpose techniques such as drag and drop are also supported by these technologies.\textless{}/p\textgreater{} \newline 	\textless{}/div\textgreater{} \newline  \newline 	\textless{}div class="conclusion" id="conclusion"\textgreater{} \newline 		\textless{}p\textgreater{}This page was last modified on 27 September 2012 at 19:59.\textless{}/p\textgreater{} \newline 	\textless{}/div\textgreater{} \newline \textless{}/div\textgreater{} \newline \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{}} \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}{12-1 CSS}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{/{\emph{ Corps }}/ \newline  \newline html \{ \newline     background-color: \#ccc; \newline \} \newline  \newline body \{ \newline     font-family: sans-serif; \newline     background-color: white; \newline     width: 85\%; \newline     margin-left: auto; \newline     margin-right: auto; \newline     border-left: 1px solid black; \newline     border-right: 1px solid black; \newline     margin-top: 0; \newline     padding: 20px; \newline \} \newline  \newline /{\emph{ Menu }}/ \newline  \newline \#menu \{ \newline     display: none; \newline \} \newline  \newline /{\emph{ Titres }}/ \newline  \newline h1, \newline h2 \{ \newline     color: \#66f; \newline \} \newline  \newline h1 \{ \newline     text-align: center; \newline     margin-top: 0; \newline \} \newline  \newline h2 \{ \newline     font-style: italic; \newline \} \newline  \newline /{\emph{ Paragraphes }}/ \newline  \newline .introduction p::first-letter, \newline .section p::first-letter \newline  \{ \newline     font-size: 150\%; \newline \} \newline  \newline .introduction p, \newline .section p \newline  \{ \newline     text-indent: 30px; \newline     text-align: justify; \newline \} \newline  \newline /{\emph{ Conclusion }}/ \newline  \newline .conclusion \{ \newline     border-top: 1px solid \#999; \newline     font-size: 80\%; \newline     text-align: right; \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}