W3.CSS-Standardwerte


W3.CSS ist einfach zu lesen

W3.CSS-Seiten sind leicht lesbar, selbst für Menschen mit leichten Lesebehinderungen.

  • Die Standardschriftgröße ist 15px
  • Die Standardschriftart ist Verdana, die einen guten Buchstabenabstand hat
  • Auch der voreingestellte Zeilenabstand (1,5) ist sehr gut

HTML-Überschriften <h1> - <h6>

Standardmäßig formatiert W3.CSS HTML-Überschriften auf diese Weise:

Beispiel

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>

Schriftgrößenklassen

Überschriften sollten für das verwendet werden, was sie sind: Überschriften.

Mit W3.CSS können Schriftgrößen durch die folgenden w3- Größenklassen festgelegt werden:

Beispiel

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo


Überschreiben der W3.CSS-Standardwerte

Das Überschreiben der W3.CSS-Standardeinstellungen ist sehr einfach.

Sie haben mindestens drei Möglichkeiten:

  1. Überschreiben Sie die Standardeinstellungen im Abschnitt <head> Ihrer Seite
  2. Fügen Sie Ihre eigene CSS-Datei nach W3.CSS hinzu
  3. Laden Sie den Inhalt der Datei W3.CSS herunter und ändern Sie ihn

In<head> überschreiben

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}

Fügen Sie Ihr eigenes CSS hinzu

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="myStyle.css">

Ändern Sie W3.CSS

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

Ändern der Standardschriftart

Ändern Sie im Head Ihrer Webseite (oder in Ihrem Stylesheet) nach dem Laden von W3.CSS den Stil von HTML und Body:

Beispiel

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: cursive, sans-serif;
}
</style>