\chapter{\label{CSS3}CSS3}
From \url{http://www.w3.org/TR/CSS21}:
\begin{quotation}
CSS is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance.
\end{quotation} 
The official CSS3 specifications can be found at \url{http://www.w3.org/Style/CSS/current-work}.

\section{Include CSS3}
There are four ways we can style our web page with CSS3.
\subsection{Inline}
We use the \verb|style| attribute of a specific element to style it.

Example:

\noindent\url{\ftcss inline1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/inline1.html}}

\subsection{Embedded}
We use the \verb|<style>| tag to embed CSS in the head of our document.

Example:

\noindent\url{\ftcss embedded1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/embedded1.html}}

\subsection{External}
We use the \verb|<link>| tag to include an external CSS style sheet in the head of our document.

Example:

\noindent\url{\ftcss external1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/external1.html}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/external1.css}}

\subsection{Imported}
We use the \verb|@import| rule to include an external CSS style sheet in the current style sheet. See \url{https://developer.mozilla.org/en-US/docs/Web/CSS/@import} and \url{http://www.w3.org/TR/CSS2/cascade.html#at-import}.

Example:

\noindent\url{\ftcss imported1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/imported1.html}}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{CSS3/external1.css}}

\subsection{Rules of precedence}
The browser processes the styles in the order described at \url{http://www.w3.org/TR/css3-cascade/#cascading-origins}. A somewhat simplified illustration of the cascade looks like this:

\noindent\includegraphics{CSSCascade}

However, we can influence rule precedence by either changing the order of inclusion or by using the \verb|!important| annotation.

If we include an external style sheet after the declaration of the embedded style sheet in the head of our document, the external styles will overwrite the embedded ones.

In the following example, the paragraph background color would normally be green, given that inline styling takes precedence over embedded styling. However, the \verb|!important| annotation gives the embedded style a higher priority:

\noindent\url{\ftcss important1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/important1.html}}

