Cascading Style Sheets (CSS) sind in vier verschiedenen Typen (oder Arten). Wenn Sie verstehen, wie diese vier verschiedene Arten arbeiten, werden Sie Ihre Web-Seiten effizienter Styling sein.

Damit Ihr CSS organisiert, verwenden Sie CSS-Kommentar-Tags die verschiedenen Abschnitte von CSS in Ihrem Stylesheet zu identifizieren. Zum Beispiel können Sie einen Abschnitt für die Kopf Stile haben, für die Sidebar von Designs, für die Navigations Designs und für die Fußzeile Stile. CSS Kommentare verwenden die / * # 133- * / Syntax:

/ * Dies ist ein Kommentar * /

Klasse Stil (auch bekannt als Custom-Style)

Klassenstile zu jedem beliebigen HTML-Element kann unter Verwendung der selektiv angewandt class ="customname" Syntax. Zum Beispiel könnten Sie eine Klasse-Stil erstellen genannt Höhepunkt das hat eine leuchtend gelbe Hintergrundfarbe:

.Highlight {background-color: # FFFF33-}

Um sich diesen Stil auf alle Inhalte, würden Sie verwenden Sie einfach die Klasse Attribut:

class ="Höhepunkt">Das ist wirklich wichtig

ICH WÜRDE

ID Stile werden automatisch auf ein HTML-Element auf der Seite mit der gleichen ID angelegt. Zum Beispiel, wenn Sie einen Tag halten Sidebar Inhalt hinzufügen möchten, würden Sie, dass Behälter eine semantische ID wie Sidebar geben:

#sidebar {background-color: # 66CCFF-}

Code könnte dann in etwa so aussehen:

id ="sidebar">
Custom Web Design Services
# 133;

Etikett

Tag Stile können Sie automatisch den Stil und die Positionierung einer bestehenden HTML-Tag neu definieren, wie zum Beispiel Körper, p, h1, oder li. Zum Beispiel könnten Sie die Schriftstile für alle stellen Sie Ihren

Tags in Ihrer gesamten Website oder in einem bestimmten Abschnitt:

h1 {font-family: Arial, Helvetica, sans-serif-font-size: 1.2em-font-weight: bold-color: # 8c9292-text-transform: uppercase-}

Verbindung

Compound Stile werden auch automatisch auf ein Element angewendet basierend auf seiner Position innerhalb der Seite, wie alle Tags innerhalb der mit der ID Sidebar, der mit der ID in einem übergeordneten Container sitzt von Verpackung:

#wrapper #sidebar h1 {color: # CC3300-font-family: "Times New Roman", Georgia, Serif-}