HTML 5 / CSS Einsteiger Tutorial

Zuletzt aktualisiert am 27. Dezember 2023 von Lars

HTML

HTML ist die Seitenbeschreibungssprache, die eine Website definiert. Neben dem aktuellen HTML 5 kann auf alten Websites auch noch HTML 4.01 in Gebrauch sein.

Das HTML 5 Grundgerüst

<!DOCTYPE html> 
<html lang="de">
   <head>
      <title></title>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="p.css" type="text/css" media="screen" />
   </head>
   <body>
   </body>
</html>

<!DOCTYPE html>

HTML-Definition für HTML5

<html>

Notwendig

<title></title>

Notwendig, definiert den Titel (Zwischen den Tags). Früher wurde empfohlen, für einen gute Position in den Suchergebnnissen eine Zeile wie z.B."<meta name="Description" content="Hier beschreibe ich den Inhalt meiner Seite." /> mit aufnehmen. Das ist i. d. R. die Beschreibung, die in den Suchergebnissen zu der jeweiligen Seite erscheint. Nach aktuellen Erkenntnissen ist das aber nicht mehr unbedingt nötig, da Suchmaschinen wie Google selbständig nach der Beschreibung suchen.

<meta charset="utf-8" />

Dies ist keine notwendige HTML-5 Anweisung. Wenn man jedoch seinen Editor auf UTF8 umstellt und die Seite entsprechend kodiert, kann man sich spätere mühsame Umlautkodierungen sparen.

<link rel="stylesheet" href="p.css" type="text/css" media="screen" />

Auch dies ist keine notwendige HTML-5 Anweisung. Da man jedoch streng Content von Layout trennen sollte, wird wahrscheinlich keine HTML Seite ohne Stylesheet auskommen. Inplace-Stylesheet und ähnliches sollte man wegen mangelnder Übersichtlichkeit nicht verwenden. Die Pfade sind anzupassen.

</head>

Notwendig

<body>

Notwendig, hier dahinter kommt der eigentliche Seitenhinhalt.

</body>

Notwendig. Schliesst den Inhaltsteil ab.

</html>

Notwendig. Schliesst die Seite ab.

Die wichtigsten HTML-Tags

Wichtig zu wissen: Bei Tags, die ein Anfangs- und ein End-Tag haben, wird mit </tag> geschlossen. Beispiel: <p> eröffnet den Absatz </p> schliesst ihn.

Besteht ein Tag wie br nur aus einem Tag, dann wird die zweite Eckige Klammer /> (also z.B: <br />) geschlossen.

p - Absatz

p definiert einen Absatz.

<p>Dies hier ist ein ganzer Absatz. Er macht nicht viel Sinn, aber so 
ist das halt, wenn es auf den Text nicht ankommt.</p>

br - Zeilenumbruch

<p>Dies hier ist ein ganzer Absatz. <br />
Er ist mit br auseinandergerissen.</p>


h1-h6 - Überschrift

<h1>Ich bin eine Überschrift vom Grad 1</h1>
<h2>Ich bin eine Überschrift vom Grad 2</h2>
<h3>Ich bin eine Überschrift vom Grad 3</h3>
<h4>Ich bin eine Überschrift vom Grad 4</h4>
<h5>Ich bin eine Überschrift vom Grad 5</h5>
<h6>Ich bin eine Überschrift vom Grad 6</h6>

div - Abschnitt

Mit div wird ein Abschnitt definiert. Dies braucht man z.B. um die Navigation von der Seite zu trennen. Div werden erst mit CSS richtig interessant.

strong - Hervorheben

<p>Dies hier ist <strong>hervorgehoben.</strong></p>

Wie der Browser den hervorgehobenen Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

em - Textbetonung

<p>Dies hier ist <em>hervorgehoben.</em></p>

Wie der Browser den betonten Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

code - Programmcode

<code>a=a+1</code>

code kann z.B. dafür verwendet werden, Programmlistings darzustellen.

