CSS oder Cascading Style Sheets ist eine Designsprache, die von Webentwicklern verwendet wird, um ein einheitliches und optisch ansprechendes Aussehen über mehrere Seiten einer Website hinweg zu erstellen. HTML bestimmt weitgehend den Textinhalt, aber CSS bestimmt die visuelle Struktur, das Layout und die Ästhetik der Website.

Die CSS-Anpassung wird nur empfohlen, wenn Sie über fortgeschrittene CSS-Kenntnisse verfügen. Der Kundensupport kann Ihnen nicht helfen, wenn Sie Ihren eigenen Code in Brandguide implementieren.

Der Code wird bereinigt, um XSS-Angriffe zu verhindern. Bitte beachten Sie, dass unsere Entwickler jederzeit Änderungen an unserem Brandguide-Code vornehmen können, die sich auf Ihr CSS und HTML auswirken können.

CSS-Syntax

Die CSS-Syntax besteht aus einer Reihe von Regeln. Diese Regeln bestehen aus 3 Teilen: einem Selektor, einer Eigenschaft und einem Wert.

Selektor { Eigenschaft: Wert; }

Der Selektor stellt das HTML-Element dar, das Sie formatieren möchten. Die Eigenschaft bezieht sich auf einen bestimmten Aspekt des HTML-Elements, z. B. Farbe, Schriftfamilie oder Rand. Jede Eigenschaft, die in CSS verwendet wird, hat eine Reihe von akzeptierten Werten, z. B. einen Hexadezimalcode oder einen Pixelwert.

Der Selektor kann mehrere Eigenschaften und Wertepaare haben, die durch Semikolons getrennt sind. Im Folgenden werden beispielsweise die angegebenen Werte der Eigenschaften auf alle h1-Tags angewendet:

h1 { font-family: comic sans; font-size: 12px; Farbe: blau; }

Gängige CSS-Selektoren

CSS-Typ-Selektor

Die CSS-Typauswahl wählt alle Elemente eines bestimmten Typs innerhalb der Webseite aus.

Im Folgenden finden Sie einige Beispiele für gängige Typselektoren:

• p: Wählt alle Absatz-Tags aus.
• a: Wählt alle Hyperlinks aus.
• h1: Wählt alle h1-Header-Tags aus.
• span: Wählt alle span-Tags aus.
• body: Wählt alle Elemente innerhalb des Webseitenkörpers aus.
• button: Wählt alle Schaltflächen auf der Webseite aus.
• li: Wählt alle Listeneinträge aus.

CSS-Klassenselektor

Eine CSS-Klasse ist ein Attribut, das verwendet wird, um eine Gruppe von HTML-Elementen zu definieren. Dadurch ist es möglich, mehrere Elemente mit einem einzigen Selektor anzupassen. Wir können dies tun, indem wir in unserem CSS einen Punkt (.) vor dem Klassennamen eingeben. So ändern Sie beispielsweise die Schriftart der Beispielüberschrift und des folgenden Absatzes:

header 
Absatz

Wir würden das folgende CSS verwenden, um alle Elemente mit einer Klasse von i-am-a-class anzusprechen:

.i-am-a-class { font-family: helvetica; }

CSS-ID-Selektor