You can find the default style sheets used by the main browsers at the following links (cf. \url{https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements}):
\begin{longtabu}{|l|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
Firefox & \url{http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css} \\
Internet Explorer & \url{http://www.iecss.com} \\
Chrome & \url{http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css} \\
Opera & \url{http://www.iecss.com/opera-10.51.css} \\
HTML5 recommendation & \url{http://www.w3.org/TR/html5/rendering.html} \\
\end{longtabu}
\vspace*{\baselineskip}

\section{Syntax}
\noindent\includegraphics{CSSSyntax}

\begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm]
This site is a CSS3 learner's paradise:  \url{http://www.w3schools.com/css/css_examples.asp}
\end{mdframed}

\section{Properties}
\begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm]
At \url{http://www.w3schools.com/cssref/default.asp} you can find easy to understand explanations as well as examples for pretty much every CSS property. This is an extremely useful resource that you should use.

\url{http://www.w3.org/TR/css-2010/#properties} and \url{http://meiert.com/en/indices/css-properties} provide an almost complete list of CSS properties with links to the specifications and in-depth explanations, which are useful for WMOTUs. 
\end{mdframed}

\subsection{\texttt{background}}
\url{http://www.w3schools.com/cssref/css3_pr_background.asp}
For multiple backgrounds, see \url{http://www.css3.info/preview/multiple-backgrounds}.

Scaling an image to its maximum displayable size without distorting the proportions can be done like this:

\noindent\includegraphics[width=\linewidth]{backgroundmaxsize1}

\noindent\url{\ftcss backgroundmaxsize1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/backgroundmaxsize1.html}}

\subsection{\texttt{content}}
A great list of Unicode symbols can be found at \url{http://inamidst.com/stuff/unidata}.

\noindent\includegraphics{content1}

\noindent\url{\ftcss content1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/content1.html}}

\subsection{\texttt{white-space}}
\url{http://www.w3schools.com/cssref/pr_text_white-space.asp}

\subsection{\texttt{border-image}}
\url{http://www.w3schools.com/cssref/css3_pr_border-image.asp}
\url{http://border-image.com}

\subsection{\texttt{word-wrap}}
See \url{http://www.w3schools.com/cssref/css3_pr_word-wrap.asp} and \url{http://www.w3.org/TR/css-text-3/#word-wrap}.

\verb|word-wrap| allows us to solve some space constraint problems, as shown in this example:

\noindent\includegraphics{word-wrap1}

\noindent\url{\ftcss word-wrap1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/word-wrap1.html}}

\subsection{\texttt{hyphens}}
\url{https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens}

\subsection{\texttt{box-sizing}}
\url{http://www.w3schools.com/cssref/css3_pr_box-sizing.asp}

\section{\label{CSSSelectors}Selectors}
\begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm]
Study the excellent table at \url{http://www.w3schools.com/cssref/css_selectors.asp} to 
learn the power and expressiveness of CSS selectors.
\end{mdframed}

Here is a simple example:

\noindent\includegraphics{hover1}

\noindent\url{\ftcss hover1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/hover1.html}}

\section{Box model}
\noindent\includegraphics{boxmodel1}

Cf. \url{http://www.w3schools.com/css/css_boxmodel.asp}.

\noindent\includegraphics[width=\linewidth]{boxmodel2}

\noindent\url{\ftcss boxmodel1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/boxmodel1.html}}

\begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm]
The \texttt{width} and \texttt{height} properties in CSS3 do NOT include the padding, border and margin! Thus, if an element has content width of 200px, padding of 5px, a border width of 2px and a margin of 10px, the real width of the element will be 200 + 2 * 5 + 2 * 2 + 2 * 10 = 234px.
\end{mdframed}

\section{Comments}
You can comment out parts of a line or even several lines by enclosing them between \texttt{/*} and \texttt{*/}:
\noindent\url{\ftcss comment1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/comment1.html}}

Comments cannot be nested, i.e. this won't work:
\noindent\url{\ftcss comment2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/comment2.html}}

\section{Layout}
\subsection{Normal flow}
A browser renders our HTML code line by line in the order it appears in our HTML document. This is called \textbf{normal flow}.
The following is a simple example, illustrating normal flow and the nesting of elements: ~\\

\noindent\includegraphics[width=\linewidth]{normalflow1}

\noindent\url{\ftcss normalflow1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/normalflow1.html}}

Now let's try to build the following layout:

\noindent\includegraphics[width=\linewidth]{float}
\vspace*{\baselineskip}

\noindent\url{\ftcss normalflow2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/normalflow2.html}}

Unfortunately, this is not exactly what we want.

\subsection{Floats}
To solve our layout problem from the previous subsection, we need to take the navigation and two section elements out of the normal flow. We can do this using the \verb|float| and \verb|clear| properties: ~\\

\noindent\includegraphics[width=\linewidth]{float1}
\vspace*{\baselineskip}

\noindent\url{\ftcss float1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/float1.html}}

It is important to understand that \verb|float| takes the floated element out of the normal flow and allows to float it on the left or right side of its container. Only block elements can be floated. To return to the normal flow, we use the \verb|clear| property. We can clear only the left, only the right or both sides.

Remove the clear property from the footer rule and see what happens.

Instead of using \verb|clear| we can use the \verb|overflow| property on the containing element: ~\\

\noindent\includegraphics[width=\linewidth]{float2}
\vspace*{\baselineskip}

\noindent\url{\ftcss float2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/float2.html}}

%Floats make it very easy to create a two-column page layout, like so:

Floats can be very helpful in solving some simple layout problems, like in this vertical alignment example:

\noindent\url{\ftcss float3.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/float3.html}}

\subsection{Positioning}
The \verb|position| property allows us to take an element out of the normal flow and position it exactly as we like (cf. \url{http://www.w3.org/TR/CSS21/visuren.html#propdef-position}).

Let's have a look at some examples:

\noindent\includegraphics[width=\linewidth]{Positioning1}
\noindent\url{\ftcss positioning1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/positioning1_short.html}}

\noindent\includegraphics[width=\linewidth]{Positioning2}
\noindent\url{\ftcss positioning2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/positioning2_short.html}}