cite - Zitat

<p>Dies hier ist <cite>hervorgehoben.</cite></p>

Wie der Browser den Zitats-Text darstellt, ist nicht festgelegt. Auch hier definiert man die Darstellung im CSS.

blockquote - Zitat

<blockquote>
<p>Dies ist ein langes Zitat, z.B. von einer anderen Webseite.</p>
</blockquote>

Auch Blockquote wird im allgemeinen als Zitat beschrieben. Blockquote ist im Prinzip einfach eingerückter Text, der sich dazu eignet, z.B. von einer anderen Quelle zu zitieren.

pre - Vorformatierter Text

<pre>Dies ist vorformatierter Text</pre>

Vorformatierter Text wird genau so dargestellt, wie man ihn eingibt. Ohne CSS erscheint er in einer Schriftart mit festem Abstand (i.d. R. Courier).

Listenelement, ungeordnet

<ul>
 <li>Ein Punkt</li>
 <li>Noch ein Punkt</li>
 <li>Und noch einer</li>
</ul>

Eine "ungeordnete" Liste ist eine einfach Aufzählung. Die Art der Aufzählungezeichen passt man hier mittels CSS an.

Listenelement, geordnet

<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ol>

Eine "geordnete" Liste ist eine Nummerierung.

Möchte man die Listen verschachteln, verschachtelt man die Tags entsprechend. Die Unterlisten müssen aber jeweils in einem Listenelement eingeschlossen sein. Beispiel:

<ul>
    <li>
        <ul>
            <li>...</li>
        </ul>
    </li>
    <li>
      <ul>
        <li>...</li>
      </ul>
 
   </li>
   <li>
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Definitionlisten

So gut wie nie brauche ich die:

<dl>
 <dt>www.it-zeugs.de</dt>
 <dd>www.it-zeugs.de ist die weltbeste Website zum Thema IT.</dd>
</dl>

Eingeschlossen wird die Definitionsliste mit dem dl-Tag. dt schliesst den zu erklärenden Terminus ein. dd wiederum schliesst die eigentliche Erklärung ein. Die Darstellung kann auch hier von Browser zu Browser unterschiedlich sein. I. d. R. wird die Erklärung eingerückt. Wie praktisch überall kann auch hier die Darstellung mittels CSS angepasst werden.

<a href="http://wwww.heise.de" target="_blank" title="heise.de">Homepage Heise</a>

Der Link oben verweist auf www.heise.de. Die Target-Angabe bewirkt, dass die Seite in einem neuen Browser-Tab aufgeht. Der Title wird angezeigt, wenn man mit der Maus darauf fährt. Für die Suchmaschinenoptimierung ist es übrigens wichtig, dass Sie einen vernünftigen Ankertext, das wäre oben Homepage Heise, wählen.

Bilder

<img src="http://wwww.heise.de/image/bild.jpg" 
widht="10" height="10" title="Logo Heise" img />

Der Title sollte hier auch wieder zum Zwecke der Suchmaschinenoptimierung gesetzt werden. Man schafft es damit besser in die Bildersuche. width und height sind mit Vorsicht zu gebrauchen. Man sollte möglichst die Bilder in der korrekten Auflösung vorliegen haben, damit nicht unnötige Datenmengen geladen werden.

Tabellen

Tabellen sollten nicht mehr für Layoutarbeiten verwendet werden. Dazu verwendet man inzwischen div in Kombination mit CSS. Trotzdem braucht man Tabellen i. d. R. noch für ihren eigentlichen Zweck, also um Tabellen darzustellen.

Denke aber daran, dass Tabellen auf mobilen Geräten schnell Probleme machen können.

Hier ein einfaches Beispiel:

  <table>
   <thead>
    <tr><td colspan="4">Feiertage Stadt Zürich 2014</td></tr>
     <tr>
     <th>Tag</th>
     <th>Wochentag</th>
     <th>Woche</th>
     <th>Feiertag</th>
    </tr>
   </thead>
   
   <tfoot>
    <tr><td colspan="4"><em>Irrtümer vorbehalten. Keine Garantie für Korrektheit 
