by
45921
HTML & CSS
Description
Module Information
Description
No tags specified
Show more
Die Grundlage jeder Internetseite ist HTML
HTML (Hyptertext Markup Language) ist eine sogenannte "Darstellungssprache". Mit ihr können Inhalte im Internet dargestellt werden:
Verschiedene Inhalte (z.B. Überschriften, Texte) werden in HTML angelegt.
Dadurch wird dem Internetbrowser mitgeteilt, wie diese Inhalte dargestellt werden sollen (z.B. die Inhalte im <h1>-Tag sollen als Überschrift angezeigt werden).
Nur dadurch können zum Beispiel Überschriften auch als Überschriften dargestellt werden.
Wichtig: HTML beschreibt sozusagen nur, welche Inhalte als Text, welche Inhalte als Überschriften, welche Inhalte als Listen oder welche Inhalte als Bilder dargestellt werden sollen. Sie erhalten dadurch eine festgelegte Gestaltung. Diese Gestaltung wird nicht mit HTML geändert.
HTML ist also für die Struktur von Internetseiten zuständig.
Da HTML eigentlich "nur" etwas beschreibt, gilt HTML genaugenommen nicht als Programmiersprache.
Show less
Context
Description
No tags specified
Show more
head & body
Ein HTML-Dokument besitzt einen sogenannten Dokumentenkopf (head) und einen Dokumentenkörper (body).
Innerhalb des <head>-Tags werden verschiedene Informationen über das jeweilige Dokument geschrieben, z.B. Beschreibungen für Suchmaschinen. Diese Informationen werden nicht auf der Webseite ausgegeben. Ausnahme hier bildet das <title>-Tag, dessen Inhalt in der Browserleiste, in Lesezeichen und als Überschrift in Suchergebnissen angezeigt wird.
Das <body>-Tag kennzeichnet den sichtbaren Bereich der Webseite. In diesen Bereich werden alle Inhalte (Text, Bilder etc.) geschrieben, die das HTML-Dokument beinhalten soll.
Ein HTML-Dokument benötigt immer einen head und einen body.
Show less
Context
Description
No tags specified
Show more
Ein HTML-Dokument folgt einer klaren Struktur
Ein HTML-Dokument besitzt eine Struktur, die eingehalten werden muss.
Der Anfang und das Ende eines HTML-Dokuments wird das <html>-Tag gekennzeichnet. Dadurch wird der Browser informiert, dass eine HTML-codierte Seite vorliegt. Das <html>-Tag ist das oberste Element der Seite und wird deshalb auch als Wurzelelement bezeichnet. Alle anderen Elemente werden zwischen dem Start- und End-Tag des-Tags geschrieben:
<html>
...
</html>
Das <!DOCTYPE>-Tag ist jedoch das einizge Tag, welches noch vor dem <html>-Tag steht. Das liegt daran, dass dieses Tag genaugenommen kein HTML-Tag ist. Das -Tag bestimmt, um welchen Typ von Dokument es sich bei dem vorliegenden Dokument handelt. Damit das Dokument als HTML-Dokument beschrieben wird, wird der DOCTYPE wie folgt geschrieben:
<!DOCTYPE html>
Anschließend kommen die Bereich head und body. Die beiden Bereiche werden jeweils mit einem entsprechenden Start- und End-Tag geschrieben. Wie beim Körper kommt zuerst der Kopf und dann der Körper:
<head>
...
</head>
<body>
...
</body>
Zum Schluss entsteht eine gesamte Struktur:
<!DOCTYPE html>
<html>
<head> ... </head>
<body> ... </body>
</html>
Show less
Context
Description
No tags specified
Show more
Dokumente oder Medien einbinden
Mit HTML kann man verschiedene Dokumente und Medien einbinden. Den einzubindenden Pfad (= URI = Uniform Resource Identifier = Einheitliche Quellenbezeichnung), der auf das jeweilige Medium verweist, kann unterschiedliche aussehen.
Um zum Beispiel ein Bild einzufügen, wir das HTML-Tag <img> verwendet. Mit dem Attribut "src" (= source = Quelle) kann der Pfad zum Bild angegeben werden. Das Attribut schreibt man in das Starttag des HTML-Elements:
<img src="LinkZumBild">
Mit dem Ist-Gleich-Zeichen (=) wird auf den Pfad verwiesen. Der eigentliche Pfad oder Link zum Bild folgt dahinter in Anführungszeichen.
Wie das Einbinden eines Bildes funktioniert wird im Folgenden erklärt:
MIT VOLLSTÄNDIGEM URI
Wenn ein Bild von einer anderen Webseite eingebunden werden soll, kann der gesamte Hyperlink zu diesem Bild eingefügt werden.
<img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_960_720.jpg" />
ABSOLUTE PFADANGABEN RELATIV ZUM BASIS-URI
Möchte man auf ein Bild in einem Ordner verweisen kann man über den Basis-Uri auf die Datei verweisen. Der Basis-Uri ist das Wurzelverzeichnis, das heißt der grundlegendste Ordner. Auf dem Computer wäre dies beispielsweise das Fenster "Computer". Bei einer Webseite auf einem Server ist der Basis-Uri die grundlegende Seite, also beispielsweise https://de.wikipedia.org. Die Unterordner folgen durch einen Schrägstrich getrennt: https://de.wikipedia.org/wiki/Hypertext_Markup_Language.
Um ein Bild entsprechend anzugeben, gibt man den gesamten Pfad zum Bild ein und schreibt als erstes Zeichen einen Schrägstrich:
<img src="/C:/Users/Bielesch/Documents/kitty.jpg" />
RELATIVE PFADANGABEN RELATIV ZUM BASIS-URI
Auf ein Bild kann man auch relativ verweisen. Das heißt, die Pfadangabe beginnt von der HTML-Datei aus bzw. in demselben Ordner. Liegt das Bild in demselben Ordner, muss lediglich der Name des Bildes angegeben werden:
<img src="kitty.jpg" />
Liegt das Bild in einem Unterordner des HTML-Dokuments, muss mit Schrägstrichen zu dem jeweiligen Ordner navigiert werden:
<img src="ordner/kitty.jpg" />
Liegt das Bild in einem Ordner, welcher "über" dem Ordner des HTML-Dokuments liegt, kann die Referenz mit zwei beginnenden Punkten und einem Schrägstrich geschrieben werden:
<img src="../kitty.jpg" />
Hierbei können beliebig viele Überverzeichnisse angewählt werden:
<img src="../../../../../../../kitty.jpg" />
Show less
Context
Description
No tags specified
Show more
Start- und Endtags
Eine Internetseite besteht im Grunde aus Inhalten, wie z.B. Text und Anweisungen, sogenannten (HTML-)Tags. Diese Tags legen fest, wie einzelne Bereiche angezeigt werden sollen oder welche Inhalte eingefügt werden sollen.
HTML-Tags bestehen in der Regel aus einem Start-Tag und einem End-Tag.
Der Befehl des Start-Tags steht dabei zwischen einem Kleiner- und einem Größer-zeichen:
<befehl>
Der End-Tag wird identisch geschrieben, es wird lediglich ein Schrägstrich hinzugefügt:
</befehl>
Tags mit Anfang und einem Ende sind eine Art Behälter für Informationen. Ein Text, der zwischen dem Start- und End-Tag steht wird entsprechend des Tag-Befehls formatiert. Die Schreibweise sieht wie folgt aus:
Ich bin ein Text
<befehl>Ich bin ein Text</befehl>
HTML-Tags, die keinen End-Tag besitzen, umschließen folglich keine Informationen. Der Schrägstrich zum Kennzeichnen des Endes des Tags wird dann am Ende des einzelnen Tags angegeben:
<img src="" />
Show less
Context
Description
No tags specified
Show more
HTML-Tags
Es gibt verschiedene HTML-Tags, die verschiedene Funktionen erfüllen. Die meisten HTML-Tags werden in den body geschrieben, um entsprechend die Inhalte darzustellen.
Im Folgenden eine kleine Übersicht:
ÜBERSCHRIFTEN
Die Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> kennzeichnen abgestufte Überschriften. <h1> gilt als die Hauptüberschrift und sollte pro Seite auf einer Internetseite möglichst nur einmal angewendet werden. Die anderen Überschriften werden nach ihrer Zahl entsprechend untergegliedert. Die Gliederung wirkt sich auf die Darstellung auf. So ist die <h1>-Überschrift größer, als die <h2>-Überschrift.
<h1>Überschrift</h1>
<h2>Unterüberschrift</h2>
TEXT
Das <p>-Tag erzeugt einen Textabsatz. Fließtexte sollten immer innerhalb eines solchen Tags geschrieben werden. Nach dem End-Tag wird automatisch ein Zeilenumbruch erzeugt.
<p>Dies ist ein Fließtext, der zeigen soll, welchen Inhalt man in diesen Tag packen sollte.</p>
Mit dem <b>-Tag (b steht für bold = fett) können Texte fettgedruckt werden, mit dem <i>-Tag (i steht für italic = kursiv) Texte kursiv geschrieben werden. Mit dem Tag </br> wird ein Zeilenumbruch innerhalb eines <p>-Tags erzeugt. Dieser Tag besitzt nur ein End-Tag, da er keinen Inhalt erhält.
<p>
<b>Ich bin ein fetter Text innerhalb eines <p>-Tags.</b> </br>
<i>Ich bin ein kursiver Tag</i>
</p>
LISTEN
Listen – zum Beispiel Aufzählungslisten mit Spiegelstrichen oder nummerierte Listen – können mit dem <ul>- und <ol>-Tag eingefügt werden. <ul> steht hierbei für unordered list, das heißt eine unsortierte Liste zum Beispiel mit Spiegelstrichen. <ol> steht wiederum für ordered list, also eine sortierte Liste zum Beispiel mit Zahlen. Die Aufzählungszeichen bzw. Nummerierungen werden automatisch eingefügt. Die einzelnen Listen-Items werden innerhalb dieser Tags mit dem <li>-Tag gekennzeichnet.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
LINKS
Links können mit dem <a>-Tag (a steht für anchor = Anker) eingefügt werden, in der Regel innerhalb eines <p>-Tags. Der Text, der innerhalb des Start- und des End-Tags steht, wird als Link gesetzt. Das heißt bei einem Klick auf diesen Text, wird die verlinkte Seite aufgerufen. Die Seite, die geöffnet werden soll, wird innerhalb des <a>-Tags mit dem Attribut href festgelegt:
<p>
<a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">Zu Wikipedia</a>
</p>
BILDER
Bilder können mit dem <img>-Tag eingefügt werden. Damit ein Bild dargestellt werden kann, muss ein entsprechender Link gesetzt werden. Dies wird durch das Attribut src (für source = Quelle) erreicht. Mit den Attributen width und height kann die Breite und die Höhe des Bildes angegeben werden. Das alt-Attribut legt fest, welcher Text ausgegeben wird, wenn das Bild nicht darstellbar ist. Das title-Attribut legt einen Titel für das Bild fest. Wenn man mit dem Mauszeiger über das Bild fährt und eine Sekunde wartet, erscheint der Titel des Bildes.
Beachte: Das <img>-Tag besitzt keinen End-Tag! Deshalb wird vor dem schließenden "Größer-als"-Zeichen der Schrägstrich des End-Tags gesetzt.
<img src="https://cdn.pixabay.com/photo/2017/11/09/21/41/shotlanskogo-2934720_960_720.jpg" width="960" height="720" alt="Eine sitzende Katze" title="Eine sitzende Katze" />
Unter https://www.pixabay.com könnt ihr viele kostenfreie und Urheberrechtsfreie Bilder nutzen. Einfach ein Bilder aussuchen und draufklicken. Auf der neuen Seite mit der rechten Maustaste auf das Bild klicken und "Grafikadresse kopieren" klicken. Nun habt ihr den Link zu dem Bild, um es auf eurer Webseite einzubinden.
TABELLE
Eine Tabelle besteht aus mehreren Tags. Ganz am Anfang wird der <table>-Tag gesetzt. Dieser markiert, dass eine Tabelle beginnt. Alle weiteren genannten Tags werden innerhalb des <table>-Tags eingefügt. Jede Zeile wird mit dem <tr>-Tag (steht für table row = Tabellenzeile) eingefügt. Innerhalb der jeweiligen Zeilen (und damit innerhalb des <tr>-Tags) werden nun die Daten eingefügt. Für den Tabellenkopf (das heißt, in denen die Überschriften der Spalten geschrieben werden) werden die <th>-Tags genutzt. Jeder <th>-Tag markiert eine eigene Spalte. Die Daten der Tabellen werden innerhalb der jeweiligen Zeile mit dem <td>-Tag (steht für table data = Tabellendaten) eingefügt. Wie beim <th>-Tag wird pro <td>-Tag eine eigene Spalte eingefügt.
Denkt dran die jeweiligen End-Tags zu benutzen!
<table>
<tr>
<th>Katzenarten</th>
<th>Hundearten</th>
<th>Fischarten</th>
</tr>
<tr>
<td>Abessinier</td>
<td>Ägyptische Mau</td>
<td>Havana</td>
<td>Peterbald</td>
</tr>
<tr>
<td>Border Terrier</td>
<td>Beagle</td>
<td>Irish Terrier</td>
<td>Labrador</td>
</tr>
<tr>
<td>Aal</td>
<td>Hering</td>
<td>Goldfisch</td>
<td>Sardine</td>
</tr>
</table>
Die einzelnen Tags können auch nebeneinander statt untereinander geschrieben werden.
Show less
Context
Description
No tags specified
Show more
HTML-Tags
Schaue dir nochmal genau die Schreibweise der HTML-Tags an, bevor du das Quiz startest.
ÜBERSCHRIFTEN
Die Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> kennzeichnen abgestufte Überschriften. <h1> gilt als die Hauptüberschrift und sollte pro Seite auf einer Internetseite möglichst nur einmal angewendet werden. Die anderen Überschriften werden nach ihrer Zahl entsprechend untergegliedert. Die Gliederung wirkt sich auf die Darstellung auf. So ist die <h1>-Überschrift größer, als die <h2>-Überschrift.
<h1>Überschrift</h1>
<h2>Unterüberschrift</h2>
TEXT
Das <p>-Tag erzeugt einen Textabsatz. Fließtexte sollten immer innerhalb eines solchen Tags geschrieben werden. Nach dem End-Tag wird automatisch ein Zeilenumbruch erzeugt.
<p>Dies ist ein Fließtext, der zeigen soll, welchen Inhalt man in diesen Tag packen sollte.</p>
Mit dem <b>-Tag (b steht für bold = fett) können Texte fettgedruckt werden, mit dem <i>-Tag (i steht für italic = kursiv) Texte kursiv geschrieben werden. Mit dem Tag </br> wird ein Zeilenumbruch innerhalb eines <p>-Tags erzeugt. Dieser Tag besitzt nur ein End-Tag, da er keinen Inhalt erhält.
<p>
<b>Ich bin ein fetter Text innerhalb eines <p>-Tags.</b> </br>
<i>Ich bin ein kursiver Tag</i>
</p>
LISTEN
Listen – zum Beispiel Aufzählungslisten mit Spiegelstrichen oder nummerierte Listen – können mit dem <ul>- und <ol>-Tag eingefügt werden. <ul> steht hierbei für unordered list, das heißt eine unsortierte Liste zum Beispiel mit Spiegelstrichen. <ol> steht wiederum für ordered list, also eine sortierte Liste zum Beispiel mit Zahlen. Die Aufzählungszeichen bzw. Nummerierungen werden automatisch eingefügt. Die einzelnen Listen-Items werden innerhalb dieser Tags mit dem <li>-Tag gekennzeichnet.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
LINKS
Links können mit dem <a>-Tag (a steht für anchor = Anker) eingefügt werden, in der Regel innerhalb eines <p>-Tags. Der Text, der innerhalb des Start- und des End-Tags steht, wird als Link gesetzt. Das heißt bei einem Klick auf diesen Text, wird die verlinkte Seite aufgerufen. Die Seite, die geöffnet werden soll, wird innerhalb des <a>-Tags mit dem Attribut href festgelegt:
<p>
<a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">Zu Wikipedia</a>
</p>
BILDER
Bilder können mit dem <img>-Tag eingefügt werden. Damit ein Bild dargestellt werden kann, muss ein entsprechender Link gesetzt werden. Dies wird durch das Attribut src (für source = Quelle) erreicht. Mit den Attributen width und height kann die Breite und die Höhe des Bildes angegeben werden. Das alt-Attribut legt fest, welcher Text ausgegeben wird, wenn das Bild nicht darstellbar ist. Das title-Attribut legt einen Titel für das Bild fest. Wenn man mit dem Mauszeiger über das Bild fährt und eine Sekunde wartet, erscheint der Titel des Bildes.
Beachte: Das <img>-Tag besitzt keinen End-Tag! Deshalb wird vor dem schließenden "Größer-als"-Zeichen der Schrägstrich des End-Tags gesetzt.
<img src="https://cdn.pixabay.com/photo/2017/11/09/21/41/shotlanskogo-2934720_960_720.jpg" width="960" height="720" alt="Eine sitzende Katze" title="Eine sitzende Katze" />
Unter https://www.pixabay.com könnt ihr viele kostenfreie und Urheberrechtsfreie Bilder nutzen. Einfach ein Bilder aussuchen und draufklicken. Auf der neuen Seite mit der rechten Maustaste auf das Bild klicken und "Grafikadresse kopieren" klicken. Nun habt ihr den Link zu dem Bild, um es auf eurer Webseite einzubinden.
TABELLE
Eine Tabelle besteht aus mehreren Tags. Ganz am Anfang wird der <table>-Tag gesetzt. Dieser markiert, dass eine Tabelle beginnt. Alle weiteren genannten Tags werden innerhalb des <table>-Tags eingefügt. Jede Zeile wird mit dem <tr>-Tag (steht für table row = Tabellenzeile) eingefügt. Innerhalb der jeweiligen Zeilen (und damit innerhalb des <tr>-Tags) werden nun die Daten eingefügt. Für den Tabellenkopf (das heißt, in denen die Überschriften der Spalten geschrieben werden) werden die <th>-Tags genutzt. Jeder <th>-Tag markiert eine eigene Spalte. Die Daten der Tabellen werden innerhalb der jeweiligen Zeile mit dem <td>-Tag (steht für table data = Tabellendaten) eingefügt. Wie beim <th>-Tag wird pro <td>-Tag eine eigene Spalte eingefügt.
Denkt dran die jeweiligen End-Tags zu benutzen!
<table>
<tr>
<th>Katzenarten</th>
<th>Hundearten</th>
<th>Fischarten</th>
</tr>
<tr>
<td>Abessinier</td>
<td>Ägyptische Mau</td>
<td>Havana</td>
<td>Peterbald</td>
</tr>
<tr>
<td>Border Terrier</td>
<td>Beagle</td>
<td>Irish Terrier</td>
<td>Labrador</td>
</tr>
<tr>
<td>Aal</td>
<td>Hering</td>
<td>Goldfisch</td>
<td>Sardine</td>
</tr>
</table>
Die einzelnen Tags können auch nebeneinander statt untereinander geschrieben werden.
Show less
Context
Description
No tags specified
Show more
IDs und Klassen in HTML
IDs
Eine ID ist ein einzigartige Kennung für ein HTML-Element. Diese ID darf nur einmal im HTML-Dokument vorkommen. Die ID wird als Attribut in einem HTML-Element festgelegt. Bevor der öffnende Tag eines HTML-Elements geschlossen wird, wird die id festgelegt. Dazu wird der id ein Name in Anführungszeichen mit einem Gleichheitszeichen zugewiesen.
<div id="beispielDIV">Hier steht Inhalt</div>
Klassen
Klassen sind eine Kennung für HTML-Elemente. Diese dürfen beliebig oft im HTML-Dokument vorkommen.
Wie bei den IDs wird die Klasse als Attribut in einem HTML-Element festgelegt. Bevor der öffnende Tag eines HTML-Elements geschlossen wird, wird die Klasse festgelegt. Dazu wird der Klasse ein Name in Anführungszeichen mit einem Gleichheitszeichen zugewiesen.
<div class="beispielDIV">Hier steht Inhalt</div>
Mehrere IDs und Klassen in einem HTML-Element
Ein HTML-Element kann beliebig viele Klassen und IDs annehmen. Die Klassen und IDs werden jeweils mit einem Leerzeichen getrennt hintereinander in die Anführungszeichen angegeben. Ebenso kann ein HTML-Element sowohl IDs als auch Klassen gleichzeitig annehmen. Nach dem geschlossenen Anführungszeichen kann einfach ein anderes Attribut gesetzt werden.
<p id="id1 id2 id3 id4" class="klasse1 klasse2 klasse3 klasse4">Dies ist ein Text</p>
WICHTIG: Die Namen der IDs und Klassen müssen mit einem Buchstaben beginnen. Dann dürfen aber auch Zahlen und (bestimmte) Sonderzeichen verwendet werden.
Show less
Context
Description
No tags specified
Show more
Was ist CSS?
CSS bedeutet Cascading Style Sheet und ist eine sogenannte Stylesheet-Sprache. Eine Stylesheet-Sprache wird dazu genutzt, um die Gestaltung bzw. das Erscheinungsbild von etwas festzulegen. CSS wird für HTML benutzt und legt deshalb das Erscheinungsbild eines HTML-Dokuments fest.
Wie weise ich einem HTML-Element eine Gestaltung zu?
Bild zur Hilfe
Eine CSS-Anweisung besteht aus einem Selektor, einer Eigenschaft und einem Wert.
Der Selektor gibt das HTML-Element an, welches gestaltet werden soll.
Die Eigenschaft gibt an, welches Attribut (z.B. Textfarbe) dem HTML-Elements zugewiesen werden soll.
Jede Eigenschaft muss einen Wert haben, der bestimmt, wie die Eigenschaft dargestellt werden soll (z.B. eine bestimmte Textfarbe wie "red").
Show less
Context
Description
No tags specified
Show more
CSS einbinden
Es gibt verschiedene Möglichkeiten CSS in eine Homepage einzubinden. Diese werden im Folgenden beschrieben:
Eine CSS-Datei einbinden
In einem Dokument eines Texteditors (z.B. Notepad++) werden verschiedene CSS-Anweisungen aufgeschrieben. Dieses Dokument wird schließlich als CSS-Datei (Dateiendung .css) gespeichert (z.B. style.css). Im Head-Bereich der Webseite kann dieses Dokument nun wie folgt eingebunden werden:
<head>
<link href="style.css" />
</head>
Ähnlich wie beim <a>-Tag wird über das Attribut "href" ein Link angegeben, der auf das CSS-Dokument verweist. Das Dokument wird schließlich eingebunden und die CSS-Anweisungen im Dokument auf der Webseite angewendet.
Direkte CSS-Anweisung in einem Style-Element
Innerhalb des heads kann ein weiteres Element eingefügt werden: das <style>-Element. Zwischen Start- und Endtag dieses Elements können wie gewohnt CSS-Anweisungen geschrieben werden, die von der Webseite umgesetzt werden.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
</body>
CSS-Anweisung als Attribut
Eine CSS-Anweisung kann direkt "in" einem HTML-Element festgelegt werden. Dazu fügt man dem HTML-Element ein Attribut zu namens "style". Mit einem Gleichzeichen und innerhalb von Anführungszeichen können dann wie gewohnt die CSS-Anweisungen geschrieben werden. Hierbei ist kein Selektor und keine geschweiften Klammern nötig, da sich die CSS-Anweisungen lediglich auf das jeweilige HTML-Element beziehen.
<h1 style="color:red;">Ich bin eine Überschrift</h1>
Show less
Context
Description
No tags specified
Show more
IDs und Klassen in CSS
IDs
In CSS kann ein HTML-Element mit einer ID über den Namen der ID ausgewählt werden. Vor den Namen muss zusätzlich ein Hashtag gesetzt werden, damit der Browser weiß, dass es sich bei diesem Selektor um eine ID handelt.
#beispielDIV {
background-color:black;
}
Klassen
In CSS kann ein HTML-Element mit einer Klasse über den Namen der Klasse ausgewählt werden. Vor den Namen muss zusätzlich ein Punkt gesetzt werden, damit der Browser weiß, dass es sich bei diesem Selektor um eine Klasse handelt.
.beispielDIV {
font-size:2em;
}
Show less