====== Klassen & IDs ====== ==== Deklarierung in HTML ==== ++++ als Attribut | ++++ ==== in CSS ==== #id { /* Beschreibung */ } .class { /* Beschreibung */ } ===== Klassen ===== Eine Klasse kann mehreren Elementen zugeordnet werden. Im folgenden Beispiel wird mit h3.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h3 gilt: also z.B. auf HTML-Elemente wie ''

'' anwendbar ist. Mit ''*.hinterlegt'' wird gezeigt, dass man den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden kann. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel ''.hinterlegt'' kann man das sehen. Ein ''h3''-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor ''h3.hinterlegt'' bestimmt werden. Ein ''p''-Element mit ''

'' erhält dagegen die Formatierungen, die mit ''.hinterlegt'' bestimmt werden. Es können auch mehrere Klassenselektoren hintereinander verwendet werden. h3.hinterlegt {background-color:red } *.hinterlegt {background-color:yellow} .hinterlegt {background-color:yellow} .groesser {font-size:24pt; } .unterstrichen {text-decoration:underline;}

Diese Überschrift erscheint rot

Diese Zeile ist gelb hinterlegt.

Diese Zeile ist größer geschrieben.

Diese Zeile ist unterstrichen.

Diese Zeile ist gelb hinterlegt, größer und unterstrichen geschrieben.

 ++++ komplettes Beispiel |

My CSS web page!

Hello world! This is a W3Schools.com example.

Diese Überschrift erscheint rot

Diese Zeile ist gelb hinterlegt.

Diese Zeile ist größer geschrieben.

Die auch.

Diese Zeile ist unterstrichen.

Diese Zeile ist gelb hinterlegt, größer und unterstrichen geschrieben.

Diese Zeile ist unterstrichen. v2

 ++++ Die beiden HTML-Elemente
und haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Unter Verwendung von div oder span ist es also Möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen.
Eine Kapitelüberschrift
Eine Sektionsüberschrift
 ===== IDs ===== Eine ID lässt sich nur einem Element zuweisen, identifiziert dieses somit **einmalig** (auch wichtig bei JS!) Im folgenden Beispiel wird ein Individualformat definiert: Solche Formate beginnen also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das ''id''-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Der prinzipielle zwischen ''id'' und ''class'' Unterschied liegt nicht in CSS, sondern in HTML bzw. Javascript. Mit dem ''id''-Attribut können Elemente eindeutig bezeichnet werden; diese Eindeutigkeit bedingt, dass der Bezeichner nur einmal pro CSS-File vorkommen darf. #merksatz { position:absolute; top:130px; left:30px; width:320px; padding:10px; margin:0px; border:4px solid #EE0000;}

Im rechtwinkeligen Dreieck gilt: Summe der Kathetenquadrate = Hypotenusenquadrat

 ++++ fertiges Beispiel |

My CSS web page!

Hello world! This is a W3Schools.com example.

Im rechtwinkeligen Dreieck gilt: Summe der Kathetenquadrate = Hypotenusenquadrat

blub

Im rechtwinkeligen Dreieck gilt: Summe der Kathetenquadrate = Hypotenusenquadrat

++++