\chapter{CSS}\index{CSS}
\acf{CSS} ist eine Sprache, welche \acs{HTML} (und andere Sprachen) mit Aussehen versieht. Es gibt eine Vielzahl an Quellen von \acs{CSS}-Regeln (Kaskade\index{Kaskade})

Die Einbindung von \acs{CSS} in \acs{HTML} ist möglich durch:

\begin{enumerate}[noitemsep]
    \item Universalattribut \code{style} für jeden Tag im \html{<body>} verwendbar\newline
            \html{<h1 style="color: red;">Rote Überschrift</h1>}
            \begin{itemize}[noitemsep]
              \item[$\ominus$] keine Trennung von Struktur und Aussehen
              \item[$\oplus$] gut für Prototyping und für explizit anders aussehende Elemente
            \end{itemize}

    \item \html{<style>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_style_tag} auf Seite~\pageref{code:html5_style_tag} als Beispiel)
            \begin{itemize}[noitemsep]
              \item[$\oplus$] Trennung von Aussehen und Struktur klar innerhalb der Datei
              \item[$\oplus$] eine Regel hat Auswirkung auf alle selektierten Tags $\Rightarrow$ einheitliches Aussehen wird ermöglicht
              \item[$\ominus$] Design ist separat in jeder Seite vorhanden, bei Designänderungen müssen alle HTML-Seiten angepasst werden
            \end{itemize}
    \item \html{<link>}-Tag im \html{<head>} der \acs{HTML}-Seite (siehe \autoref{code:html5_link_tag} auf Seite~\pageref{code:html5_link_tag} als Beispiel)\newline
        Das Attribut \code{rel} (\enquote{relation}) gibt die Beziehung an. Auch möglich: \enquote{alternate stylesheet} für verschiedene auswählbare Aussehensvarianten.

        Das Attribut \code{media} gibt das Ausgabegerät an. Beispiele:

        \medskip
        \begin{tabular}{cll}
            • & \code{all}    & $\Rightarrow$ für alle Ausgabegeräte \\
            • & \code{screen} & $\Rightarrow$ für (Computer-)Bildschirme \\
            • & \code{print}  & $\Rightarrow$ für Ausdrucke der Seite \\
            • & \code{speech} & $\Rightarrow$ für Blinde oder Sehbehinderte. Die Seite wird vorgelesen. Bestimmte\\
              &               & \phantom{$\Rightarrow$} Menüpunkte können dafür \zB ausgeblendet werden.\\
            • & \code{handheld} & $\Rightarrow$ für sehr kleine Geräte (veraltet)\\
        \end{tabular}
\end{enumerate}

\bigskip
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<style>}-Tag,label=code:html5_style_tag]
    <html>
        <head>
            <title>Blabla</title>
            <style type="text/css">
                h1 { color: red; }
            </style>
        </head>
        <body>
            <h1>rote Überschrift</h1>
        </body>
    </html>
\end{lstlisting}

\newpage
\begin{lstlisting}[language=HTML5,caption=HTML \texttt{<link>}-Tag,label=code:html5_link_tag]
    <!DOCTYPE html>
    <html>
        <head>
            <title>Blabla</title>
            <link href="URL" type="text/css" rel="stylesheet" title="Name der Auswahlvariante" media="all" />
        </head>
        <body>
            ...
        </body>
    </html>
\end{lstlisting}


\section{\code{@import}-Statement}\index{CSS!import}
\code{@import}-Statement zu Beginn eines \acs{CSS}-Regelblocks (externe \acs{CSS}-Datei oder innerhalb des Style-Tags). Hiermit wird eine andere \acs{CSS}-Datei eingebunden.

\bigskip
\begin{lstlisting}[language=CSS,caption={@import-Anweisung in CSS}]
    @import "URL/zur/datei.css"      [mediatype]; // oder:
    @import url("URL/zur/datei.css") [mediatype];
\end{lstlisting}

\begin{description}
    \item[\code{mediatype}] optional, \zB \code{all}, \code{screen}, \code{speech}
\end{description}


\section{CSS Struktur}\index{CSS!Struktur}

\acs{CSS} besteht aus beliebig vielen \enquote{Regeln}. Jede Regel besteht aus (mindestens) einer Zeile. Jede Regel besteht aus \enquote{Selektor} und \enquote{Deklaration} im Format:

\qquad \css{selector \{ declaration; \}}

Jede Regel kann mehrere Selektoren enthalten, welche durch Kommata voneinander getrennt werden.
Jede Regel kann mehrere Deklarationen enthalten, welche in derselben geschweiften Klammer jeweils mit \enquote{;} abgeschlossen werden.
Der Selektor wählt die Elemente (\enquote{Tags}) aus, für welche die Regel gilt. Die Deklaration gibt das \enquote{Aussehen} für die selektierten Elemente vor, \zB:

\qquad \css{h1, h2 \{ color: red; font-size: 16pt; \}}

Ein Selektor ist im einfachsten Fall ein Tagname, \zB \code{h1} (oder die Wildcard \enquote{\code{*}} für alle Tagnamen).


Eine Deklaration besteht aus einer Eigenschaft (property) und einem Wert (value) im Format:

\qquad \code{property: value;}

\subsection{Positionierung: \enquote{Box-Model}}

In \acs{CSS} gibt es das sogenannte \enquote{Box-Model}. Was es genau bedeutet, wird in \autoref{fig:css_modell}\footnote{Quelle: \url{https://wiki.selfhtml.org/wiki/CSS/Box-Modell}} gezeigt.

\begin{figure}[ht]
    \centering
    \includegraphics[width=0.8\textwidth]{Bilder/CSS_Box_Modell.png}
    \caption{CSS Box Modell}
    \label{fig:css_modell}
\end{figure}

\css{div \{ width: 40mm; padding: 3mm; border-width: 2mm; margin: 5mm; \}}

$\Rightarrow$ Gesamtbreite: 60mm, da padding, border-width und margin doppelt gezählt werden.

Falls es keine explizite Angabe durch den Autor der Seite gibt, so wird folgendes verwendet:

\begin{itemize}[noitemsep]
    \item default-Vorgabe (\code{user-agent})
    \item dynamische Anpassung (hier an den Inhalt)
\end{itemize}

\subsection{Eigenschaften/\enquote{properties}}

\subsubsection{Eigenschaft \enquote{\code{display}}}

Die Eigenschaft \code{display} gibt an, wie die Elemente im Fluss dargestellt werden:

\begin{tabular}{ll}
    \code{display: inline;} & Innerhalb einer Zeile (sofern genug Platz)\\
    \code{display: block;} & Beginnt und endet auf jeden Fall in einer eigenen Zeile\\
    \code{display: none;} & Element wird nicht dargestellt und nimmt auch keinen Platz ein
\end{tabular}
\bigskip

Es gibt noch weitere \code{values} als Spezialfälle für Tabellen, Listen, \ldots

\bigskip
\begin{Tipp}
    Eine Alternative zu \code{display: none;} ist \code{visibility: hidden;} (anstatt \code{visibility: visible;}). Damit wird das Element nicht dargestellt, nimmt aber seinen Platz in Anspruch.
\end{Tipp}


\subsubsection{Eigenschaft \enquote{\code{position}}}

\begin{tabular}{ll}
    \code{position: static;} & \enquote{normale} Position, Default-Wert \\
    \code{position: relative;} & relative Verschiebung zur \enquote{normalen} Position\\
        & Der Platzbedarf bleibt an der ursprünglichen Position erhalten \\
    \code{position: absolute;} & Positionierung relativ zum nächsten Vorfahren, welches eine \\
        & von \code{static} verschiedene Position aufweist (bzw. \html{body}) \\
    \code{position: fixed;} & Positionierung relativ zum Browserfenster (\enquote{viewport}) \\
\end{tabular}
\bigskip

Unterschied \code{fixed} zu \code{static}/\code{absolute}/\code{relative}: scrollt nicht mit bzw. scrollt mit.

Unterschied \code{absolute}/\code{fixed} zu \code{static}/\code{relative}: Element hat keinen Platzbedarf bzw. hat Platzbedarf.

Die tatsächliche \enquote{Position} wird angegeben mittels \code{top}, \code{bottom}, \code{left} und \code{right}.

\code{width}, \code{right}, \code{margin}, \code{top}, \ldots erwarten Längenangaben als Werte. Diese können sein:

\begin{itemize}[noitemsep]
    \item absolute Werte, \zB $50mm$, $3in$, $2pt$ (\enquote{Punkt der Schriftsetzer}) $\Rightarrow$ werden selten verwendet
    \item relative Werte, \zB \medskip

        \begin{tabular}{ll}
            300px & Pixel, \dash relativ zur Bildschirmauflösung. Meist ungünstige Wahl                                             \\
                  & für allgemeine Größenangaben, verwendet \zB für \code{border} Angaben                                           \\
            50\%  & Prozentangabe, \dash relativ zur entsprechenden Bezugsgröße des Elternelements                                  \\
                  & meist oder oft eine gute Wahl (\code{width} $\Rightarrow$ \code{width}, \code{top} $\Rightarrow$ \code{height}) \\
            2em   & Breite des Kleinbuchstabens \enquote{m} in der aktuellen Schrift. Ebenfalls eine gute Wahl.                     \\
            4rem  & Breite des Kleinbuchstabens \enquote{m} in der Schrift des \code{root} Elements                                 \\
                  & (für die Unterstützung siehe \url{http://caniuse.com/\#feat=rem})                                               \\
            3ex   & Höhe des Kleinbuchstabens \enquote{x} in der aktuellen Schrift                                                  \\
                  &
        \end{tabular}
\end{itemize}

\subsubsection{Eigenschaften \enquote{margin}, \enquote{padding}, \enquote{border-width}, \ldots}

Diese Eigenschaften sind Sammeleigenschaften für die Dimensionen an allen vier Seiten.

\begin{tabular}{llll}
    margin-top    & padding-top    & border-top-width    & \ldots \\
    margin-right  & padding-right  & border-right-width  & \ldots \\
    margin-bottom & padding-bottom & border-bottom-width & \ldots \\
    margin-left   & padding-left   & border-left-width   & \ldots
\end{tabular}
\bigskip

Gesammelt ergibt dies zum Beispiel:

\qquad \code{margin: 1mm 2mm 3mm 4mm;}

Die Eigenschaften werden in der Reihenfolge \code{top}, \code{right}, \code{bottom} und \code{left} mit Leerzeichen getrennt angegeben.
Es können aber auch weniger Werte angegeben werden. Fehlende Werte werden ersetzt:

\begin{itemize}[noitemsep]
    \item left = right (3 oder 2 Werte)
    \item bottom = top (2 Werte)
    \item left = bottom = right = top (1 Wert)
\end{itemize}

\code{border} ist auch eine Sammeleigenschaft für:
\begin{enumerate}[noitemsep]
    \item \code{border-width} $\Rightarrow$
    \item \code{border-style} $\Rightarrow$ jeweils ebenfalls eine Sammeleigenschaft für vier Seiten
    \item \code{border-color} $\Rightarrow$
\end{enumerate}

\begin{description}
    \item[\code{border-style}] \texttt{solid | dotted | dashed | double | \ldots | none}
    \item[\code{border-color}]  \hfill
        \begin{itemize}[noitemsep]
            \item \texttt{red | green | blue|...}
            \item \texttt{\#abc1f5} (RGB-Angabe, je zwei Zeichen)
            \item \texttt{\#a5f} $\hat{=}$ \texttt{\#aa55ff} (RGB-Angabe, je ein Zeichen)
            \item \texttt{rgb(122,231,85)} (RGB-Angabe)
            \item \texttt{rgba(122,231,85,0.5)} (RGB-Angabe + Alpha-Kanal für Deckkraft von 0 bis 1)
            \item weitere Farbmodelle sind \uA \code{hsl(\ldots), hsla(\ldots), \ldots}
            \item weiteres Schlüsselwort, manchmal anwendbar (\zB für Hintergrundfarbe): \code{transparent} (bei \code{rgba()} nicht mehr notwendig
        \end{itemize}
\end{description}

Weitere Eigenschaften mit Farbangaben sind \uA:
\begin{itemize}[noitemsep]
    \item \code{color} (Schriftfarbe)
    \item \code{background-color} (Hintergrundfarbe)
\end{itemize}


\subsubsection{Eigenschaften für den Hintergrund}

\begin{itemize}[noitemsep]
    \item \code{background-image: url("{}url/zum/bild.jpg"{});}
    \item \code{background-repeat: no-repeat | repeat | repeat-x | repeat-y;}
    \item \code{background-position: left|right|center top|bottom|center;}\newline oder Längenangabe (mit Positionierung der Bildmitte)
    \item \code{background-attachment: fixed | scroll;}
\end{itemize}

\subsubsection{Eigenschaften für Schriften}

\begin{itemize}[noitemsep]
    \item \code{font-style: normal|italic|oblique} schräggestellte Schrift
    \item \code{font-variant: normal|small-caps} \enquote{Kapitälchen}
    \item \code{font-weight: normal|bold|bolder|lighter|X\%|Zahl} Schriftdicke: Die meisten Schriften unterstützen nur zwei verschiedene Schriftdicken
    \item \code{font-size:} Schriftgröße -- Angabe der Längenangabe (vorzugsweise Prozentwerte)
    \item \code{font-family: \textquotedbl{}Name der Schriftfamilie\textquotedbl   | serif | sans-serif | cursive | monospace | fantasy } \newline
        Alternativangaben werden durch Kommata getrennt angegeben
\end{itemize}

Die Sammeleigenschaft dafür ist \code{font}.


\section{Ergänzungen -- CSS}

Positionierung:
\enquote{dritte} Dimension: \code{z-index: <Zahlenwert>;}

$\Rightarrow$ Element mit größeren \code{z-index} überlagern Elemente mit kleinerem \code{z-index}

\begin{figure}[h]
    \centering
    \begin{tikzpicture}[
                scale=0.80,
                knoten/.style={
                    rectangle,
                    fill=green!15,
                    draw=green!70!black,
                    minimum width=14mm,
                    inner sep=5pt
                },
                thick
            ]

            \node[knoten] at (0,0)     (BODY) {<body>};
            \node[knoten] at (-3,-2)   (DIV1) {<div>~~~~}; \node[red] at ($(DIV1) + (0.8,0)$) {2};
            \node[knoten] at (3,-2)    (DIV2) {<div>~~~~}; \node[red] at ($(DIV2) + (0.8,0)$) {4};
            \node[knoten] at (-6,-4)   (P1) {<p>~~~~};     \node[red] at ($(P1)   + (0.7,0)$) {1};
            \node[knoten] at (-3.5,-4) (UL) {<ul>~~~~~};   \node[red] at ($(UL)   + (0.75,0)$) {2};
            \node[knoten] at (-1,-4)   (P2) {<p>~~~~~};    \node[red] at ($(P2)   + (0.7,0)$) {5};
            \node[knoten] at (2,-4)    (DIV3) {<div>~~~~}; \node[red] at ($(DIV3) + (0.8,0)$) {3};
            \node[knoten] at (4.5,-4)  (H1) {<h1>~~~~};    \node[red] at ($(H1)   + (0.8,0)$) {1};


            \draw[->,thick] (BODY) -- (DIV1) ;
            \draw[->,thick] (BODY) -- (DIV2) ;
            \draw[->,thick] (DIV1) -- (P1) ;
            \draw[->,thick] (DIV1) -- (UL) ;
            \draw[->,thick] (DIV1) -- (P2) ;
            \draw[->,thick] (DIV2) -- (DIV3) ;
            \draw[->,thick] (DIV2) -- (H1) ;


            \draw[blue,very thick,->] (P2) to[out=-60,in=-110] (DIV3);
            \node[blue] at ($(P2)+(1.4,-1.6)$) {liegt unter};

    \end{tikzpicture}
    \caption{Beispiel -- Z-Index}
    \label{fig:abb_1}
\end{figure}

Wie in \autoref{fig:abb_1} zu sehen ist, bezieht sich der \code{z-index} auf den aktuellen Kontext und nicht notwendigerweise dokumentenweit.

\begin{figure}[ht]
    \centering
    \includegraphics[width=0.6\textwidth]{Bilder/CSS_float.png}
    \caption{CSS -- \code{float}}
    \label{fig:css_float}
\end{figure}

Umfließen von Inhalten mit \code{float: none|left|right;} (siehe \autoref{fig:css_float}).

Nachfolgende Inhalte befinden sich bei \code{left} auf der rechten Seite (das Bild links). Möchte man \zB die nächste Überschrift nicht neben den \code{floats} haben, so kann man dies machen mit:

\code{clear: none|left|right|both;}

Damit werden alle offenen (\code{left/right}) \code{floats} vor dem aktuellen Element gesetzt/\enquote{geschlossen}.

\subsection{Selektoren}\index{Selektoren}

Regeln werden vererbt (auf Kinder und Kindeskinder).

\begin{lstlisting}[language=CSS,caption=Selektoren]
    body { font-size: 12pt; }
    h1   { font-size: 18pt; }
\end{lstlisting}

Grundsätzlich gilt die Regel mit dem für das jeweilige Element spezifischsten Selektor. Weniger weit vererbte Selektoren sind spezifischer.

Eigenschaft für Aufzählungszeilen bei Listen:

\css{li \{ list-style-type: decimal; \}}\newline
$\Rightarrow$ gilt für alle \html{<li>} (sowohl für \html{<ul>} als auch für  \html{<ol>}).

Deswegen ist folgendes besser: \css{ol \{ list-style-type: decimal; \}}

\subsubsection{Kontextselektoren}\index{Selektoren!Kontext}

\begin{tabular}{ll}
    \code{ol li \{\ldots \}} & $\Rightarrow$ gilt für alle \html{<li>}-Nachfolger eines \html{<ol>} \\
    \code{ol > li \{\ldots \}} & $\Rightarrow$ gilt für alle \textit{direkten} \html{<li>}-Nachfolger eines \html{<ol>} \\
    \code{h1 \circa{} p \{\ldots \}} & $\Rightarrow$ gilt für \html{<p>}, wenn es einen vorangegangenen Geschwisterknoten \html{<h1>} gibt. \\
    \code{h1 + p \{ \ldots \}} & $\Rightarrow$ gilt für \html{<p>}, wenn es einen direkten Vorgänger \html{<h1>} gibt. \\
\end{tabular}

\medskip
Die Kombination von Selektoren ist möglich:\newline
\hspace*{5mm} \code{h1 + p + p \{\ldots \}} $\Rightarrow$ gilt für das genau 2. \html{<p>} welches direkt auf \html{<h1>} folgt.

Kontextselektoren sind spezifischer als Selektoren ohne Kontext!

\subsubsection{Attributselektoren}\index{Selektoren!Attribut}

\begin{tabular}{p{5.8cm}lp{9.3cm}}
    \code{a[href] \{\ldots \}} & $\Rightarrow$ & gilt für \html{<a>}-Tags mit \code{href}-Attribut. \\
    \code{a[href="{}/"] \{\ldots \}} & $\Rightarrow$ & gilt für \html{<a>}-Tags mit Wert von \code{href}-Attribut \enquote{/} (Verweis auf die Einstiegsseite). \\
    \code{a[href\^{}="http"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, deren \code{href}-Attribut mit \enquote{http} beginnt  \\
    \code{a[href\^{}="http://"], a[href\^{}="https://"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf externe Seiten verlinken. \\
    \code{a[href\$=".pdf"] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf eine PDF verweisen.\\
    \code{a[href*="google."] \{\ldots \}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die auf Google verweisen (bzw. die \code{google.} enthalten.\\

\end{tabular}

\subsubsection{Klassenselektoren}\index{Selektoren!Klasse}

\code{div.klassenname \{\ldots\}} $\Rightarrow$ gilt für alle \html{<div>} der Klasse \enquote{klassenname}\newline (\html{<div class="klassenname"></div>}).

Ein Klassenselektor ist spezifischer als beliebig viele Kontexte eines Selektors.


\subsubsection{ID-Selektoren}\index{Selektoren!ID}
\code{div\#idwert \{\ldots\}} $\Rightarrow$ gilt für einen \html{<div>} mit ID \enquote{idwert}.

\begin{Hinweis}
    \code{.klassenname} und \code{\#idwert} anstatt \code{div.klassenname} und \code{div\#idwert} ist auch möglich. Dann gibt es keine Beschränkung auf bestimmte Elementarten!
\end{Hinweis}

Ein ID-Selektor ist auf jeden Fall spezifischer als ein Klassenselektor!

\pagebreak
\subsubsection{Pseudoklassen}\index{Selektoren!Pseudoklassen}
Einige Pseudoklassen sind abhängig von \enquote{externen Randbedingungen}

\begin{tabular}{llp{11cm}}
    \code{a:link} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, welche Hyperlinks darstellen \newline
        (Alternative für \code{a[href] \{\ldots\}}).\\
    \code{a:visited \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, welche \textit{besuchte }Hyperlinks darstellen).\\
    \code{a:focus \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die den aktuellen Fokus haben\newline
         (\zB mit der Tab Taste).\\
    \code{a:hover \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, über der sich der Mauszeiger im Moment befindet.\\
    \code{a:active \{\ldots\}} & $\Rightarrow$ & gilt für alle \html{<a>}-Tags, die im Moment geklickt werden.\\

\end{tabular}

\medskip
\begin{Achtung}
    Alle Selektoren sind gleich spezifisch, \dash die Reihenfolge ist wichtig. Die letztnotierte Regel überschreibt die anderen. Im oberen Beispiel darf deswegen \code{a:link \{...\}} nicht nach \code{a:hover \{...\}} stehen, da dies ansonsten überschrieben werden würde.
\end{Achtung}

\subsubsection{Pseudoelemente}\index{Selektoren!Pseudoelemente}

\code{a[href\^{}="http://"]:after \{ content: "{}Achtung! Externer Link"; \}} \newline
\code{a[href\$=".pdf"]:after     \{ content: url("logo-pdf.png"); \}} \newline
\code{a[href\$=".pdf"]:before    \{ content: url("logo-pdf.png"); \}} \newline

weitere sind \uA

\begin{tabular}{ll}
    \code{:first-letter \{\ldots\}} & Der erste Buchstabe \\
    \code{:first-line \{\ldots\}} & Die erste Zeile \\
    \code{:first-child \{\ldots\}} & Das erste Kindelement \\
\end{tabular}

Es gibt noch viele weitere Pseudoelemente in aktuellen \acs{CSS} Versionen, die jedoch nicht für die Vorlesung von Bedeutung sind.

Selektoren mit Pseudoklassen haben grundsätzlich dieselbe Spezifität wie \enquote{normalen} Klassen.

\pagebreak
\subsection{Quellen von CSS-Regeln}\label{sec:CSS_Quellen}
Es gibt verschiedene Quellen von CSS-Regeln. Diese sind:

\begin{description}
    \item[author] Vom Webautor

        \begin{itemize}[noitemsep]
            \item \html{<link>}-Tag (am \enquote{unspezifischsten})
            \item \html{<style>}-Tag im \html{<head>} (dazwischen)
            \item \html{style}-Attribut (ist am spezifischsten)
        \end{itemize}

        (bei gleicher Spezifität der Selektoren)

        Grundsätzlich: Eine Regel (bzw. beim \code{style}-Attribut die Deklaration) überschreibt andere Regeln mit gleicher Spezifität des Selektors, welche sich \enquote{weiter weg vom Element} befinden.


    \item[user] Betrachter der Website.
    \item[user-agent] Webbrowser, mit dem der User die Seite anschaut.
\end{description}

Prioritätenreihenfolge (bei gleicher Spezifität des Selektors):

\hspace*{5mm} \code{author > user > user-agent}

\textbf{Barrierefreiheit?}

Mit \code{!important} kann die Priorität einer Deklaration erhöht werden:\newline
\hspace*{5mm} \code{body \{ \textit{font-family: serif !important}; font-size:50pt; \}}

Nur die Schriftfamiliendeklaration hat Vorrang vor allen anderen Deklarationen ohne \code{!important}.

Es gibt eine andere Prioritätsreihenfolge bei \code{!important}:\newline
\hspace*{5mm} \code{user > author}

Der \code{user-agent} hat keine \code{!important}-Deklarationen!

\bigskip
\begin{Hinweis}[frametitle={Beispiel für eine Klausuraufgabe}]
    Es ist eine \acs{HTML}- und \acs{CSS}-Datei vorgegeben. Die \acs{HTML}-Datei enthält Überschriften unterschiedlicher Art, welche unterschiedlich gestyled wurden (über IDs, Klassen, \ldots). Auch user- und author-Stylesheets wurden angegeben.

    Die Klausurfrage lautet dann: \enquote{Welche Farbe wird für welche Überschrift verwendet?}
\end{Hinweis}
