¶ Intro CSS und HTML
Was? Moin zu einfach komplex. Folge 55 mit Burkhard und Gerrit und Burkhardt Moin Gerrit So. Genau, Leute, ich habe es vor 2 Wochen schon gesagt, wir sind auf der Hannover Messe vom 22 bis 26 April, freitickets gibt es wieder in den Shownotes einfach auf den Link klicken könnt euch ein Ticket auf die heißen Wer einlösen und vorbei kommen Kaffeetrinken freuen wir uns drauf.
So jetzt soll es losgehen mit CSS heute Cascading Stylesheets die mir bekannt sind aus HTML und CSS das kommt immer so im Doppelpack daher, also zumindest wenn man mal irgendwie. Versucht hat, eine Website selber zu erstellen oder sowas und da sagte Burkhard aber du sagtest Burkhard CSS müssen wir alleine behandeln, wieso denn eigentlich ist das kommt das
auch mal allein daher oder ne? Ne, das kommt da eigentlich nie allein da. Ja, das ist ja die, ja, das ist die Anmal, die Anmalanleitung für das html, deswegen sagt man immer HTML und CSS, also ohne HTML bringt sie nichts, da kannst du hinschreiben, hat aber keinen Wert. Aber du sagst, CSS ist so wichtig und da gibt es so viel zu wissen. Das war mal eine ganze Folge
machen. Ja, auf jeden Fall. Ich mache auch schon ein bisschen CSS, ich glaube, ich habe immer noch nicht alles benutzt, was das Ding kann, ja ziemlicher Wahnsinn. Es ist halt wie. Ja, du kannst das von den Frauen ne, also es ist wieder klamottenschrank. Ja von den Frauen, also der Körper selber ist mal das HTML der nackte Körper.
Ja hat ne Hand an Kopf n Fuß n Bein n Bauch n Po, das sind so die Tags sage ich mal das ht m Ls also wir haben den heading 1 Setting 2 wir haben p tech für Paragraph also für Text also das HTML hat keinen Anspruch darauf wie es angezogen ist, sondern es ist Content Inhalt, also der Körper an sich.
Könnte. Sein oder auch ein Mann sein kann ne Frau sein, ja, na ja, die Männer haben nicht so viel im Kleiderschrank, deswegen hab ich TSS jetzt mal mit der mit dem Frauenkleiderschrank. Ich glaube, da gibt es solche und solche. Ja gut, im Schnitt würd ich sagen, also jedenfalls bei mir und meiner Frau ist der deutliche Unterschied und deutlicher Unterschied.
In den Quadratmetern. Aber ich kenn, wie auch immer, es ist ein bisschen ein Beispiel, aber es ist gar nicht so schlecht, das Beispiel, denn genau, selbst bei gleichem Content kannst du, je nachdem was du für ein TSS dem Content anziehst, die Figur, die danach rauskommt, den Mann oder die Frau sehr, sehr unterschiedlich aussehen lassen, ja so, dass man fast gar nicht mehr erkennt, dass das mal die gleiche, dass das eigentlich genau der gleiche Inhalt ist.
Ziemlich krass genau und deswegen HTML und CSS zusammen und CSS ist halt extrem mächtig, so mächtig wie alles Gedöns. Also du hast ja Hosen, t Shirts, Röcke. Armbänder und so weiter und du kannst sogar das nicht nur statisch beschreiben. Im CSS gibt also auch mit den neuesten Versionen die Möglichkeit zu sagen, wie sich auch irgendwas bewegt, dreht, skaliert. Von vorne nach hinten rutscht also vielleicht da der Vergleich irgendwie was weiß ich. Dann Klamotten.
Also würde sich jetzt drehen und bewegen, keine Ahnung, propellerhut Propellerhut genau ja gar nicht schlecht, ja.
Ja oder irgendwie so ne Art Smartwatch da irgendsowas wo irgendwie welche Farben leuchten oder was weiß ich ja genau ja nee das ist so Gerrit hast richtig verstanden, ja und weil das so tief ist und so viel gedünst da drinne steckt hab ich gedacht wir leuchten da mal mit der sogenannten Techniktaschenlampe einmal kurz drauf, dass man so ungefähre Ahnung hat, was ist das eigentlich mit?
Dem CSS. Cool. Das heißt, wir gucken uns n bisschen an, was damit geht und vielleicht zum Start aber einmal ein bisschen zur Historie. Ich hab kurz mal geschaut und CSS ist ja im Grunde so alt wie das Internet, könnte man fast sagen. Ja, aber das Internet ist ja auch so n bisschen bekannt geworden durch die ganzen HTML Seiten ne und man also wenn man jetzt HTML ohne CSS anguckt. Ja, dann sieht das halt aus wie halt so ne Webseite in den ich weiß gar nicht.
Seit wann gibt es das Internet, aber wie die ersten Webseiten halt aussahen, ziemlich grauselig ja, manchmal sieht es wenn das CSS nicht lädt wenn man mal so ne zerschossene Seite sieht, dann sieht man so boxen die so richtig lieblos aussehen und der ganze Text ist irgendwie oben links gebündelt irgendwie sieht richtig katastrophal aus, das ist der Effekt wenn CSS nicht geladen ist. Wenn es nicht an ist, dann sieht man quasi das nackte html. Weißt du, wer es erfunden hat,
oder? Nein, ich hab tatsächlich, ich hab den Wikipedia Eintrag heute nicht studiert. Ich wollte mich ein bisschen auf den Inder, aber gut, wenn du es weißt. Ja, ein Norweger. Der weiß natürlich nicht, wie man es ausspricht, aber da ich sag mal der harkon veum li norweg. Der auch unter anderem mit Tim Berners Lee CERN gearbeitet hat. Unter. Anderem ja, da ist ja das Internet auch entstanden. Genau da passt zusammen ja richtig. Ja, das war 1996.
Ja, da hat er damit angefangen. Dann war das schon. Ja ist ne Weile her, ja. War ich 16 oder 7? Gut. Genug von der Geschichtsstunde, aber da ging es auf jeden Fall los. Ja, und da hat sich auch gedacht, ja, das sieht doch alles ein bisschen blöd aus, nur das HTML, ich mach mal CSS genau und das Konzept ist ne super, ist ne super Idee, halt irgendwie die Visualisierung die UIUX zu trennen vom Content.
¶ Nutzung und Priorisierung von CSS
Ja das Macht hat schon immer viel Sinn gemacht, genau da fangen wir mal an kurz was ist eigentlich CSS und wie kann ich es benutzen? Also was es ist, haben wir ja schon beschrieben. Und was es für eine Aufgabe hat.
Wie sieht es aus, wenn man es jetzt technisch anguckt, also wenn ich so ein html Dokument habe, ein Dokument html Dokument gleich html file also ich kann mir, ich kann ja ein html File im Texteditor schreiben, ist ja nur Text, der muss halt muss halt dem HTML Syntax genügen, das sind ja immer diese, das hatten wir auch schon mal diese eckigen Klammern Sachen also ich habe immer eckige Klammer auf dann kommt irgendein html Tag zum Beispiel h 1 und dann kommt die Klammer zu.
Und dann kommt der entsprechende, der Titeltext. Inhalt? Ja genau, und dann kommt der schließende Tag. Ne schließen Attack hat wieder so n kleiner Zeichen auf Slash und so weiter darum soll es aber nicht gehen ja was aber wichtig ist, dass HTML an sich quasi eine eine ja genestete Struktur hat.
Ne, du kannst ja quasi, du kannst halt mehrere Text aufmachen und ineinander verschachteln und die dann wieder zu machen, so aber in so einem HTML Dokument wird quasi dann auf auf 3 verschiedene Möglichkeiten. Kannst du dir auswählen? Je nachdem kannst du quasi dein
CSS verankern und ausdrücken. Ja und und diese 3 Möglichkeiten sind ein externes CSS File zu verlinken und das tut man in dem in dem also wenn man jetzt ein html Dokument hat, das teilt sich erstmal ganz auf der ganz obersten Ebene in Header und ein Body ist das vielleicht auch schon mal gesehen. Habe ich schon mal gesehen. Ja genau, es gibt immer so ein Header Tag und da stehen so Header Gedöns Sachen drinne.
Du schreibst sie zum Beispiel wie der Viewport ist und wie vielleicht eine Anwendung heißen soll und so weiter sind also Sachen die jetzt nicht gleich direkt auf der Seite rendern,
sondern. Mit einem Favicon. Und was steht da oben in einem Browser, wie das heißt und so weiter und im Body steht eigentlich der Content auf für die Seite so ne. Also da kommen dann diese ganzen h 1 Diff und so weiter aber im Header darum geht es also wenn es extern verlinkst das kannst du dir so vorstellen tatsächlich wie ich hab n Kleiderschrank. Mit den nur bei dem Beispiel zu bleiben, mit den ganzen Klamotten drin, die das CSS
beschreibt. Dann sage ich ihr, liebe liebes HTML Dokument, da hinten steht mein Kleiderschrank, den nimmst du bitte ja, und was heißt das jetzt in Text, Sprache, da kommt ein Link Element rein und in dem Link Element steht der hat 33 Attribute wie man so schön sagt, da steht rel type und href. Heutzutage sind in einem Link Element nur noch die Attribute href und rel notwendig anzugeben. Der Typ des verknüpften Dokuments, der durch Type ausgedrückt wird, ist standardmäßig auf CSS.
Und Rell, da steht da da quasi so n stylesheet, damit dieses linkeding weiß, oh ich bin n stylesheet Link ja. Oder nochmal das href. Da steht dann quasi der Link drin, also wo das wo das CSS Licht aufrufbar von irgendeiner Stelle. Ja und dann wird dieses ganze CSS file eingeladen und angewendet. Ja das ist die externe Möglichkeit es zu einzubetten. Und dann gibt es noch ne ne weitere Möglichkeit ist intern einzubetten, also quasi in die in den Header auszuschreiben.
Dann benutzt du sogenannte Style Tag Style, Tag auf und dann schreibst du CSS runter quasi live in dem HTML Dokument. Ja, da das schreibst du. Aber im Header sagst. Du fragst, schreibst du bei dir, kannst du dich immer wieder drauf berufen, also egal ob das jetzt extern ist oder mit drinne, aber du richtig, das ist sowieso so genau, also entweder verlinkst du es extern oder du schreibst es intern in den Header rein und und dann benutzt du quasi da.
Genau, du benutzt benutzt es quasi in dem in dem Body und in den. Also n Beispiel, da steht zum Beispiel h 1, ist dann grün oder so.
Ja, genau so sieht es aus. Genau, tatsächlich kommst du ehrlich später gemacht, aber genau du hast immer n Selektor, zum Beispiel h 1, dann geht ne geschweifte Klammer auf, dann kommt der sogenannte sogenannte Property, die TSS Property zum Beispiel Background Color und dann der Wert davon Queen könntest du machen, tatsächlich ja und dann kannst du sagen Background Color jetzt bei h 1 ist blöd, da müsstest du color nehmen, wenn du wenn du den Text anfärben willst ist ja meistens.
Sonst hast du, hast du den Hintergrund grün und der Text ist irgendwie so ne. Also hast du also Color Green genau und dann und dann könntest du sagen später in deinem H 1 Element kannst du einfach das hinschreiben und alle h 1 sind dann halt grün, so funktioniert es tatsächlich. Ja, also ist der interne Weg es aufzuschreiben und dann gibt es noch den sogenannten Inline weg, der Dritte.
Da schreibst du es dann quasi nicht mehr in den Header, sondern direkt an das Element, was du stylen möchtest. Also wenn wir jetzt bei dem h 1 bleiben, sagst du halt h 1 auf
und. Und dann gibt es n spezielles Attribut, was in den, was in dieser Tager mit rein muss, das heißt Style, dann sagst du, Style ist gleich und dann schreibst du direkt inline, deswegen heißt es so inline das CSS in ne, also in diesem Fall Style ist gleich Anführungszeichen oben geschweifte Klammer auf Color doppelpunkt, Green Semikolon, geschweifte Klammer zu rums ja und dann ist aber auch nur dieses h 1 wo es drin steht grün und alle anderen denen ist das Wurst.
Da habe ich jetzt direkt 2 anschlussfragen. Schieß los. Was ist denn die Best practice? Also mache ich das. Mit einem externen verlinkten Stylesheet oder file oder mache ich das alles im Header im Dokument selber im html Dokument oder sogar inline? Und welches ist dann angenommen? Ich mixe ja was ist dann am Ende das was die Oberhand behält und angewendet wird tatsächlich?
Sehr gute Frage. Die Antwort steckt schon im Namen. Cascading Stylesheets bezieht sich genau auf die Frage und die Antwort auf das Problem. Es hat es gibt eine Prioritätenabfolge. Wenn du alles 3 benutzt in in welcher Reihenfolge was los ist. Aber das ist jetzt schon der zweite Teil deiner Frage. Ich hab aufgepasst. Du hast zuerst gefragt, was ist die Best Practice? Die Best Practice ist?
Ist alles 3. Es hat alles 3 seine relevanten Zwecke. Manchmal willst du dynamisch oder ganz kleinteilig eine bestimmte Sache ändern. Du willst aus aus einem langen Paragraphen ein Wort in rot schreiben und sonst nie irgendwo. Dann machst einen Inline Style ja direkt in dem an der Stelle, wo du es brauchst. Das Interne wird ganz oft genutzt, wenn du so Bibliotheken hast, wo du so ganze Klassen definierst oder Irgendsowas hat auch sein Relevanz, wo du ja so
so mittelgroße. Abschnitte deiner Webseite einheitlich stylen möchtest und mit dem Externen, das ist ja so der Kleiderschrank, da kannst du, da kannst du so das ganz das die ganz großen Zusammenhänge machen wie wie rund sind meine meine Borders im Prinzip ne so diese diese grundsätzlichen Stylings du kannst du kannst ja sehr grundsätzlich sein, du kannst den ganzen Buddy Styles kann man später auch noch zu du kannst halt sagen alle Elemente die irgendwie eine Border haben
haben die halt leicht abgerundet ja oder alles hat eine ganz sanfte Transparenz ja so ein bisschen Glow und so weiter das könnte man sehr gut über so ein externes Teil steht dann laden ja und dann kannst du dann kannst du auch verschiedene Sorten von denen haben, dann kannst du halt sagen okay das ist halt der eckige Style, dass du ein bisschen runderes Teil von meinem Kram. Es wird alles 3 auch heute noch. Benutzt und also ich würde nicht sagen, es gibt da irgendwie best
practice oder sowas. So eine schriftfarbe mal als Beispiel. Also schwarze Schrift haben als Standard, die würde ich dann ja, das würde ich jetzt. Quasi entweder intern oder im Externen unterbringen.
Also das würde ich jetzt, man muss sagen, die die die inline Styles, also wenn du immer direkt ans Dokument im Dokument, das also im Element das Styles ist natürlich super praktisch, aber es ist halt nicht Dry, das hatten wir auch schon mal ne also dann repetierst du wenn du andauernd wieder das gleiche machst repetierst du dich ja quasi don't Pete Yourself don't we be yourself ja genau 3 also und plus es ist, das ist vielleicht der wichtigste Punkt dabei, das können wir noch
sagen, ist egal. Es forscht sich ja, es geht um eine html Seite, aber es ist. Die Performanz ist besser, wenn du es in einem Stylesheet auf globalerer Ebene ausdrückst, weil der Browser muss ja ständig deinen deinen Inhalt rendern, andauernd ja in einer hohen Abfolge, im Notfall, wenn sich das ändert, und dann muss ja einfach mehr Content parsen,
wenn das inline ist. Während also das ist technisch immer noch so, dass es etwas besser für die Performance der gesamten des gesamten Webauftritts ist. Wenn du es externalisierst, also ja, also entweder. Kern oder Examin? Und wer ist jetzt Vorrang? Vorrang hat Inline inline, überschreibt alles ja und dann kommen Internal und Externe gleichzeitig. Er war nicht ganz gleichzeitig. Da kommt es auf die Reihenfolge an, indem du es im Header definierst.
Ja, und der Letztere gewinnt ja, also würdest du quasi intern was hinschreiben. H 1 ist h 1 Color ist immer schwarz. Ja sag ich mal.
Und dann lädst du dann nach, also da drunter, quasi in der Reihenfolge des des Codes des HTML Codes, quasi ein externes Teil she 3 wo es sagt nein h 1 Farbe ist halt immer blau, dann gewinnt blau, würdest du es andersrum machen und das Externe zuerst laden mit dem Blau, danach intern definieren, dass h 1 immer schön schwarz ist, ist es schwarz und machst du gar nichts, hast du gar nichts definiert für irgendwas gibt es auch noch 1 habe ich mir nicht gesagt, es ist das Browser
default, die sind unterschiedlich je nach Browser der so ne so ne für so bestimmte Sachen.
Ne, dass du zum Beispiel zum Beispiel ist ein Text, wenn du nichts dazu sagst ist der immer schwarz, ja und nicht weiß, weil meistens irgendwie, weil zum Beispiel auch wenn du nichts dazu sagst halt die Background Color weiß ist ja also hat der Browser drin stehen, Background Color ist mal weiß und Text ist mal schwarz, da kannst du wenigstens mal was lesen ja also wenn das beides weiß wäre ja schon ziemlich essig genau und diese Defaults greifen halt wenn du gar nichts definiert hast
selber ja die kommen zum aber zum ganz und zu ganz zum Schluss ja das ist die Kaskade quasi der Prioritäten. Deiner Style Schieds und das ist auch ganz normal, dass sich dass sich tatsächlich dieses Teilschieds in bestimmten Attributen überschreiben, nicht so schlimm, ja, und und immer wenn du mal was hast, was du, was du gerade nicht so willst, dann kannst du immer diesen inline Style nehmen und das halt über Brettern so, das ist schon gut gedacht. Okay alles klar. Ja, genau so.
Und jetzt gucken wir mal. Wir hatten es schon ein bisschen angeteasert. Wie sieht dieses CSS tatsächlich aus, wenn ich es aufschreibe und das ist jetzt eigentlich egal, ob es jetzt in den Pfeil schreibe oder ob ich es jetzt quasi in diesen Style, also hinterher hinter diesem Style Tag hinschreibe. Oder auch, ob ich es quasi inlines schreibe. Und dann steht da halt Style gleich, ja. Hat das eigentlich. Hat das eigentlich die gleiche, den gleichen Aufbau und hat man
¶ Aufbau und Elemente von CSS
immer gleich hin und es ist immer so, dass es ganz am Anfang sagst du erstmal wer ist mein der sogenannte Selektor auf was bezieht sich dieses, dieses Element, das ist aber nur richtig für Internet extern, weil wenn ich es natürlich direkt schon an Element schreibe ist der Selektor klar, nämlich dieses Element was ich da gerade angucke und dann kommt der die kommt, die sogenannte Decklaration die Declaration gliedert sich auf in ich würde mal sagen Key Value, aber ich
glaube im CSS sprech heißt Property und Value. Und die Property ist die CSS pro Partie. Davon gibt es sowas wie Background Color hat man schon Font family, texteleien, padding margin Color border Borderradio und die Liste ist wahrscheinlich, ich weiß es nicht 300 400 Einträge lang an Properties die. Die halt irgendein Style hervorrufen soll. Richtig viele von ja und richtig viele muss man eigentlich auch
wissen. Ja und der Value ist halt der Value, der bezieht sich immer auf die Property, der ist sehr
unterschiedlich. Ja bei Color gibt es zum Beispiel kannst du ihn schreiben Red Queen Blue, also tatsächlich ausgeschrieben als Twing, da kannst du aber auch diesen, das kennen wir, diese diese in diesen Hacks Color nehmen, das fängt ja mit dem Hash an so und dann hast du halt irgendwie zum Beispiel Fffffffffff normalerweise sind das weiß dann das weiß genau, das ist quasi in Hex codiert, die die Farbe, die RGB Kanäle tatsächlich, das kann man mal kurz sagen, an der
Stelle ist eigentlich ganz lustig, nämlich ganz einfach. Das ist quasi und RGB ist in 256 aufgeteilt, 256 aber als als Hexadezimal ausgedrückt. Und im Hexadezimalen ziehen wir immer bis nicht nur bis 10. Wir haben noch mehr Symbole erfunden, nämlich ABCDEF nach der Neuen kommt noch ABCDEFA steht für 10, b für 11, f dann für 16 und wenn der ff hast, dann hast du quasi 255, das ist quasi der Dezimalwert zu dem ff, zu dem Hex und wenn du alle 3 Farben anguckst, dann ist es
halt ff FF für. 3 Farbkanäle, also 255, 255, 255, volles Programm überall und das heißt Halt weiß ja und 000. Also wenn du 6 Nullen ein Donnerst, dann bist du schwarz ja so und wenn du pur rot bist, dann hast du halt am Anfang da
stehen FF 0000 hast du halt rot. Ja das hat jetzt mit CSS nichts zu tun, sondern wie man die Farben kodiert aber wollte ich nur mal kurz sagen, ist nämlich auch keine Raketenwissenschaft so ja. So, und dann kannst du auch immer sagen, noch RGB Klammer auf Klammer zu und dann gibt es halt die RGB Dinger ein und so weiter genau und aber wenn du zum Beispiel sagst Margin, dann gibt es auch mehrere Sachen, da kannst du sagen Pixel oder in Prozent und so weiter aber das
ist alles dokumentiert, ist halt irgendwie aber Value bezieht sich halt immer quasi auf die Property die ich gerade habe. Und diese Properties, du sagst, da gibt es ein paar 100 war es das? Dann kann ich damit alles in meiner auf seiner Website durchstylen oder gibt es da noch Sachen, die ich noch. Andere Dinge, die ich weiß ich nicht erfinde, erschaffe dich noch ausstylen könnte irgendwie Animationen ganz besondere schaffe, die dann passieren noch
keiner vorgesehen hat im CSS. Ist eine sehr gute. Frage. Heißt es so, dass da. Würde ich sagen, kannst du mit CSS fast alles erschlagen. Es gibt auch so Leute, die haben so richtigen schwarzen Gürtel sag ich immer im CSS und die machen die krassesten Sachen es. Ist aber ein ein Kompetitor zu dem CSS. Das ist Java Script. Jetzt muss er einmal kurz verstehen, wie funktioniert das eigentlich.
Also wenn ich jetzt HTML und CSS aufschreibe in so ne Seite, dann hab ich das ja quasi schon zur Design Zeit Informatiker sagen wir mal compilet Timer, also zur Entstehungszeit statisch festgelegt was los ist sieht das Ding aus wenn der Browser das dann also ich kann ja so ein html Dokument fertig machen, speichern und den Browser zum Laden schreibst du html dran und zeigst dem Browser das Latas so ja kannst du das ja angucken, ist ja easy ja und dann kann da trotzdem was animiert sein und
so weiter weil CSS auch in der Lage ist Animationen auszudrücken aber ich kann es als letzten Tagesordnungspunkt heute so und eigentlich kannst du damit fast alles machen. Jetzt aber doch Sachen, die du vielleicht wo du sagst so okay. Das hat die 340 Sachen, die ich irgendwie noch machen will, die hat es erst noch nicht vorgesehen.
Jetzt kannst du mit Java Script ja immer alles manipulieren, also Java Script ist eine Programmiersprache und die kann Sachen zu Run Time. Also während das quasi läuft, während der Browser das Rendert, kann die wilde Sache machen. Ja, du kannst sagen nach 10 Sekunden, dass die Seite angezeigt wird, nimm halt manipulier halt den CSS Eintrag da wo Green steht schreibst du jetzt halt rot hin.
Dann machst im Prinzip passiert nichts anderes als das Java Script als Programmiersprache dir das umbaut live ja und der Browser muss das Schlucken, ja. Und das hat man früher noch viel mehr genutzt. Das Javascript für dynamisches Stylen und so und für Animationseffekte.
Und und das CSS hat aber nachgerückt, weil im Prinzip ist es n bisschen hacky, wenn du zu viel javascript machst um zu stylen, dafür ist es ja eigentlich nicht gedacht ja sondern javascript ist mehr so für die für die richtige Businesslogik ja damit willst du eigentlich Daten abholen aus dem Backend und so weiter und sofort ja.
Das ist, und deswegen hat das CSS immer mehr auch von diesen Funktionalitäten zu früher mit javascript gemacht, hast übernommen und im CSS 3 gibt es wirklich viele Möglichkeiten
ohne Javascript das zu machen. Und immer wenn du nicht javascript nimmst um zu manipulieren ist es auch noch schneller, weil CSS Halt n Standard, den kennen die Browser alle, alle browserhersteller müssen sich da richten müssen das implementieren können heute ist das war auch nicht immer so, also die zwischen Theorie und Realität gab es da immer auch schon eine Diskrepanz, es konnte halt nicht immer jeder und musste auch CSS Hacks einführen für bestimmte Browser und so
weiter gibt es. Mit minus Mozilla und minus irgendwie Internet Explorer war da mal ganz schlimm. Ja, ist heute viel besser und wenn es das im CSS gibt, ist es Best Practice, dass man es dann auch nimmt, weil es meistens viel schneller performt und. Ja, cool. Genau, was haben wir gesagt. Also wir haben jetzt gesagt, was ist CSS, wie kann man es definieren, diese 3 Wege inline
externe und internal. Es hat alles eine Priorität und eine Reihenfolge, deswegen heißt das Cascading Wir haben uns angeguckt, was ist ein Selector. Das mit dem Selector habe ich eben gerade gesagt, nicht genau verstanden, aber genau da sind wir auch noch nicht fertig. Auf was es sich beziehen soll im
HTML. Der Selector hat auch noch mal 3 Möglichkeiten, wir haben jetzt die haben jetzt den ersten einfachen Fall genommen, wo ich sage als Elektor zum Beispiel in so einem Stylesheet, also beim beim beim Inline Style ist das Selector ja ganz klar das Ding was du gerade wo das da gerade dransteht. Wenn du jetzt aber einen Internet interne oder ein externe Style shit hast ist ja nicht mehr klar und im einfachsten Fall sagst du Halt ist alle H Einsen sehen halt so aus, alle PS sehen so aus.
Ja du nimmst quasi, dass der Selektor quasi identisch zu dem HTML Tag den du den du stylen willst. Der kann ja aber tausendmal auf der Seite vorkommen.
Ja hast ne große Seite, hast ja zig Paragraphen da drin ja da geht NP auf und wieder zu Norm p auf und noch wieder zu, dann kommt irgend n Tiff und dann geht wieder NP auf den PC und da sind die alle gleich aus das reicht nicht um um gut zu stylen, deswegen gibt es mehr Selektoren du kannst auch dich auf eine ID beziehen was jetzt eine id. Das hat alles mit HTML zu tun. Also du kannst quasi im html Tag sagen, zum Beispiel so ein p Tag im Paragraph tag kannst du sagen
id ist gleich. First Night. Jetzt gibst du einfach diesen Paragraph, eine ID, die muss unique sein für dieses ganze Dokument. Ja, und damit identifizierst du jetzt dieses Element ja und sitzt auch mal völlig Wurst ob das NP oder n Diff oder irgendwas ist. Ne das ist auch über die über die verschiedenen Elemente völlig egal.
Es hat eine ID UNIQUE zu geben auf diesen Dingen ja, also es könnte eine geben, die dürfen sich halt nicht wiederholen und dann kannst du einfach im CSS dich auf eine ID beziehen als der Lektor und dann schreibst du dahin hash unsere Raute die wir immer benutzen wenn wir irgendwie bei linkedin oder irgendwas machen. Nee bei Linken ist nicht nur doch bei Linken ist auch diese tags also beim CSS gab es das Halt auch schon immer. Und das halt diese Raute.
Und dann sagst du halt id. Also wenn ich jetzt im html Hinschreibe p und dann sage ich id ist gleich First Name, dann kann ich im CSS hinschreiben, Raute first Name und dann mache ich meine geschweiften Klammer auf und Style los mit property dann sage ich Color Green margin 4 Pixel oder irgend sowas und dann wird genau das Element was diese id hat gestylt und sonst nichts das ist die zweite Möglichkeit und die dritte Möglichkeit sind die Klassen classes.
Du kannst halt auch einem html html Element eine Klasse zuweisen von der klasse Button. Wow, das ist ja es ist der Apply Button, bisschen bisschen zu generell also sowas. Wie die Call to Action section. Oder sowas. Also was du immer ganz anders auf einer Webseite bestimmte,
unter den Futter oder sowas. Ja genau, also quasi im Prinzip ist das ist, das ist die Class, also während die ID ein einziges Single id Style ist, ist das Expliziteste während der Tag Name alle von der gleichen Tags Orte stylt ist es auch und die Klasse ist dazwischen alles was diese klasse hat kriegt dann das Teil und die Klasse drückst du auch wieder aus im html Element, da sagst du halt nicht nicht id man sagt Halt Class ist gleich
und gibst dem Klassen Namen. Ist auch Wurst welches Element das ist? Ja, du kannst die gleiche Klasse an verschiedene html Elemente machen. So, und das ist eigentlich und wenn man es dann in der also jetzt klingt, jetzt alles sehr abstrakt, wenn man es aber live nutzt, hast du mit diesen 3 Möglichkeiten alle scharfen Waffen in der Hand um sinnvoll so ein Dokument zu alle diese Cases gibt es. So n.
Sind Dinge sinnvoll zu teilen? So ja und die Klassen immer um das noch zu sagen, die Du schreibst auf die Klasse einfach hin, ne Klasse ist gleich call to action Button oder Irgendsowas und im TSS sagst du im Selector sagst dann Punkt ist wichtig der Klassenindikator ist Punkt Call To Action Button und dann wieder geschweifte Klassen dings auf also um das motivieren wir haben Selektoren die sagen wen soll ich denn hier stylen, welchen Content und das auszudrücken gibt es 3
Möglichkeiten. Einfach über den Tag Name vom html Tag über die explizite ID die zugewiesen sein muss oder über die Klasse, die du selbst definiert hast im HTML. Ich weiß nicht, ob du noch drauf kommst auf das Thema, aber ich denke gerade so darüber nach, wie Styling von Webseiten früher
war und wie es heute ist. Insbesondere wie es früher war, weil heute kann ich dir sagen, benutze ich, benutzen wir ja no Coat website Baukasten und da gibt es vorgefertigte Elemente und hinten wird schon noch letzten Endes das Html erzeugt, also die HTML Files und die CSS Files, die gibt es. Wahrscheinlich auch Inline CSS. Wenn ich dann ganz bestimmte Sachen doch lieber noch rot machen möchte oder fett oder was
auch immer. Aber wenn ich mir das jetzt vorstelle, dass ich das jetzt früher gemacht habe, ja Webseiten zu stylen, das ist ja gar nicht so einfach gewesen, oder konnte man das wirklich zur Compilet Time zu Bild Time auch immer direkt sehen, ja. Da kannst du ja beim Browser. Also es gibt ja heute mit den ganzen Visual Studios und ids auch mit den, Wir hatten es ja gesprochen, auch die Developer Tools, vor allen Dingen gerade da du kannst. Du kannst mit der blanken html Seite anfangen und.
Und du machst das CSS quasi im Developer Tool und der zeigt dir live was passiert. So, und das war früher auch schon so, also das war immer alles so relativ live. Ja, heute wird es wird immer alles angenehmer, je weiter wir in der Zeit fortschreiten. Aber das war schon früher auch
ziemlich usabil. Ja und und das Laden von der Website, das ist ja, das muss ja nichts kompilieren, das ist ja alles direkt interpretiert, ja, also das ist schon nicht das Problem, aber ich verrate dir ein sahniges Geheimnis, selbst in unserem Low Court und so weiter und wir haben ja auch so ein, wir haben so einen Knopf, wo du die ganze Ci usw einstellen kannst. Aber was wirklich passiert ist und wir benutzen dann library, das ist auch kein Geheimnis.
Die heißen Dev Xtreme und du hast, da ziehe ich Widgets drin und so weiter sehen alle toll aus, es wird aber ein riesiges externes externes Stylesheet erzeugt, riesengroßer das alles definiert wie jeder einzelne Button aussieht und so weiter für verschiedene Widgets und so weiter gigantisches File, die sind auch manchmal richtig groß, also da kannst du richtig lange scrollen bis da wieder zum Boden kommst.
Ja und dieses Stylesheet wird dann live eingeladen und stylt hier und so kannst du zum Beispiel so eine ganze Corporate Identity machen, wenn du sagst immer eine Akzentfarbe ist das und so weiter das ist in diesem Style sehr sehr elegant ausgedrückt. Formt quasi den gleichen Content um, aber macht dann quasi alle Hintergründe aller Buttons ein bisschen orange in der CI Farbe und so weiter und sofort. Ja, das passiert tatsächlich heute immer noch.
Also das CSS ist nichts was. Was heute anders ist, dass du quasi das nicht mehr so per Hand editieren musst. Es gibt auch zig Bibliotheken. Heute sind richtig gut. Also ich sag mal so einen muss ich nicht merken.
Ja es gibt so CSS Bibliotheken die die dir so auf einer höheren Flugebene auf einer höheren Abstraktionsebene, wo du einfach nur noch so ein bisschen sagst, ich will es ein bisschen runder haben, ich will es mit der Akzentfarbe haben und so weiter dir schon sehr gute Templates machen und du sagst so Standardabstände und so weiter für so ein.
Es gibt ja immer so ein bisschen so ein Look and feel sage ich mal so ein einheitliches und dafür gibt es Bibliotheken die dir da quasi die CSS Arbeit sehr stark erleichtern und schon quasi das CSS für Dich erzeugen du kannst immer noch das CSS per Hand manipulieren, ne, aber die haben ja quasi schon sehr gute Defaults und eine dieser sehr bekannten Library Stars talewind so das ist ne Libri die die kann quasi mit der kannst du quasi
CSS erzeugen indem du es auf einem höheren Level ausdrückst. Ja, dann weiter im Programm. Wird weiter im Programm. Genau jetzt also wir haben die wichtigsten Sachen, haben wir schon drinne, ich will vielleicht noch mal so ein paar wichtige TSS Properties durchgehen, die man machen kann, also zum Beispiel die also ganz wichtige Sachen sind ja immer Farbe und Frontart und so weiter. Ja und wo ich immer irgendwie so mit Struggler ist sowas wie ab.
Ne Abstände genau gibt's dann Padding und Margin. Ja genau, vielleicht noch mal ganz kurz klarstellen was da was ist. Ja genau, aber nicht brauchen wir nicht allzu lange drauf rum, nee aber aber das vielleicht dann noch mal wichtig zu sagen, es gibt nämlich weil das alles mit HTML zu tun hat, müssen wir jetzt einmal kurz zu HTML
¶ HTML Blockelemente, Margin & Padding
Rübergucken. Und auch 2 Sachen verstehen im HTML. Also es gibt es gibt ja HTML Elemente, die sind also sowas wie p oder IMG, also für Image ne oder h 1 h 2 für für Headings das sind ja alles so Elemente wo ganz klar ist was ist. Also das sind ja quasi Elemente die den Inhalt direkt irgendwie betreffen und es gibt aber eigentlich nur 2 Elemente die so eine Art Containerelemente sind, die muss man mal kennen das div und Bann. Ich würde sagen, dass das noch noch bekannter ist.
Halt das div. Und jetzt müssen wir einmal kurz verstehen, was der Unterschied zwischen also wenn ich sage Containerelement, dann heißt das eigentlich nur ich kann halt irgendwo diffyn schreiben. Und da drin. Schreib ich zum Beispiel PPPH 1 und so weiter also ich ich neste quasi n ganzen Satz von Parametern rein ne und warum mach ich das weil ich dann quasi nen ganzen Satz von Anweisungen. Ein ein einheitliches Styling geben kann oder das Rumrutschen
kann. Ne. Also wir haben, wir haben ja heute in modernen Webanwendungen haben wir ja immer sowieso ne Art Kacheln oder irgendsowas ja, also ich passe bestimmten Content. Zusammen, der dann quasi als Ganzes irgendwie, zum Beispiel wenn der Screen kleiner wird, irgendwie in die nächste Zeile rutscht oder irgendsowas. Dafür ist das ganz wichtig, so eine Art eher strukturierende Containerelemente zu haben. Html, damit ich das überhaupt ausdrücken kann, und das ist
halt das div. Und das Band. Und wo sind die unterschiedlich? Im HTML muss man jetzt auch mal kurz überlegen, wenn man jetzt nur HTML HINTIPPT ohne CSS, dann gibt es 2 verschiedene Arten von Elementen, es gibt die inline Elemente und die Blockelemente und ob irgendwas ein inline Element oder ein Block Element ist, ist mit dem Typ des Elements festgelegt. Und was der Unterschied zwischen Inline und Blog ist? Ganz einfach.
Wenn ich ein Blockelement habe und ich schreibe quasi untereinander blockelemente hin, dann sind die quasi jedes Mal automatisch in untereinander, also in der nächsten Zeile. Das ist Block und ein inline Element, wenn ich die untereinander im HTML Hinschreibe, dann werden die aber hintereinander gerendert in einer Linie. Und das muss man halt wissen, welches Element was macht, wenn man immer so ganz grob irgendwie das Teil. Aber deswegen gibt es 2 strukturgebende Container.
Das Diff ist nämlich n Block Element ja das wenn wenn wenn ich divs hinterschreibe sind die erstmal untereinander. Und das Spam ist nämlich in nen. N Inline Element, danke für das Wort, entfaltet genau und würde sich quasi hintereinander schreiben. So, ja, das ist ganz wichtig und wenn wir jetzt und wenn wir jetzt über Margin sprechen, dann bin ich, deswegen hab ich jetzt kurz von von div. Und span und von Inlinern und so weiter gesprochen, dann macht man eigentlich die Margins gerne an.
Du benutzt relativ viele diese blockelemente du versuchst und du hast auch Divs in Divesendives versucht halt quasi. Content quasi immer zu rappen in so in so bestimmte Einheiten. Ja, und dann kann zu dem gerne mal n Margin geben. Ja dann haben quasi diese diese Blöcke zueinander n bestimmten Abstand und es sieht schick aus und es fließt nicht auseinander. Und und der.
Und der Abstand, den ein Objekt nach außen hat, das ist so, wie wenn ich, ich sag mal ich bin n Objekt und hab ne bestimmte Größe 100 * 100 Pixel sag ich mal ja. So, und wenn ich jetzt sagen will ich hier ganz n anderen Elemente der hier so Rumfleucht auf dieser Seite. Ihr habt Gefährlichst zu mir nach außen 10 Pixel Abstand zu wahren hier das ist ja meine Privatsphäre.
Ja das ist mein wie sagt man bei den Menschen immer hier so n. Die Aura, das ist meine Aura, die kommt eben mal nicht rein. Ja, das ist der, das ist der Margin. Ja, es gibt aber noch n anderes Element.
Du hattest gesagt, das Padding ja, das definiert auch n Abstand, aber das ist der Abstand nach innen, ne also wenn wir jetzt stellen wir mal vor dieser dieses Diff ist einfach ne Box, dann ist der Margin das was außerhalb der Box passiert wenn es eine schwarze Linie ist diese Box und ich hab 10 Pixel margin dann darf von außen keiner näher als 10 Pixel an meine an meinen stricheren rücken an meiner Aura.
Und das Padding ist quasi alle Elemente die da drin sind, weil ich bin ja ein strukturgebendes Element.
Also ich hab zum Beispiel gleich als erstes da drin irgendwie eine Zeile Text und dann sagt das Padding, wie nah dürfen die Elemente, die in mir sind an meiner Linie von innen ranrücken, das ist das Padding, ja, weil es sieht auch richtig Scheiße aus, wenn du, wenn du zum Beispiel tatsächlich mal ein Differ hast, dem du ja mit dem CSS, mit dem CSS wohl border, kannst du dem tatsächlich also typische Weise hat die keine Border und sieht nicht ist alles ist einfach nur strukturgebend,
aber du kannst es anmalen, dann siehst du die border. Und wenn du dir dann einen Text elementar reinmachst und gibst dem keinen Padding, dann klebt dieser Text direkt an der Border und das sieht richtig Kacke aus. Also gibst du dem Padding von und das kann man sehr genau definieren, padding Top Padding Left padding Ride, padding Bottom und dann gibt es eben irgendwie sagen wir mal 8 Pixel padding nach innen, dann sei das
schon schick. So also die Box bleibt schon bei 100 * 100 Pixel, selbst wenn sie ein Padding hat. Richtig. Nur was drin ist, wird halt weiter zur Mitte verschoben, wenn Padding da ist. Ganz genau. Und die Browser, und das ist eigentlich, und das ist alles Verschachteln, passiert alles gleichzeitig und die Browser machen das richtig gut das alles zu machen und mit Padding und Margins arbeitest du den ganzen Tag so. Ist das das Boxmodell?
Darüber habe ich ein bisschen gelesen bei CSS, das ist alles in so. Boxen Container sind, die du genannt hast. Das habe ich noch nicht gehört.
Das Boxmodell vom CSS aber ja, also es ist also es gehört sich, also es gibt, es gibt da noch noch höhere Levels von diesen ganzen Krams, aber es gehört sich so, dass du das also da gibt es auch eine Kunst, gutes CSS hinzuschreiben, was kurz ist und irgendwie alles schön macht, so, ja genau, also es gehört sich eigentlich so, dass du immer relativ viele diffs und so weiter verwendest um Sachen schön zu strukturieren.
Ich hab jetzt zum Beispiel auch gelesen, dass in CSS 3, also meinst du ja noch die neuesten aktuellste Version, aktuellste Version, sowas wie flexbox oder sowas drin ist. Was ist das? Hätte ich jetzt als nächstes gesagt? Ja siehste, das passt ja, also sag mal Flexbox ist ultra wichtig, das muss man also, das ist so, das ist so eine, das ist so ein Power Tool von CSS und
¶ CSS3 und Responsive Design: Flexbox & Grid Layouts
das baut jetzt schön auf, haben wir einen guten roten Faden jetzt gerade gefunden, das braucht nämlich die Diffs, aber das löst jetzt quasi dieses Problem. Ich habe gerade gesagt inline und blockelemente. Und es löst jetzt einfach das auf eine Flexbox da definiert quasi das CSS wie der Krams fließt. Das ist jetzt nicht mehr notwendigerweise untereinander.
Beim Diff kann auch schön nebeneinander sein und so weiter man sagt auch, also man leitet das ein im CSS mit dem mit dem, mit dem mit der Property Display. Ja und man sagt tatsächlich Display, Doppelpunkt Flex wenn ich jetzt zum Beispiel Hinschreibe. Machen wir kurz mal inline CS. Ich schreibe also in div. Als htt, als html Style gleich. Display, doppelpunkt, flex dann drücke ich es aus, dass dieser Container. Und alle seine Inhalte nach dem Flex Prinzip arbeiten so.
Ja und was ist Flex, was soll das überhaupt? Ja, Flex ist für das Layouting da. Ja also und jetzt muss man eine Sache wissen, wenn man man will ja vermeiden als Entwickler, dass man jetzt für zum Beispiel für jede Plattform für jeden Screen Ratio und so weiter komplett den ganzen HTML Code und den CSS Code. Jeweils Handy sein muss. Ja, dann musst du ja 3 oder 4
Sachen warten. Ja also Smartphone, Smartphone gedreht, Tablet, Tablet gedreht, Desktop ja mit 4 K oder oder Ultra HD und HD. Katastrophe genau, allein schon größere und kleinere Bildschirme, Laptop.
Und ja, genau, und am besten Falle hast du einfach hast du hast du deinen CSS und dein ganzes Layout so designt, hast du mit einer einer Single Quelle, das ist alles automatisch funktioniert und flex ist da ist da eine Granatenlösung so ja das kannst du nämlich zum Beispiel sagen im Flex, meistens sagt man es so, du hast du hast einen äußeren Container, da sagst du jetzt da drin ist jetzt alles geflext so und dann hast du da drinnen noch mehrere Container wieso eine Art
Kacheln und dann dann sagst du als erstes mal was für eine Flex Direction habe ich also du bist erstmal wie sich diese inneren Container ob. Horizontal sind oder vertikal. Tatsächlich gibt es diese 2. Es ist Row oder Column, Flex Direction Router column, das heißt du sagst jetzt jetzt kommen meine Kacheln, jede neue Kachel die ich jetzt untereinander schreibe, sie sind entweder nebeneinander oder von vornherein mal untereinander, ist die erste wichtige
Entscheidung, du triffst. Und dann kannst du auf einmal sagen, justify Content, align items und so weiter jetzt kannst du sagen, diese Kacheln. Teilen Sie sich im Raum wie wie nehmen die den restlichen Space, der auf deiner Seite ist und das Macht alles Flex allein du musst dich jetzt also nicht mehr um die Pixelgrößen von der Bildschirm kümmern, das heißt alles alleine du sagst halt irgendwie, verteilt euch so im Raum ja zum Beispiel distribute evenly ja.
Oder lass links, links und rechts maximal viel Abstand.
Ja und und mach dann innen drinne irgendwie n kleines Spacing zwischen meinen Kacheln und so weiter das kannst du alles ausdrücken, ja und du kannst dann auch sagen was soll passieren wenn es mehr Kacheln gibt, weil die Kacheln haben ja ne eigene Größe kannst du sagen ne also die Items so sagt man das auch also du hast den den Container das ist der Flex Container und alles was drin ist die Kacheln das sind die Items und du kannst ja sagen die Items sollen schon eine feste Größe
haben vielleicht ja und was passiert denn jetzt wenn mein ganzer Viewport wie man so schön sagt also der Screen kleiner wird? Als die Items, die ich ausgedrückt habe, dass die in einer Reihe sein sollten. Das ist eine sogenannte Flex Rap.
Dann kannst du sagen okay, der Scheiß rappt sich halt dann ja und dann fallen quasi von alleine die Boxen runter mit so einem kleinen Animationseffekt, die sind dann passen nicht mehr in eine Zeile, dann fallen sie in die nächsten Zeile, da kannst du nur sagen Rap dich reverse oder Forward, da kannst du sagen also das letzte Objekt nach unten oder das erste nach unten und so weiter das kannst du alles auf einer ziemlich hohen Abstraktionslinie mit diesem Flex CSS Krempel definieren.
Ja, und wenn du das gut machst und schön designst, dann kannst du schon richtig viel im anderen responsive Design machen.
Das ist das Buzzword dazu. Responsive Design heißt es, sieht halt immer gut aus, egal auf welchem Screen ich gucke und tatsächlich ist Flex die Flex Technologie glaube Grundlage von sehr sehr vielen ziemlich schicken Apps, die halt bei gleicher Codebase sage ich mal gut sehen aussehen auf vielen Screenshot das mal so ganz kurz um mal Flex abzuholen, jetzt gibt es da noch was krasseres, angeblich habe ich aber selber sehr wenig Erfahrung, deswegen erlebe ich mich nicht aus dem
Fenster, es gibt auch im CSS 3 das sogenannte Grid, also Flex ist ja ein bisschen eindimensional. Du sagst jetzt irgendwie du hast zwar einen Rapper Container und dann hast du da drin eine Linie von entweder untereinander angeordneten oder nebeneinander angeordneten Kacheln. Das ist aber auch nicht ganz richtig, weil du kannst quasi auch einen Flex Container haben, wo das Item wieder ein Flex Container ist. Das habe ich auch gern gerettet. Aber bist du noch dabei? Ja.
Also du kannst schon die Bilder noch so ein bisschen im Kopf. Ich versuche es gerade alles vorzustellen, du kannst das ist ja eine Grund, eine Grundeigenschaft des Hdml, dass du es halt nesten kannst. Ja, also du kannst ja stapeln und deswegen kannst du auch sagen, ich div.
Container auf, der auf der ersten Ebene bist du quasi hast du Kacheln horizontal und in jeder einzelnen Kachel ist quasi wieder ein Container. Für Unterkacheln, die auf einmal aber untereinander sind, die dann columbice sind und und auf diese Art und Weise kriegst du ja auch zweidimensionale Strukturen zusammen. Ja, also und sowas wie Tabellen und so weiter kannst du damit alles machen ja, aber du. Wolltest wahrscheinlich sagen, dass Skript ist besser dafür geeignet. Genau und.
Jetzt gibt es das Grid irgendwie und das hat, das hat von vornherein so ein zweidimensionales zweidimensionalen Charakter, ja, das heißt irgendwie, dass das ist das, was es zu nutzen wäre, so, ja, ich löse das immer über Flexboxen, wenn ich zum Beispiel Tabelle früher, also wenn du einfach mal eine Tabelle hin machen willst, also mit CSS oder überhaupt eine Tabelle einfach mal haben willst.
Im HTML war früher ein Riesenproblem und hat angefangen mit mit Tablets quasi tatsächlich, es gibt ja das Tablet. Das Table Element vom HTML, das dafür da ist. Und dann gibt es Tableau und Table Column. Du kannst ja alles definieren, du kannst eine Tabelle aufziehen, die ist aber da
passiert. Großer Scheiß wenn du irgendwie wenn der Platz nicht mehr da ist in der Tabelle und so weiter deswegen macht man das eigentlich nicht mehr mit Table also Table benutzt man einfach nicht zum Layout, früher hat man halt das Table genommen um quasi in die Zellen dann irgendwie wilden Content rein zu machen und. Und um den um den irgendwie ne Struktur zu geben. Ja, weil man nichts Besseres hatte. Jetzt gibt es CSS 3 und jetzt machst du es gefälligst.
Jetzt benutzt du Tables quasi nur noch, wenn du wirklich ne Tabelle hast. Das ist auch richtig, weil wir wollen semantisch den Content klar haben. Ja, es gibt ja auch Leute, die sind diesen blind.
Die müssen vertrauen, dass irgendwie die, die müssen halt quasi wissen, muss ich jetzt hier ist es jetzt hier inhaltlich semantisch tatsächlich ne Tabelle und ist hier Content, den ich vorgelesen haben möchte oder wird hier ne Tabelle gehackt um Informationen die eigentlich keine Tabelle sind nur irgendwie in einer Art in in ne Struktur zu bringen in so ner Art Grid, das macht man halt nicht mehr und wenn du jetzt mit einem Flex Technologien Tabelle ausdrücken
willst, dann sagst du halt hier ist mein oberer Container und der obere Container hat zum Beispiel hat erstmal eine Columrichtung das sagt also quasi wieviel Rose hat die Tabelle? In jedem, in jedem, in jedem Column Kachel, in jedem colum Container, der ist gleich wieder nen Flex Container, der ist aber horizontal.
Ja jeder einzelne und dem kannst du dann, den kannst du dann wieder Sachen geben und dann beschubst hast ne Tabelle oder sagst du noch die Tabelle darf sich zum Beispiel nicht rappen oder sowas wenn es zu klein wird, dann darf die Role nicht rappen, die muss sie halt irgendwie abschneiden kannst du alles sagen, so macht man das quasi heute und ich glaube, dass Grit könnte das vielleicht noch eleganter kann ich euch aber nicht erklären, habe ich ja, habe ich einfach noch nicht so
viel benutzt. Genau.
Und jetzt sind wir fast durch. Jetzt gibt es noch, ihr merkt schon eine CSS nur was wir am Anfang gefragt so wow was muss man das extra erklären, so gibt es also was man vielleicht immer sagen muss, wenn man sich das mal angucken will und einfach echt keinen Plan hat von HTML und CSS und programmieren und so dann halt immer noch mit f 12 im Browser mal oder untersuchen also irgendwas markieren und dann mal Rechtsklick untersuchen klicken oder Inspect glaube ich auf Englisch denke.
Ich mal ja genau. Und dann? Kann man sich mal angucken, was an HTML und CSS eigentlich dahinter steckt? Man kann das mal alles sehen, ja. Tatsächlich sogar sehr, sehr, sehr, sehr gut sehen. Weil also auf dem Style Tab vom vom Developer Tools siehst du tatsächlich alle diese CSS, er schreibt das auch hin, was ist von extern geladen und dieses Cascading das das zum Beispiel kann ja sein, dass du extern gesagt hast, alle h 1 sehen so aus und dann auf einmal was was.
In der Priorität höheres überschreibt quasi das h 1. Ja und er zeigt dir sogar an, dass es überschrieben ist und auch mit welchem Value. Ja, das schreit er sogar durch und so weiter also das kann man wirklich sehr gut wirklich n gutes Beispiel. Man kann es sogar noch live manipulieren. Ja, du kannst ja auch, klar kannst du auch da reintipeln und dann die Farben. Werden. Du kannst es wirklich machen.
Du kannst mich vor allen Dingen dem ganzen Kram, den inline Style geben, wenn du mal gucken willst, wie es das mache, ich zum Beispiel ganz oft, eigentlich will ich einen Stylesheet haben, auf Klassenebene zum Beispiel, und da will ich mal vorher angucken, wie wird es denn aussehen und dann kannst du zum Beispiel mit dem Developer Tools rangehen und gibst halt dem Element, das du jetzt gerade mal über designen willst, den Inline Style live, mit dem kannst du einenjekten.
Und dann, und weil das die höchste Priorität hat, passiert das dann halt auch so. Du hattest noch irgendwas auf dem Zettel, oder? Ja, ich hab noch 23 Sachen auf dem Zettel. Eine wichtige Sache ist, jetzt haben wir ja quasi nur über statisches anmalen gesprochen und auch über Strukturiergebungen usw es.
¶ Transitions, Animationen & Media Query
Es gibt so coole Sachen wie Transformation. Soll ich noch mal sagen. So manchmal sieht man das ja zum Beispiel du Hammerst über irgendwas rüber und es dreht sich irgendwie dreidimensional weg oder irgendsowas oder ganz oft haben die Buttons so n Effekt.
Ne du kommst drüber gehovert und der wird so n bisschen größer oder sowas und dann macht so n Schatten oder ja ich glaub ganz viele neue Webseiten haben beim Scrollen ganz viel Transformation. Ah ganz genau so und das kannst du halt auch tatsächlich alles in CSS ausdrücken krasser weise es gibt also mal es gibt mal die Transform Property und die hat die hat du kannst also transformieren bestimmte Eigenschaften zum Beispiel kannst du sagen Rotate Scale sq
ist quasi die. Sage ich mal und translate, ja, dann kannst du zum Beispiel sagen, ich hab, ich hab jetzt hier irgendwie n div. Ja und da drin ist irgendein Knopf und dann sagst du zum Beispiel Transform translate.
Von 0 nach irgendwohin und auf einmal fliegt dieser Button quer über deinen Screen. Ja, und dann kannst du natürlich noch zu sagen, wie schnell mit, mit welcher Federung und so weiter dann fliegt er da irgendwie im linearen Tempo oder beschleunigt er langsam und bremst wieder ab und so weiter das kannst du alles ausdrücken, ja. Und wenn dir das noch nicht genug ist, dann kannst du sogenannte Animationen definieren. Das gibt es auch erst als CSS 3. Und das ist n also ist ne
Erweiterung tatsächlich. Also während Transform den Gesetzen sag ich mal den ursprünglichen Gesetzen der CSS regeln spricht, weil du es einfach ne Property ist, ne die unternimmt unter dem Selektor läuft gibt es jetzt. Ganz krasse Sachen, Animationen zum Beispiel. Da hast du quasi außerhalb dieser normalen Selektoren nen Spezialselektor, die fangen alle mit AT an, davon gibt es
mehrere. Ich nehm jetzt nur mal gerade die Animation und dann steht da quasi at keyframes und den gibst du n Namen. Und dann kannst du da sagen, from too Dadrunter, also von bis, ja du kannst zum Beispiel sagen from 0 to 1 und später beziehst du dich da drauf auf diese Keyframes mit dem mit dem mit dem CSS Property, also irgendwo in irgendeiner. Eintrag mit Animation Name, dann sagst du da quasi my Animation irgendsowas ja die du vorher
definiert hast. Und da steht zum Beispiel 0 und 1, da kannst du zum Beispiel sagen, Opacity ja, da wird irgendwas von 0 nach 1 transformiert n beliebiger Wert Value beliebige Values werden transformiert, quasi von beliebigen Keys. Ja und auf einmal wird was transparent und kommt wieder oder irgendsowas und wieder und so weiter du kannst ja also ne, du kannst dann auch sagen nur bei 0. Du kannst auch in Prozenten definieren, entweder sagst du From und Two, dann kannst du nur
sagen Duration immer im Kreis oder von 0 25% bei 50% 75% 100% sieht so und so und so und so aus und du kannst das alles ineinander stecken, du kannst also wilde Transformationen machen, wo du gleichzeitig transparent wirst, die Farbe wechselt und Skalierst und so weiter du.
Kurz ausgedrückt, man kennt es ein bisschen von, also wer powerpoint Animation schon mal gemacht hat, so ähnlich ist das ja. Also du kannst powerpoint, wenn du wahnsinnig wirst, kannst du ja auch Sachen irgendwie von A nach B fliegen lassen und das Stichwort wenn du wahnsinnig wirst. Man muss natürlich immer ein bisschen. Aufpassen bei den ganzen Sachen.
Ne und aber grundsätzlich ist natürlich cool, dass so viel geht und funktioniert und genau ich finde es schon auf manchen Seiten sehr sehr gut gemacht, irgendwie cool anzusehen, alle übertreiben aber wenn man das richtige Dosis findet, wäre gut. Ein powerpoint Design kann das in CSS umsetzt, dieses Gefühl für eine UX, das ist ja auch nicht nur UI, das ist ja auch wirklich UX was man CSS ausdrückst.
Weil, weil du auf einmal einfach mal ein viel besseres Gefühl kriegst für die Sachen. Ja, das ist schon ganz cool. Ja, ich glaube, jetzt haben wir, also das ist auch die Spitze vom Eisberg, trotzdem noch gewesen, aber vielleicht. Eine noch, die ich hatte ja gesagt, ich hab noch vielleicht 3 Sachen, also das war die eine Sache, war die Animation.
Es gibt auch noch eine die es mit diesem Add funktioniert, was also quasi hinzugefügt wurde ist vielleicht wichtig, sogenannte Media Curry nur für die Leute die das mal hören at mediacury. Und das ist so ne Art Weiche für CSS. Da kannst du quasi sagen, also das Atmedia Q. Ich schreibst du oben drüber und und und.
Das hat ne Bedingung, du kannst halt sagen, wenn mein Bildschirm die und die Auflösung hat oder so und so rotiert ist also Media Curry heißt halt immer ich beschreibe quasi mit einer mit einer festgelegten Art und Weise wie mein Viewport, also wie man quasi meinen Schirm aussieht. Ich frage ich es ab oder ich gucke erstmal nach, was habe ich denn? Und dann überlege ich mir danach.
Was macht das Ding selbst? Du sagst halt, wenn ich, wenn ich zum Beispiel kleiner als 1000 x 1000 Pixel Screen zur Verfügung habe, dann nimm dieses CSS was jetzt kommt.
Und und oder oder so weiter kannst du ja viele mediacuries machen und dann kannst du quasi mal wenn du mal nicht mit flexbox also wenn du nicht Responsive Design machst mit einem Code aber wenn du wirklich explizit sagen willst in diesem Falle lasse ich sogar zum Beispiel ein ganz Element Weg du kannst nämlich zeige ich gar nicht an weil es mir zu groß ist das Bild zum Beispiel von einem Ich bin auf einem kleinen Telefon und Ich würde jetzt hier ein Bild was ich sonst irgendwie
habe als zum anzeigen weil ich genug Platz habe will ich jetzt gar nicht mehr anzeigen dann kannst du auch mit einem Display gibt es auch setzt du einfach auf hin und schmeißt das ganz raus aus der aus der ganzen Geschichte und zeigst es gar nicht an. Dazu auch komplett irgendwie hin und her schalten. Ja, das sind die Media Curies, dass man es mal gehört hat und ganz zum Schluss noch eine Sache, die jetzt eigentlich gar nicht dazu passt.
Hätte bisschen früher sagen können, es gibt an den Selektoren sogenannte Pseudoklassen.
Denn es gibt ja so einen Effekt zum Beispiel, ich habe gesagt, Hover, ja, das ist ja eigentlich ein Event, du kommst jetzt mit einer Maus zum Beispiel über einen Link, ganz oft ist das so, fast jeder Linke hat irgendwie so eine Psudoklasse dran und dann willst du quasi den, dann willst du quasi diesen unterstrich machen oder den Fett machen und ein hoher Event, das drückst du aus mit Pseudoklassen, die sind von der Struktur her sind Doppelpunkt, da kannst du sagen zum Beispiel
A, also im CSS sagst du dann a als Texte Lektor für den Link Doppelpunkt Hover und dann definierst du jetzt irgendwie blau werden lassen den Text oder irgendsowas wenn du drüber Havas, da sind die Pseudoklassen oder nur? Der Vollständigkeit halber. Und jetzt ist glaube ich mein Spicker leer und euer. Soll kann man alles wunderbar
nachlesen. Wer das noch mal möchte und auch mit coolen Tutorials, Videos und so weiter tatsächlich bei der Quelle, überhaupt beim W 3 C einfach mal bei CSS reinklicken. Was Burkert an dieser Stelle meinte, war die W 3 Schools, die wir euch jetzt hier verlinken. Hat mit W 3 C nichts zu tun, nur das W 3 NW 3 Schools steht auch für das www.also viel Spaß mit w 3 Schools prima, danke dir und in 2 Wochen gibt es uns wieder. Ich glaube schon. Beim frischen Thema.
Ja, ein bisschen fernerer Zukunft, vielleicht auch noch mal UX Ui Themen. Da haben wir gesagt, da muss CSS vorher nochmal besprochen werden, aber dann dazu mehr und für heute Danke fürs Zuhören und bis in 2 Wochen. Danke für eure Ausdauer bis dahin.
Tschüss aus Hamburg. Einfach komplex wird präsentiert und produziert von Highsomware. Wir freuen uns auf deine Fragen und deinfeedbackanpodcast@heiseware.com vielen Dank fürs Hören dieser Folge bis Dienstag in 2 Wochen und Tschüss aus Hamburg.