der Daten.</em></td></tr>
       <tr><td colspan="4">Quelle: www.feiertagskalender.ch</td></tr>
   </tfoot>
   <tbody>   
    <tr><td>28. April 2014 </td><td>Mo </td><td>KW 18</td><td> Sechseläuten</td></tr>
    <tr><td>01. Mai 2014   </td><td>Do </td><td>KW 18</td><td> Tag der Arbeit</td></tr>
    <tr><td>29. Mai 2014 </td><td>Do </td><td>KW 22</td><td> Auffahrt</td></tr>
    <tr><td>08. Juni 2014 </td><td>So </td><td>KW 23</td><td> Pfingsten</td></tr>
    <tr><td>09. Juni 2014 </td><td>Mo </td><td>KW 24</td><td> Pfingstmontag</td></tr>
    <tr><td>01. August 2014 </td><td>Fr </td><td>KW 31</td><td> Nationalfeiertag 
Schweiz</td></tr>
    <tr><td>15. September 2014 </td><td>Mo </td><td>KW 38</td><td> Knabenschiessen</td></tr>
    <tr><td>25. Dezember 2014 </td><td>Do </td><td>KW 52</td><td> Weihnachten</td></tr>
    <tr><td>26. Dezember 2014 </td><td>Fr </td><td>KW 52</td><td> Stephanstag</td></tr>
   </tbody>
  </table>

table

Das table-Tag ist das äusserste Tag und schliess die Tabelle ein. Es muss verwendet werden.

tablehead

Das tablehead-Tag definiert einen Tabellenkopf. Es muss aber nicht verwendet werden.

tablebody

Das tablehead-Tag definiert den Tabellenhauptteil. Es muss aber nicht verwendet werden.

tablefoot

Das tablefoot-Tag definiert einen Tabellenfuss. Es muss aber nicht verwendet werden.

Die Reihenfolge von tablehead, tablebody und tablefoot kann man theoretisch vertauschen. Das dient aber nciht gerade der einfacheren Wartbarkeit der Seite.

tr

Das tr-Tag definiert die Zeile. Es muss verwendet werden.

td

Das td-Tag definiert die Spalte. Es muss verwendet werden.

rowspan, colspan

Mit rowspan kann man eine Zelle über mehrere Zeilen, mit volspan über mehrere Spalten aufspannen.

Umlautkodierung

Es gibt Situationen, da braucht man die Umlautkodierung dann doch noch. Hier die wichtigsten Elemente:

ZeichenHTML
"&quot;
&&amp;
<&lt;
>&gt;
(Leerzeichen)&nbsp;
ä&auml;
Ä&Auml;
ö&ouml;
ü&uuml;
Ü&Uuml;
ß&szlig
[&#91;
]&#93;

Eine sehr ausführliche Liste findet sich unter Mediaevent.de.

Kommentare

<!-- Dies ist der Text, der ein Kommentar ist -->

Formulare

Im Bereich der Formualare hat sich viel getan. Neue Typen, Felder können von HTML5-fähigen Browsern direkt validiert werden. Schauen Sie sich den folgenden Code an:

<!DOCTYPE html> 
	<html> 
	<head>
	<title></title>
	<meta charset="utf-8" />
	  
	</head>
	<body>
	 <form name="formular">
	  <input id="name" type="text" placeholder="Nachname" />
	  <input id="mail" type="email" placeholder="email@example.org" required />	
	  <input type="submit" value="Abschicken" formmethod="get" formaction="bla.php" formtarget="_selfquot" />
	 </form>
	 
	</body>
	</html>

Durch die Eingabe von "required" wird das Formular browserseitig überprüft. Die Verwendung des passenden Typs "email", wird sogar geprüft, ob die Eingabe Sinn macht.

HTML5 bietet dreizehn neue Eingabetypen