\subsection{Table layout}
\subsubsection{Scrollable HTML5 table with fixed header}
\url{https://jsfiddle.net/flytrap/g2cxd0jj}

\subsubsection{CSS tables}
CSS allows us to style elements as tables, which opens up a very powerful layout mechanism. See \url{http://www.w3.org/TR/CSS21/visuren.html#propdef-display} and \url{http://www.w3.org/TR/CSS21/tables.html} for the details.

Example:

\noindent\includegraphics[width=\linewidth]{TableLayout1}
\noindent\url{\ftcss tablelayout1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/tablelayout1_short.html}}

\subsection{Vertical centering}
\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{http://www.w3.org/Style/Examples/007/center}\\
\url{http://www.vanseodesign.com/css/vertical-centering}\\
\end{longtabu}
\vspace*{\baselineskip}

Flexbox, as described in a later section, is by far the easiest way to center any element.

Example:

\noindent\includegraphics[width=\linewidth]{VerticalCentering1}
\noindent\url{\ftcss centering1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/centering1.html}}

Here a more generic way to center any element without styling it:
\noindent\url{\ftcss centering2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/centering2.html}}

\subsection{Multiple columns}
\url{http://www.w3schools.com/css/css3_multiple_columns.asp}

\subsection{Flexible box layout}
According to \url{http://www.w3.org/TR/css3-flexbox}, flexible box layout is
\begin{quotation}
a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
\end{quotation}

It is a big step forward in terms of GUI development and will be our preferred approach.

This feature is only supported in the latest browser versions (cf. \url{http://caniuse.com/#feat=flexbox}) and even then implementation is not fully consistent across browsers. You can find in-depth information and examples at the following links:

\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout} \\
\url{http://www.w3schools.com/cssref/css3_pr_flex.asp} \\ \url{http://bocoup.com/weblog/dive-into-flexbox} \\
\url{http://www.w3.org/TR/css3-flexbox} \\
\url{http://css-tricks.com/snippets/css/a-guide-to-flexbox} \\
\url{http://html5please.com/\#flexbox} \\
\url{http://philipwalton.github.io/solved-by-flexbox} \\
\url{http://www.sketchingwithcss.com/samplechapter} \\
\url{http://www.sketchingwithcss.com/samplechapter/cheatsheet.
html} \\
\url{http://www.smashingmagazine.com/2013/05/22/
centering-elements-with-flexbox} \\
\url{http://designshack.net/articles/css/
build-a-web-page-with-css3-flexbox} \\
\url{http://www.html5rocks.com/en/tutorials/flexbox/quick} \\
\end{longtabu}
\vspace*{\baselineskip}

Let's start with a simple header - main - footer layout, where the main part contains a navigation, a section and an aside. Note that the order of the navigation and aside are changed using CSS.

Study the comments in the CSS file together with the links above to gain a deeper understanding of flex layout.

\noindent\includegraphics[width=\linewidth]{FlexTest1}
\noindent\url{\ftcss flextest1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/flextest1.html}}

Now we let the user resize some of the elements:

\noindent\url{\ftcss flextest2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/flextest2.html}}

\noindent\url{\ftcss flextest2.js}
{\scriptsize\inputminted[tabsize=2, linenos=true]{javascript}{CSS3/flextest2.js}}

Some more resizability:

\noindent\url{\ftcss flextest3.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/flextest3.html}}

\noindent\url{\ftcss flextest3.js}
{\scriptsize\inputminted[tabsize=2, linenos=true]{javascript}{CSS3/flextest3.js}}

The following example illustrates how to achieve specific scrollbar behavior:

\noindent\url{\ftcss flextest4.php}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/flextest4.php}}

Finally a more advanced example combining flexbox, splitters and scrollbars:

\noindent\url{\ftcss flextest5.php}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/flextest5.php}}

\noindent\url{\ftcss flextest5.js}
{\scriptsize\inputminted[tabsize=2, linenos=true]{javascript}{CSS3/flextest5.js}}

A flexible navigation menu:

\noindent\url{\ftcss flextest6.php}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/flextest6.php}}

\subsection{Grid layout}
This will be the layout of the future, but currently it is not implemented in most browsers:
\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{https://css-tricks.com/snippets/css/complete-guide-grid}\\
\url{http://caniuse.com/\#search=Grid}\\
\end{longtabu}
\vspace*{\baselineskip}

\subsection{Responsive design}
Responsive web design aims at building websites that work on mobile devices, tablets, and desktop screens.

\begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm]
It is important to set the viewport to optimize the user's experience:

\begin{scriptsize}
\begin{minted}[tabsize=2, startinline=true]{html}
<meta name=viewport content="width=device-width, initial-scale=1">
\end{minted}
\end{scriptsize}
\end{mdframed}

\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{https://css-tricks.com/dont-overthink-flexbox-grids}\\
\url{http://www.w3schools.com/cssref/css3_pr_mediaquery.asp}\\
\url{https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design}\\
\url{http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design}\\
\url{http://screensiz.es/phone}\\
\end{longtabu}
\vspace*{\baselineskip}

In Firefox, pressing Ctrl + Shift + M or Tools -> Web Developer -> Responsive Design View ->

\noindent\includegraphics{responsivedesignview1}

In Chrome developer tools, Ctrl + Shift + M opens up a similar view.
 
Let's look at a practical example:

\noindent\url{\ftcss responsive1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/responsive1.html}}

Here is a flexible and responsive layout with a horizontal menu:

\noindent\url{\ftcss responsive2.php}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/responsive2.php}}

Here is a hamburger icon menu example:

\noindent\url{\ftcss responsive3.php}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/responsive3.php}}

\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag?redirectlocale=en-US&redirectslug=Mobile\%2FViewport_meta_tag}\\ \url{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta}\\
\url{http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design}\\
\url{http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies}\\
\url{http://www.quirksmode.org/mobile/metaviewport}\\
\url{http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html}\\
\url{http://responsivedesign.is/develop/html/viewport-meta-element}\\
\end{longtabu}
\vspace*{\baselineskip}

\section{Color selection}
\url{http://www.colorzilla.com}

\section{Making elements resizable}
The \texttt{resize} (\url{http://www.cssportal.com/css-properties/resize.php} and \url{https://developer.mozilla.org/en-US/docs/Web/CSS/resize}) property allows us to make an element resizable. Note that in order for the resizing to work, you need to set the \verb|overflow| property to something different from the standard \verb|visible|.

\section{Hiding the scrollbar without disabling scrolling}
\url{http://www.simplyeasy.cz/blog/2012/scrollable-textarea-without-scrollbar}

\section{Navigation menu}
\noindent\includegraphics[width=\linewidth]{navigationmenu1}

\noindent\url{\ftcss navigationmenu1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/navigationmenu1.html}}

\noindent\includegraphics[width=\linewidth]{navigationmenu2}

\noindent\url{\ftcss navigationmenu2.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/navigationmenu2.html}}

\noindent\includegraphics[width=\linewidth]{navigationmenu3}

\noindent\url{\ftcss navigationmenu3.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/navigationmenu3.html}}

CSS3 animated dropdown menu
\url{http://red-team-design.com/wp-content/uploads/2011/11/css3-animated-dropdown-menu-demo.html}.

A useful tutorial and templates can be found at \url{http://cssmenumaker.com/blog/responsive-menu-tutorial}.

\section{Gradients}
Gradients are a great alternative to standard images.
\url{http://www.w3schools.com/css/css3_gradients.asp} and
\url{https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients} provide excellent information and examples on the subject.
The official specification can be found at \url{http://dev.w3.org/csswg/css-images-3}. \\

Example:

\noindent\includegraphics[width=\linewidth]{gradient1}
\noindent\url{\ftcss gradient1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/gradient1.html}}

An excellent gradient generator can be found at \url{http://www.colorzilla.com/gradient-editor}.

\section{Buttons}
With CSS3 it's very easy to create great looking buttons without using pictures. There are many button generators available on the Web that produce nice results, for instance:
\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{http://www.cssbuttongenerator.com} \\ \url{http://dabuttonfactory.com} \\ \url{http://css-button-generator.com} \\ \url{http://css3button.net}
\end{longtabu}
\vspace*{\baselineskip}

\section{\label{CSS3Animation}Animation}
For examples of what can be done, take a look at the following:
\begin{longtabu}{|X|}
\hline
\everyrow{\tabucline[0.5pt]{-}}
\url{http://anthonycalzadilla.com/css3-ATAT/index-bones.html} \\
\url{http://www.marcofolio.net/css/css_animated_profile_cards.html} \\
\url{http://www.marcofolio.net/css/animated_wicked_css3_3d_bar_chart.html}
\end{longtabu}
\vspace*{\baselineskip}

Details can be found at \url{http://www.w3schools.com/css/css3_animations.asp}.

To find out which CSS properties can be animated, take a look at \url{https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties}.

Here is a simpler example:

\noindent\includegraphics[width=\linewidth]{animation1}
\noindent\url{\ftcss animation1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/animation1.html}}

\section{\texttt{@font-face}}
\url{http://www.w3schools.com/css/css3_fonts.asp}

You can find lots of free fonts at \url{https://www.google.com/fonts}.

\noindent\url{\ftcss font-face1.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{CSS3/font-face1.html}}

\section{Variables}
Variables are available since Firefox 29 and enabled by default starting in Firefox 31. Here are the details: \url{https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables}

\section{Quiz}
Take the w3schools quiz at \url{http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS} as a fun way to check you are as good as you think you are.

\section{Tests}
\subsection{Computer Shop}
\noindent\includegraphics[width=\linewidth]{ComputerShop}

Create the validated page shown at \url{http://youtu.be/C99FqKlnD1s}.

The following information is not complete:
\begin{enumerate}
\item body: no margin and padding, background from black to grey, font color white, black shadow of 2 pixels h, v and blur.
\item header: height of 100 pixels.
\item nav: 150 pixels wide.
\item main: right padding of 10 pixels, overflow auto.
\item footer: 20 pixels high, font size half normal.
\item ul with no margin and padding.
\item li with 10 pixels padding above and below.
\item Hyperlinks with color gold and 1 pixel black shadow h, v and blur.
\item Navigation hyperlinks with font size twice normal.
\item h1 with color gold and font size three times normal.
\item Definition term with color hex 22bb22, bottom border of 2 pixels blueviolet, top margin of 10 pixels and bottom margin of 5 pixels.
\item Table data items padding of 20 pixels.
\end{enumerate}

You can copy paste the following text:

Computer Shop
Buy

Contact us

Welcome to our shop.

We offer the following:

Desktops

A desktop computer is a personal computer in a form intended for regular use at a single location desk/table due to its size and power requirements (cf. http://en.wikipedia.org/wiki/Desktop\_computer Wikipedia).

Laptops

A laptop or a notebook is a portable personal computer with a clamshell form factor, suitable for mobile use. There was a difference between laptops and notebooks in the past, but nowadays it has gradually died away. Laptops are commonly used in a variety of settings, including at work, in education, and for personal multimedia.
A laptop combines the components and inputs of a desktop computer, including display, speakers, keyboard and pointing device (such as a touchpad or a trackpad) into a single device. Most modern-day laptops also have an integrated webcam and a microphone. A laptop can be powered either from a rechargeable battery, or by mains electricity via an AC adapter. Laptop is a diverse category of devices and other more specific terms, such as rugged notebook or convertible, refer to specialist types of laptops, which have been optimized for specific uses. Hardware specifications change significantly between different types, makes and models of laptops (cf. http://en.wikipedia.org/wiki/Laptop Wikipedia).

Device

Brand

Price

LTAM

299.99

LTAM

349.99

2015 LTAM T0IF2

\subsubsection{Solution}
\noindent\url{\ftcss Tests/ComputerShop/index.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/Tests/ComputerShop/index.html}}

\subsection{Video Viewer}
\noindent\includegraphics[width=\linewidth]{VideoViewer}

Create the validated site exactly as shown at \url{https://youtu.be/mMSt40R0Jgg}. It consists of 2 HTML files (index.html and viewer.html) and one CSS file.

The following information is not complete:
\begin{enumerate}
\item Form data is sent to the file viewer.html.
\item The form box has a black shadow of 3 pixels h, v and blur.
\item The user name field is focused automatically when the page is loaded.
\item html and body have no margin and padding and use the whole browser window width and height.
\item body: repeating radial gradient from black to yellow 100px to white 200px, white text shadow of 2 pixels h, v and blur.
\item nav: 40 pixels high, full width.
\item main: display flex, full width. In index.html, there is no navigation, so main starts at the top. Therefore the login box is centered.
\item footer: 15 pixels high, font size half normal.
\item ul with 10 px horizontal and no vertical margin. No padding.
\item Navigation links with 10 pixel padding, 2 pixel golden border.
\item The form has automatic margin.The animation lasts 5 seconds and starts with 0 opacity.
\item Form inputs have 0.5 opacity and white text shadow of 2 pixels h, v, and blur.
\item The table takes 20\% of the total width and has a margin of 5 pixels.
\item Table headings have red text color and a font size 25\% bigger than normal.
\item The iframe takes 80\% of the total width and also has a margin of 5 pixels.
\end{enumerate}

You can copy paste the following text:

Login

Title
Module
Link

Windows 7 installation
SYSEX1
https://www.youtube.com/embed/NP3cPmC-08A

Computer Shop
HTSTA
https://www.youtube.com/embed/C99FqKlnD1s

T1IF Invaders
CLISS2
https://www.youtube.com/embed/c--I9podO0s

2015 WMOTU

\subsubsection{Solution}
\noindent\url{\ftcss Tests/VideoViewer/index.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/Tests/VideoViewer/index.html}}

\noindent\url{\ftcss Tests/VideoViewer/viewer.html}
{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{CSS3/Tests/VideoViewer/viewer.html}}

\noindent\url{\ftcss Tests/VideoViewer/style.css}
{\scriptsize\inputminted[tabsize=2, linenos=true]{css}{CSS3/Tests/VideoViewer/style.css}}