\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{Dave Child (DaveChild)} \pdfinfo{ /Title (css2.pdf) /Creator (Cheatography) /Author (Dave Child (DaveChild)) /Subject (CSS2 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}{D57C29} \definecolor{LightBackground}{HTML}{FCF6F1} \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{CSS2 Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{Dave Child (DaveChild)} via \textcolor{DarkBackground}{\uline{cheatography.com/1/cs/14/}}} \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}Dave Child (DaveChild) \\ \uline{cheatography.com/davechild} \\ \uline{\seqsplit{aloneonahill}.com} \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 19th October, 2011.\\ Updated 25th February, 2020.\\ 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{1.24425 cm} x{3.73275 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Selectors}} \tn % Row 0 \SetRowColor{LightBackground} * & All elements \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} div & \textless{}div\textgreater{} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} div * & All elements within \textless{}div\textgreater{} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} div span & \textless{}span\textgreater{} within \textless{}div\textgreater{} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} div, span & \textless{}div\textgreater{} and \textless{}span\textgreater{} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} div \textgreater{} span & \textless{}span\textgreater{} with parent \textless{}div\textgreater{} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} div + span & \textless{}span\textgreater{} preceded by \textless{}div\textgreater{} \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} .class & Elements of class "class" \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} div.class & \textless{}div\textgreater{} of class "class" \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} \#itemid & Element with id "itemid" \tn % Row Count 10 (+ 1) % Row 10 \SetRowColor{LightBackground} \seqsplit{div\#itemid} & \textless{}div\textgreater{} with id "itemid" \tn % Row Count 11 (+ 1) % Row 11 \SetRowColor{white} a{[}attr{]} & \textless{}a\textgreater{} with attribute "attr" \tn % Row Count 12 (+ 1) % Row 12 \SetRowColor{LightBackground} a{[}attr='x'{]} & \textless{}a\textgreater{} when "attr" is "x" \tn % Row Count 14 (+ 2) % Row 13 \SetRowColor{white} a{[}class\textasciitilde{}='x'{]} & \textless{}a\textgreater{} when class is a list containing 'x' \tn % Row Count 16 (+ 2) % Row 14 \SetRowColor{LightBackground} a{[}lang|='en'{]} & \textless{}a\textgreater{} when lang begins "en" \tn % Row Count 18 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{1.64241 cm} x{3.33459 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Pseudo Selectors and Pseudo Classes}} \tn % Row 0 \SetRowColor{LightBackground} :first-child & First child element \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} :first-line & First line of element \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \seqsplit{:first-letter} & First letter of element \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} :hover & Element with mouse over \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} :active & Active element \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} :focus & Element with focus \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} :link & Unvisited links \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} :visited & Visited links \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} :lang(var) & Element with language "var" \tn % Row Count 10 (+ 2) % Row 9 \SetRowColor{white} :before & Before element \tn % Row Count 11 (+ 1) % Row 10 \SetRowColor{LightBackground} :after & After element \tn % Row Count 12 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{p{0.4977 cm} x{4.4793 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Sizes}} \tn % Row 0 \SetRowColor{LightBackground} 0 & 0 requires no unit \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{2}{x{5.377cm}}{{\bf{Relative Sizes}}} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} em & 1em equal to font size of parent (same as 100\%) \tn % Row Count 4 (+ 2) % Row 3 \SetRowColor{white} ex & Height of lower case "x" \tn % Row Count 5 (+ 1) % Row 4 \SetRowColor{LightBackground} \% & Percentage \tn % Row Count 6 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{2}{x{5.377cm}}{{\bf{Absolute Sizes}}} \tn % Row Count 7 (+ 1) % Row 6 \SetRowColor{LightBackground} px & Pixels \tn % Row Count 8 (+ 1) % Row 7 \SetRowColor{white} cm & Centimeters \tn % Row Count 9 (+ 1) % Row 8 \SetRowColor{LightBackground} mm & Millimeters \tn % Row Count 10 (+ 1) % Row 9 \SetRowColor{white} in & Inches \tn % Row Count 11 (+ 1) % Row 10 \SetRowColor{LightBackground} pt & 1pt = 1/72in \tn % Row Count 12 (+ 1) % Row 11 \SetRowColor{white} pc & 1pc = 12pt \tn % Row Count 13 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{1.14471 cm} x{3.83229 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Colours}} \tn % Row 0 \SetRowColor{LightBackground} \#789abc & RGB Hex Notation \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \#acf & Equates to "\#aaccff" \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} rgb(0,25,50) & Value of each of red, green, and blue. 0 to 255, may be swapped for percentages. \tn % Row Count 5 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Box Model}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/davechild_1318072673_box-model.png}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{1.9908 cm} x{2.9862 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Positioning}} \tn % Row 0 \SetRowColor{LightBackground} display & clear \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} position & z-index \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} top & direction \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} right & unicode-bidi \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} bottom & overflow \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} left & clip \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} float & visibility \tn % Row Count 7 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{1.94103 cm} x{3.03597 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Dimensions}} \tn % Row 0 \SetRowColor{LightBackground} width & min-height \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} min-width & max-height \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} max-width & vertical-align \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{2}{x{5.377cm}}{height} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.28942 cm} x{2.68758 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Colour and Background}} \tn % Row 0 \SetRowColor{LightBackground} color & background-repeat \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} background & background-image \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} background-color & background-position \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{2}{x{5.377cm}}{background-attachment} \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.58804 cm} x{2.38896 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Text}} \tn % Row 0 \SetRowColor{LightBackground} text-indent & word-spacing \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} text-align & text-transform \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} text-decoration & white-space \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} text-shadow & line-height \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{2}{x{5.377cm}}{letter-spacing} \tn % Row Count 5 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.14011 cm} x{2.83689 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Fonts}} \tn % Row 0 \SetRowColor{LightBackground} font & font-weight \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} font-family & font-stretch \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} font-style & font-size \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} font-variant & font-size-adjust \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.09034 cm} x{2.88666 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Boxes}} \tn % Row 0 \SetRowColor{LightBackground} margin & border-color \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} margin-top & border-top-color \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} margin-right & border-right-color \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} margin-bottom & border-bottom-color \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} margin-left & border-left-color \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} padding & border-style \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} padding-top & border-top-style \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} padding-right & border-right-style \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} padding-bottom & border-bottom-style \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} padding-left & border-left-style \tn % Row Count 10 (+ 1) % Row 10 \SetRowColor{LightBackground} border & border-width \tn % Row Count 11 (+ 1) % Row 11 \SetRowColor{white} border-top & border-top-width \tn % Row Count 12 (+ 1) % Row 12 \SetRowColor{LightBackground} border-bottom & border-right-width \tn % Row Count 13 (+ 1) % Row 13 \SetRowColor{white} border-right & border-bottom-width \tn % Row Count 14 (+ 1) % Row 14 \SetRowColor{LightBackground} border-left & border-left-width \tn % Row Count 15 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.58804 cm} x{2.38896 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Tables}} \tn % Row 0 \SetRowColor{LightBackground} caption-side & border-spacing \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} table-layout & empty-cells \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} border-collapse & speak-header \tn % Row Count 3 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Paging}} \tn % Row 0 \SetRowColor{LightBackground} size & page-break-inside \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} marks & page \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} page-break-before & orphans \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} page-break-after & widows \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{1.74195 cm} x{3.23505 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Interface}} \tn % Row 0 \SetRowColor{LightBackground} cursor & outline-style \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} outline & outline-color \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{2}{x{5.377cm}}{outline-width} \tn % Row Count 3 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.04057 cm} x{2.93643 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Aural}} \tn % Row 0 \SetRowColor{LightBackground} volume & elevation \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} speak & speech-rate \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} pause & voice-family \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} pause-before & pitch \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} pause-after & pitch-range \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} cue & stress \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} cue-before & richness \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} cue-after & speak-punctuation \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} play-during & speak-numeral \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} \mymulticolumn{2}{x{5.377cm}}{azimuth} \tn % Row Count 10 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{x{2.33919 cm} x{2.63781 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{CSS2 Miscellaneous}} \tn % Row 0 \SetRowColor{LightBackground} content & list-style-type \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} quotes & list-style-image \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} counter-reset & list-style-position \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} counter-increment & marker-offset \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{2}{x{5.377cm}}{list-style} \tn % Row Count 5 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}