TypVerwendung
emailE-Mail-Adresse
searchSuchtext
urlURL
telTelefonnummer
datetimeDatum und Uhrzeit
datetime-localUTC Datum und Uhrzeit
dateDatum
monthDatum mit Jahr und Monat
weekDatum mit Jahr und Wochenzahl
timeUhrzeit
numberNummerischer Wert
rangeNummerischer Bereich
colorFarbe

CSS

CSS ("Cascading Style Sheets") ist das Tool, das du verwenden kannst, um das Aussehen deiner Webseite zu gestalten. Es arbeitet Hand in Hand mit HTML, um Webseiten Farbe, Layout und mehr zu geben.

In CSS wendest du Stile auf HTML-Elemente an. Dazu "referenzierst" du das HTML-Element und gibst dann in geschweiften Klammern {} die Eigenschaften und Werte an, die du ändern möchtest. Jede Anweisung wird mit einem Semikolon abgeschlossen.

Kommentare kannst du in zwischen /* und */ schreiben

Beispiel-Code eines einfaches Styleshheets.

/* CSS-Regel für das HTML-Element 'body' */
body {
  font-family: Verdana, Sans-Serif, Arial, Helvetica; /* Schriftfamilien festlegen */
  background: #C0C0C0; /* Hintergrundfarbe definieren */
}

/* CSS-Regeln für die HTML-Elemente 'h1', 'h2', 'h3' */
h1, h2, h3 {
  font-size: 18px; /* Schriftgröße für Überschriften einstellen */
  padding: 0; /* Innenabstand (Padding) auf Null setzen */
  margin: 0; /* Außenabstand (Margin) auf Null setzen */
  color: #004F9D; /* Schriftfarbe definieren */
  margin-bottom: 10px; /* Unteren Außenabstand spezifizieren */
}

Erklärungen

  • Referenzierung (body, h1, h2, h3): Hier beginnen wir mit der Angabe des HTML-Tags, das wir stylen möchten, wie body für den gesamten Seitenkörper oder h1, h2, h3 für Überschriften.
  • Geschweifte Klammern {}: Innerhalb dieser Klammern definieren wir die CSS-Eigenschaften und deren Werte. Jede Eigenschaft wird durch einen Doppelpunkt von ihrem Wert getrennt und jede Deklaration endet mit einem Semikolon.
  • Schriftfamilie (font-family), Hintergrund (background), Schriftgröße (font-size), Padding und Margin: Hier legen wir spezifische Stile wie Schriftart, Hintergrundfarbe, Schriftgröße und Abstände fest.

id

IDs in HTML und CSS sind sehr mächtig und nützlich, um spezifische Elemente auf deiner Webseite individuell zu gestalten. Durch die Verwendung von IDs in CSS hast du eine präzise Kontrolle über das Styling einzelner Elemente. Dies ermöglicht es dir, bestimmte Bereiche deiner Webseite hervorzuheben oder einzigartige Stile zu kreieren, die sich vom Rest der Seite abheben.

IDs in CSS

  • Einzigartigkeit: Jede ID muss auf einer Webseite einzigartig sein. Das bedeutet, dass du jede ID nur einmal verwenden kannst. Dies ist besonders nützlich, wenn du einem speziellen Bereich oder Element ein einzigartiges Aussehen geben möchtest.
  • Referenzierung in CSS: Um eine ID in CSS zu referenzieren, verwendest du das Raute-Zeichen # gefolgt von der ID-Bezeichnung. Zum Beispiel #me für das div-Element in deinem Beispiel.

Beispiel:

<div id="me">
<table>
	<tr>
		<td colspan="2"><h2>Hier schreibt:</h2></td>
	</tr>
	<tr>
		<td><img src="http://www.schlageter.ch/images/me.jpg" alt="Lars Schlageter"></td>
		<td>
		<p><a href="https://plus.google.com">Lars Schlageter</a><br>
		Geboren
		1969 in Deutschland<br>
		Lebt in der
		Schweiz im Kanton Baselland<br>
		Tätig in der IT</p></td>
	</tr>