Eine CSS-ID ist ein Attribut, das verwendet wird, um ein einzelnes eindeutiges Element auf einer Webseite zu definieren. Um ein Element mit einer bestimmten ID auszuwählen, geben Sie ein Rautensymbol (#) vor der ID ein. So ändern Sie beispielsweise die Schriftart des folgenden Absatzes:

Absatz

Wir würden das folgende CSS verwenden, um nur das Element mit der ID i-am-an-id anzusprechen:

#i-am-an-id { font-family: helvetica; }

CSS-Eigenschaften

Texteigenschaften

• font-family: Setzt die Schriftart des Textes, z.B. "Arial" oder "Times"
• font-size: Legt die Schriftgröße fest, z.B. 5px oder 1em
• font-weight: Legt die Schriftstärke oder "Fettschrift" fest, z.B. "bold" oder 200
• color: Legt die Farbe des Textes fest, z.B. blau, #add8e6 oder rgb(135,206,250)
• line-height: Vertikaler Abstand zwischen den Zeilen, z.B. 5px oder 1em
• Buchstabenabstand: Abstand zwischen den Zeichen, z. B. 5px oder 1em
• Wortabstand: Abstand zwischen Wörtern, z. B. 5px oder 1em

Hintergrundeigenschaften

• background-color: Legen Sie die Hintergrundfarbe des Elements fest, z. B. blau, #add8e6 oder rgb(135,206,250)
• background-image: Setzt ein Hintergrundbild basierend auf der URL, z.B. url('sample-image.jpg')
• background-position: Legt die Startposition eines Hintergrundbildes fest, z.B. zentriert oder 50%

Abstandseigenschaften

Die folgenden Eigenschaften akzeptieren auto, inherit, % oder jede beliebige CSS-Längeneinheit

• height: Legt die Höhe des Elements fest
• width: Legt die Breite des Elements fest
• padding: Legt den Abstandsabstand des Elements fest
• margin: Legt den Randabstand des Elements fest

Längen und Einheiten

• px: Pixel (1px = 1/96 von 1 Zoll)
• em: Relativ zur Schriftgröße des Elements (3em = 3-fache Größe der aktuellen Schriftart)
• vw: Relativ zu 1 % der Breite des Ansichtsfensters
• vh: Relativ zu 1 % der Höhe des Ansichtsfensters
• %: Relativ zum übergeordneten Element

Suchen von Elementen mit Chrome DevTools

Chrome DevTools ist eine Reihe von Webentwicklungstools, die direkt in den Google Chrome-Browser integriert sind. Wir können diese Tools verwenden, um HTML-Elemente und vorhandene CSS-Stile auf jeder Website schnell zu finden.

1. Um auf DevTools zuzugreifen, können Sie mit der rechten Maustaste auf die Seite klicken und Untersuchen auswählen oder kurze Befehle wie Befehl+Option+C (Mac) oder Strg+Umschalt+C (Windows, Linux, Chrome OS) verwenden.

2. Sobald der DevTools-Bereich geöffnet ist, wählen Sie oben auf der Seite das Tool Untersuchen aus.

3. Sie können dann auf das Element auf der Seite klicken, das Sie formatieren möchten. Die Selektoren, mit denen dieses Element angepasst werden kann, werden auf der Registerkarte "Elemente" hervorgehoben. Auf der Registerkarte "Stile" darunter werden die CSS-Stilregeln angezeigt, die derzeit auf dieses Element angewendet werden.

4. In diesem Beispiel ändern wir die Farbe des Navigationslinks in #6b646b, indem wir die nav-link-Klasse verwenden, die wir mit dem DevTools-Inspektor gefunden haben. Wir fügen auch die Eigenschaft "!important" am Ende der Deklaration hinzu, um alle vorherigen Stile für diese Eigenschaft für das Element zu überschreiben.

5. Sobald das CSS aktualisiert und die Änderungen gespeichert wurden, sehen Sie, dass sich die Farbe des Navigationstextes in #6b646b geändert hat:

Hinzufügen von Schriftarten von Drittanbietern

@font-face ist eine CSS-Regel, die es Ihnen ermöglicht, Schriftarten von Drittanbietern in Ihren Brandguide zu importieren und zu verwenden. Wir empfehlen Ihnen, Ihre Schriftart per CSS auf der globalen Einstellungsebene (im Gegensatz zur Blockebene) hinzuzufügen.

Es gibt zwei Möglichkeiten, eine Schriftart eines Drittanbieters hinzuzufügen.

Kopieren und Einfügen einer URL

Die erste Möglichkeit besteht darin, zur Schriftbibliothek Ihrer Wahl zu navigieren und die Schriftart auszuwählen, die Sie Ihrem Brandguide hinzufügen möchten, und die URL zu kopieren und einzufügen. Dieser Prozess wird im Folgenden beschrieben.

Syntax

Sie können die untenstehende Syntax kopieren und zum Abschnitt "Benutzerdefiniertes CSS" Ihres Brandguides hinzufügen. Dies ist das einzige CSS, das Sie benötigen, um die Schriftart zu importieren. Um eine andere Schriftart zu importieren, ändern Sie einfach die Schriftfamilie, die Quell-URL und das Format in die von Ihnen gewählte Schriftart.

@font-face { font-family: 'Befriedigen'; src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2'); }

So finden Sie die URL und das Format der Schriftart:

1. Navigieren Sie zur Schriftbibliothek Ihrer Wahl und wählen Sie die Schriftart aus, die Sie Ihrem Brandguide hinzufügen möchten. In unserem Fall wählen wir Satisfy aus Google Fonts aus.

2. Kopieren Sie nach der Auswahl die @import URL und fügen Sie sie in eine neue Browser-Registerkarte ein.

3. Dadurch gelangen Sie zu einer Seite, die die URL und das Format enthält, die zum Importieren der Schriftart in Ihren Brandguide erforderlich sind.

4. Kopieren Sie die src-URL und fügen Sie sie in den @fontface-Code und die Schriftfamilie ein. Fügen Sie dann den Code in das CSS-Feld ein. Ihre Änderungen werden automatisch aktualisiert.

5. Wählen Sie CSS aktualisieren, um Ihre Änderungen zu speichern.

6. Die neu importierte Schriftart wird im Flyout "Globale Einstellungen" in das Dropdown-Menü "Standardschriftart" eingetragen.

Konvertieren der Schriftart in ein WOFF- oder WOFF2-Format

Die zweite benutzerdefinierte Schriftartoption besteht darin, die Schriftart in ein woff- oder woff2-Format zu konvertieren. Dieses Webfont-Format ist für Browser kompatibler als ttf/otf-Textdateiformate. Dieser Prozess wird im Folgenden beschrieben.  

Proprietäre Schriftarten

1. Konvertieren Sie die Schriftart in das Format woff oder woff2. Dieses Webfont-Format ist für Browser kompatibler als ttf/otf-Textdateiformate. 

2. Laden Sie die Schriftart in einen Dateibereich in Brandfolder hoch.

3. Öffnen Sie das Asset, navigieren Sie zur Registerkarte "Einbetten" und wählen Sie "Link kopieren" aus .

4. Navigieren Sie zum Flyout "Globale Einstellungen". Sie können die folgende Syntax kopieren und sie dem CSS-Abschnitt des Flyouts "Globale Einstellungen" hinzufügen. Dies ist das einzige CSS, das Sie benötigen, um die Schriftart zu importieren. Um eine andere Schriftart zu importieren, ändern Sie einfach die Schriftfamilie, die Quell-URL und das Format in die von Ihnen gewählte Schriftart Sobald die Syntax eingegeben wurde, werden Ihre Änderungen gespeichert.

@font-face { font-family: 'boldweb'; src: url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. Schriftarten, die auf diese Weise importiert werden, zeigen die Schriftart nicht im Dropdown-Menü "Standardschrift". Stattdessen müssen Sie die Schriftart manuell im CSS-Abschnitt anwenden. Im Folgenden finden Sie ein Beispiel für die Anwendung der Schriftart Bold Web auf importierte Absatz-Tags.

p { font-family: 'boldweb'; Farbe: #333; }

Hinzufügen von Videos

Sie können ein Video zu Ihrem Brandguide hinzufügen, indem Sie diese Schritte befolgen:

1. Öffnen Sie das Asset-Modal für das Video.
2. Navigieren Sie zur Registerkarte Einbetten. 
3. Suchen Sie den Video-Einbettungscode und wählen Sie Link kopieren aus. 
4. Fügen Sie den Code in den HTML-Block ein.