</table>
</div>

Innerhalb eines DIV mit einer bestimmten ID können nun auch Unterelemente angespreochen werden. Im folgenden Beispiel wird mit...

#me a

...ein Link (a) im DIV mit ID "me" angesprochen. Ausserhalb des DIV würde die CSS-Answeiung nicht greifen.

#me a
{
  font-size: 10px;
  line-height: 12px;
  text-align: right;
}


#me table
{
 width: 180px;
 border: 0px;
 }


#me tr, #me td
{
 border: 0px;
 padding: 0px 0px;
 border-collapse:collapse; 
}

#me img 
{
  border: 1px solid black;
}

#me h2
{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

class

In CSS spielen Classes eine zentrale Rolle, wenn es darum geht, mehreren Elementen einheitliche Stile zuzuweisen. Im Gegensatz zu IDs, die einzigartig sein müssen, können Classes mehrfach innerhalb einer Webseite verwendet werden. Das macht sie besonders nützlich für wiederkehrende Designelemente.

Grundlagen von Classes

  • Wiederverwendbarkeit: Eine Class kann auf mehrere Elemente auf deiner Webseite angewendet werden. Das bedeutet, dass du denselben Stil auf alle Elemente mit derselben Class anwenden kannst.
  • Referenzierung in CSS: Um eine Class in CSS zu referenzieren, verwendest du einen Punkt . gefolgt von der Class-Bezeichnung. Zum Beispiel .meineClass für alle Elemente mit der Class meineClass.

Beispiel für das Stylen einer Class

Angenommen, du möchtest allen Absätzen (<p>) auf deiner Webseite einen bestimmten Stil geben. Du könntest ihnen eine Class zuweisen und diese in CSS stylen:

HTML

<p class="hervorgehoben">Dies ist ein hervorgehobener Absatz.</p>
<p class="hervorgehoben">Und hier ist noch einer.</p>

CSS

.hervorgehoben {
  color: #007bff; /* Blaue Schriftfarbe */
  font-weight: bold; /* Fetter Text */
}

Mit diesem Code würden alle <p>-Elemente mit der Class hervorgehoben in blauer Fettschrift dargestellt.

Flexibilität durch Classes

  • Gemeinsame Stile: Du kannst eine Class definieren, um gemeinsame Stile auf verschiedene Elemente anzuwenden, wie z.B. eine einheitliche Schriftart, Farbe oder ein Layout.
  • Kombination mit IDs: Du kannst auch Classes mit IDs kombinieren, um noch spezifischere Stile zu definieren. Ein Element kann sowohl eine ID als auch eine oder mehrere Classes haben.

Durch die Verwendung von Classes in CSS kannst du effizient und konsistent Stile auf mehrere Elemente deiner Webseite anwenden. Dies erleichtert das Management des Designs und hilft, Wiederholungen im Code zu vermeiden. Classes sind ein wesentliches Werkzeug, um deiner Webseite ein harmonisches und professionelles Aussehen zu verleihen.

Weitere Beispiele

<table class="mytab">
	<tr class="mytab">
		<th class="mytab">Zeichen</th>
		<th class="mytab">In HTML kodiert</th>		
	</tr>
	<tr class="mytab">
		<td class="mytab">"</td>
		<td class="mytab">&quot;</td>
	</tr>
	<tr class="mytab">
		<td class="mytab">&</td>
		<td class="mytab">&amp;</td>
	</tr>
</table>

Auch hier kann man vom CSS aus Elemente innerhalb einer Klasse ansprechen. Beispiel:

table.mytab 
{
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid black;
 padding: 5px 5px;
 border-collapse: collapse;
}

tr.mytab  th.mytab, td.mytab
{
 border: 1px solid black;
 padding: 5px 5px;
 border-collapse: collapse;
}

Beispiele der wichtigsten CSS-Anweisungen

  1. Padding (Innenabstand):
    • padding: 0px; - Innenabstand zum Rand.
    • padding-left: 10px; - Linker Innenabstand zum Rand.
    • padding-right: 60px; - Rechter Innenabstand zum Rand.
    • padding-top: 12px; - Oberer Innenabstand zum Rand.
    • padding-bottom: 12px; - Unterer Innenabstand zum Rand.
  2. Margin (Außenabstand):
    • margin: 0px; - Außenabstand zum Rand.
    • margin-top: 12px; - Oberer Außenabstand zum Rand.
    • margin-bottom: 20px; - Unterer Außenabstand zum Rand.
  3. Schriftgestaltung:
    • font-size: 14px; - Schriftgröße.
    • text-size: 80%; - Schriftgröße im Verhältnis zur normalen Größe.
    • font-family: Verdana, Sans-Serif, Arial, Helvetica; - Schriftart.
    • font-weight: bold; - Fette Schrift.
  4. Textausrichtung:
    • text-align: right; - Textausrichtung nach rechts.
    • text-align: center; - Text zentrieren.
  5. Hintergrund und Farben:
    • background: #C0C0C0; - Hintergrundfarbe. Andere Möglichkeiten: transparent (keine Farbe), inherit (erbt Wert des Elternelements).
  6. Größe und Position:
    • width: 980px; - Breite.
    • height: 80px; - Höhe.
    • position: relative; - Position im Dokument.
  7. Weitere Eigenschaften:
    • clear: both; - Beendet das Umfließen anderer Elemente.
    • border: 1px solid black; - Durchgehender schwarzer Rand.
    • text-align: center; margin-left: auto; margin-right: auto; - Zentrierung, z.B. für eine Tabelle.
    • padding: 5px 5px; - Abstand, z.B. für eine Tabelle.
    • border-collapse: collapse; - Ränder fallen zusammen, z.B. für eine Tabelle.
    • background-image: url(images/LM_arrow-right.gif) !important; background: no-repeat 99% 50%; - Hintergrundbild.
    • overflow: hidden; - Behandlung von aus Bereichen überstehenden Elementen.
    • min-height: 300px; - Minimale Höhe.

Weitere Beispiele

Rahmen um Bild - Beispiel

#me img 
{
  border: 1px solid black;
}
a:link
{
  color:#000066;
  background:inherit;
}

a:hover,
a:focus
{
  color: #FF0000;
  background:inherit;
  text-decoration: underline;
}

a:visited
{
  color: #993333;
  background:inherit;
}

Einfaches Print-CSS

Wenn man beim Ausdruck bestimmte Bereiche nicht mit drucken will, kann man das ebenfalls über CSS steuern. Im folgenden Beispiel werden die Elemente mit der ID "header", "menu", "sidebar" und "pageend" nicht mit gedruckt.

@media print {
#header,#menu,#sidebar,#pageend
{display:none;} 
}

Gängige Grössenparameter für CSS

Für CSS sind gängige Grössenparameter wichtig.
Diese sind:

Prozent (%):

  • Beschreibung: Prozentangaben beziehen sich auf die Grösse eines übergeordneten Elements. Wenn du beispielsweise die Breite eines Elements auf 50% setzt, nimmt es die Hälfte der Breite seines Elternelements ein.
  • Anwendung: width: 50%; bedeutet, dass die Breite des Elements 50% der Breite des Elternelements entspricht.
  1. Viewport Width (vw):
    • Beschreibung: Ein Viewport ist der sichtbare Bereich einer Webseite. 1vw entspricht 1% der Breite des Viewports.
    • Anwendung: width: 50vw; würde bedeuten, dass die Breite des Elements 50% der gesamten Viewport-Breite entspricht.
  2. Viewport Height (vh):
    • Beschreibung: Ähnlich wie vw, aber für die Höhe. 1vh ist 1% der Höhe des Viewports.
    • Anwendung: height: 30vh; setzt die Höhe des Elements auf 30% der Gesamthöhe des Viewports.
  3. em:
    • Beschreibung: em bezieht sich auf die Schriftgrösse des Elements. 1em ist gleich der aktuellen Schriftgrösse. Wenn die Schriftgrösse des Elternelements 16px ist, entspricht 1em 16px.
    • Anwendung: font-size: 1.5em; setzt die Schriftgrösse auf das 1.5-fache der Schriftgröße des Elternelements.
  4. rem:
    • Beschreibung: Ähnlich wie em, aber rem bezieht sich auf die Schriftgröße des Wurzelelements (üblicherweise <html>).
    • Anwendung: font-size: 2rem; setzt die Schriftgrösse auf das Zweifache der Schriftgröße des Wurzelelements.

Rechnen in CSS

In CSS kannst du die calc()-Funktion verwenden, um Berechnungen durchzuführen. Diese Funktion ermöglicht es dir, Werte zu addieren, subtrahieren, multiplizieren und dividieren. Das ist besonders nützlich, wenn du dynamische Layouts erstellen möchtest, die auf verschiedenen Bildschirmgrössen gut aussehen. Du kannst unterschiedliche Maseinheiten in einer Berechnung kombinieren, wie z.B. Prozent, Pixel, em, vw, und vh.

Beispiel: width: calc(100% - 50px);
Dieser Code setzt die Breite eines Elements auf die volle Breite des Elternelements minus 50 Pixel. Es ist sehr hilfreich, wenn du Elemente erstellen möchtest, die einen bestimmten Abstand zum Rand des Elternelements haben sollen, unabhängig von dessen Größe.

Die calc()-Funktion bietet eine große Flexibilität und ist ein mächtiges Werkzeug in deiner CSS-Toolbox, um responsive und dynamische Designs zu erstellen.

Weiteres Beispiel:

.dataTables_wrapper
{max-width: calc(270px + 20vw) !important;}

Hier wird zu einer Grundeinheit vom 270 Pixel immer 20% der Viewport-Breite addiert.

Das Schlüsselwort !important

Wenn du !important zu einer CSS-Eigenschaft hinzufügst, sagst du dem Browser im Wesentlichen: "Egal welche anderen Stilregeln es gibt, verwende diese spezifische Regel in jedem Fall". Dies kann besonders nützlich sein, wenn du Stile anwendest, die nicht überschrieben werden sollen, beispielsweise in einem Styleguide oder einem Framework, das konsistente Stile über verschiedene Komponenten hinweg sicherstellen soll.

Spezielle Referenzierungen in CSS

In CSS können spezielle Referenzierungen verwendet werden, um gezielt bestimmte Elemente auf einer Webseite anzusprechen und zu gestalten, insbesondere wenn kein direkter Zugriff auf den HTML-Code möglich ist, um Klassen oder IDs zu vergeben. Diese Technik ist äußerst nützlich, um Stile auf spezifische Elemente anzuwenden, die bestimmte Kriterien erfüllen.

Nehmen wir das folgende Beispiel:

p img[decoding="async"][alt="Pfingstwanderung Schwarzwald"] {
    max-width: calc(270px + 20vw) !important;
}

In diesem Beispiel wird ein sehr spezifischer CSS-Selektor verwendet. Dieser Selektor wendet einen Stil auf alle <img>-Elemente an, die innerhalb eines <p>-Elements liegen und die Attribute decoding="async" und alt="Pfingstwanderung Schwarzwald" aufweisen. Die Regel setzt die maximale Breite des Bildes dynamisch auf einen Wert, der sich aus der Kombination von fixen Pixeln (270px) und einem prozentualen Anteil der Viewport-Breite (20vw) berechnet. Das Schlüsselwort !important stellt sicher, dass diese Regel Vorrang vor anderen Maximalbreitenregeln hat.

Der Nutzen dieser Art von Selektoren liegt darin, dass sie es ermöglichen, spezifische Elemente zu modifizieren, auch wenn man keinen direkten Zugriff auf die HTML-Struktur hat, um eigene Klassen oder IDs hinzuzufügen. Das ist besonders in Situationen hilfreich, in denen man mit vorgegebenem HTML-Code arbeitet, wie bei vielen Content-Management-Systemen, und dennoch spezifische Stiländerungen vornehmen möchte. Es ermöglicht eine präzise und zielgerichtete Anwendung von CSS-Regeln, ohne den restlichen Code zu beeinträchtigen.

Gleichzeitige Formatierung Mehrerer Elemente in CSS

In CSS ist es möglich, mehrere Elemente gleichzeitig zu formatieren, indem man sie in einem Selektor gruppiert. Dies ist besonders nützlich, wenn du willst, dass verschiedene Elemente denselben Stil teilen, ohne jede Regel einzeln schreiben zu müssen. Dies spart Zeit und hält deinen Code übersichtlich und wartbar.

Nehmen wir an, du möchtest alle Überschriften (h1, h2, h3, h4, h5, h6) auf deiner Webseite in der Farbe Rot darstellen. Anstatt für jede Überschriftenebene eine separate Regel zu schreiben, kannst du sie alle in einem einzigen Selektor zusammenfassen.

h1, h2, h3, h4, h5, h6 {
    color: red; /* Alle Überschriften werden rot gefärbt */
}

Mit dieser Regel werden alle Überschriftenelemente (h1 bis h6) auf der gesamten Webseite rot gefärbt. Diese Methode der Gruppierung ist nicht nur auf Überschriften beschränkt, sondern kann auf jede Kombination von Elementen angewendet werden. Du kannst auch komplexe Selektoren verwenden, um noch spezifischere Gruppen von Elementen anzusprechen.

Die Fähigkeit, mehrere Elemente gleichzeitig zu formatieren, macht CSS zu einem extrem leistungsfähigen Werkzeug für Webdesigner und Entwickler. Es ermöglicht eine konsistente Gestaltung über verschiedene Elemente hinweg und vereinfacht gleichzeitig die Wartung und Aktualisierung von Stylesheets.

Sonstiges

Fabenlehre

Ganz gute Erklärung bei metacolor.de.

favicon.ico

Ein eigenes Favicon kann als PNG-Datei mit der Grösse 16x16 erstellt werden und mittels Irfan-View konvertiert werden.

Online kann man ein favicon aus einer Datei mit Hilfe von chami.com konvertieren.

Begriffe

HTML

HTML steht für "HyperText Markup Language". Sie definiert die Syntax zum Erzeugen von Webdokumenten.

XHTML

XHTML steht für "eXtensible Markup Language". XHTML hat strengere Regeln als HTML. Beispielweise müssen in XHTML Elemente klein geschrieben werden. Elemente ohne abschliessendes </..>-Tag (z.B. imG) werden durch <img /> abgeschlossen. Diese Schreibweise ist aber mittlerweile auch im HTML 5 üblich. XHTML 1.0 ist praktisch identisch mit HTML 4.01.

CSS

CSS steht für "Cascading Stylesheet" und bezeichnet eine Sprache, mit der das Aussehen von HTML-Elementen definiert werden kann. Generell sollte man den Inhalt vom Layout strikt trennen (leider auf meinen Seiten noch zu wenig konsequent durchgeführt). Das Werkzeug hierzu ist CSS.

XML

XML steht für Extensible Markup Language. Wie bei HTML und XHTML werden Daten in Elemente, den sog. Tags mit <element> und </element>

eingeschlossen. XML wird jedoch hauptsächlich für die strukturierte Beschreibung von Daten verwendet und die Entwickler können sich eigene Tags ausdenken. XML dient also hauptsächlich dem Dateiaustausch.

Quellen, Referenzen

Du willst meine Arbeit unterstützen? Dann freue ich mich über eine kleine Spende!

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert