Lerne CSS in 60 Minuten // CSS Tutorial Deutsch für Anfänger

Рет қаралды 26,348

Күн бұрын

CSS Tutorial Deutsch für Anfänger. Lerne CSS in 60 Minuten. Einfach mal CSS lernen. In diesem Tutorial geht es um die CSS Grundlagen. Was ist CSS? Wie kannst du es am besten verwenden? Welche CSS Eigenschaften gibt es? Wie kannst du dir deine erste eigene Webseite mit CSS layouten? Wir werden uns alles in Ruhe anschauen. Du brauchst dafür absolut keine Vorkenntnisse.
⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
00:45 Was ist CSS
05:03 Verwendung von CSS
09:57 CSS Kaskaden Effekt
14:55 Schriftformatierung
19:05 Textformatierung
24:18 Links
26:52 Grafiken
30:33 Größe, Abstände, Ränder
34:12 Positionierung
37:54 Erste eigene Webseite layouten
53:34 Wie gehts weiter?
⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Einfach mal HTML lernen
↪︎ • Lerne HTML in 60 Minut...
Der BESTE Editor für Web Entwickler (Gratis)
↪︎ • Visual Studio Code Gru...
Colormind.io:
↪︎ www.colormind.io/
📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit über 15 Jahren als Webentwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.
Starte Jetzt!
/ @programmierenmario
#CSS #ProgrammierenM

Пікірлер: 85

@ProgrammierenMario 3 жыл бұрын

Dir hat das Tutorial gefallen? Dann kann ich empfehlen dir mal das CSS Position Tutorial anzuschauen: kzfaq.info/get/bejne/j52PmK2L2baqoqs.html

@andrewcaptains8756 3 жыл бұрын

Ganz großes Lob! Hab mir jetzt dein html-Tutorial und das Video hier angeguckt und hast mir damit seeeeehr weitergeholfen. Hab meinen ersten WebTech-Programmierkurs in der Uni belegt und da sind diese Videos genau das richtige

@ProgrammierenMario 3 жыл бұрын

Freut mich wirklich sehr das ich dir weiterhelfen konnte. Da kann ich dir natürlich auch meine anderen CSS Videos empfehlen, falls du noch tiefer in das Thema einsteigen möchtest: kzfaq.info/sun/PLnqycjkeRGqmNb4zay7i46-57KgnO_xcD

@alfredrudolph3981 7 ай бұрын

Hallo Mario, ich habe mich schon gewundert wo dein Kaffee bleibt ;-) Super Viedeo. 👍

@ProgrammierenMario 7 ай бұрын

Danke dir!

Жыл бұрын

Perfekt. Danke!

@ProgrammierenMario Жыл бұрын

Gerne 🙂

@cbu1323 Жыл бұрын

Das beste CSS-Tutorial, das ich gesehen habe! Danke.

@ProgrammierenMario Жыл бұрын

Vielen Dank ✌️🙂

@bachleda6217 2 жыл бұрын

Sie erklären es sehr gut. Das kann nicht jeder. Weiter so!

@ProgrammierenMario 2 жыл бұрын

Vielen Dank ✌️

@serdaraltuntas6551 3 жыл бұрын

Schön, dass du neben Webnoob auch einen Kanal auch Deutsch hast. Find ich echt gut!

@ProgrammierenMario 3 жыл бұрын

Vielen Dank 🙂 Hast du mich über den Webnoob Kanal gefunden oder über ein Video?

@serdaraltuntas6551 3 жыл бұрын

Über Deinen Kanal Webnoob. Finde deine Erklärungen über VueJS sehr sehr gut und super hilfreich. Fertige derzeit eine Webseite mit VueJS, Vuex, VouRouter, Firebase/Firestore an. Dabei schaue ich immer wieder in deinen Kanal.

@ProgrammierenMario 3 жыл бұрын

Das freut mich sehr zu hören dass ich dir etwas weiterhelfen kann. Danke für die Info ✌️

@sergemiyo4217 3 жыл бұрын

Servus Mario , ich es hervorragend was du machst.

@ProgrammierenMario 3 жыл бұрын

Vielen Dank 🙏

@Defzan 4 ай бұрын

Bin angehender webentwickler und deine videos sind super einfach doch sachlich erklärt 👌🏻

@ProgrammierenMario 4 ай бұрын

Freut mich zu hören!

@eone2414 3 жыл бұрын

Sehr gutes Tutorial 👍🏻😀 vielen Dank!

@ProgrammierenMario 3 жыл бұрын

Freut mich das es dir weiterhilft. Vielen Dank für dein Feedback ✌🙂

@inkelariekert7976 2 жыл бұрын

Vielen Dank für das Tutorial. Sehr gut gemacht. 👍

@ProgrammierenMario 2 жыл бұрын

Sehr gerne!

@Michaeldabrowski Жыл бұрын

Mega, Mario! Total Klasse👍

@ProgrammierenMario Жыл бұрын

Freut mich! ✌🙂

@chrism.3881 3 жыл бұрын

gleich abonniert, vielen dank, toll gemacht.

@ProgrammierenMario 3 жыл бұрын

Herzlich willkommen 🙂

@Johann.Liebert 3 жыл бұрын

Danke sehr gutes Video! Es hat mir sehr gut geholfen

@ProgrammierenMario 3 жыл бұрын

Freut mich sehr das ich dir weiterhelfen konnte 🙂

@captainfalcon535 2 жыл бұрын

Danke für dieses Video! :)

@ProgrammierenMario 2 жыл бұрын

Gern geschehen 😊

@zunderkopf7800 2 жыл бұрын

danke, toll erklärt - mein abo hast du !

@ProgrammierenMario 2 жыл бұрын

Herzlich Willkommen und freut mich das ich dir weiterhelfen konnte ;)

@solotunic 2 жыл бұрын

Perfekt klappt alles zu 100% bin erst 40min von 54 min. Muss morgen äh heute arbeiten gehen ist schon 0.27 Uhr

@ProgrammierenMario 2 жыл бұрын

Freut mich das bei dir alles klappt. Vielen Dank fürs reinschauen ✌️🙂

@saifan.1060 2 жыл бұрын

Super Video ,danke .

@ProgrammierenMario 2 жыл бұрын

Gerne 😊

@alpii6470 2 жыл бұрын

Danke Mario!

@ProgrammierenMario 2 жыл бұрын

Sehr gerne 😉

@kani7597 2 жыл бұрын

Ich danke dir sehr 🙏👍

@ProgrammierenMario 2 жыл бұрын

Gerne 😊

@DrHarry007 Жыл бұрын

Hi Mario, ich finde wirklich das du es richtig gut erklärst und sehr verständlich. Bei anderen bekommt man meistens nichts mit weil die viel zu schnell reden und zu kompliziert. Du erklärst es sehr ruhig und einfach + die Art der Präsentation ist total Klasse, Danke dafür! Ich möchte das Programmieren schnellstmöglich lernen( Front-End ) damit ich mich auf einen Job bewerben kann. Wie baue ich mir ein Portfolio auf, kannst du mir helfen welche Schritte ich gehen muss bis zum 1 . job? 🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻!

@ProgrammierenMario Жыл бұрын

Vielen Dank für deine Nachricht. Nun, ein eigenes Portfolio ist einfach nur eine Website wo du deine Projekte vorstellst. Also brauchst du als aller erstes diese Projekte. Das kann im Prinzip alles Mögliche sein. Wichtig ist diese Projekte auch auf GitHub bereitzustellen damit sich jeder deinen Sourcecode anschauen kann. Ich empfehle Projekte mit verschiedenen Schwerpunkten als Frontend-Entwickler: - CSS lastig (Layout, Flexbox, Grid, Positionierungen) - Anzeigen von Daten aus einer API - Taschenrechner, ToDo, Kalender Tool mit JavaScript (oder vergleichbares). - Ein Projekt mit einem JS Framework (React, Vue.js oder Astro) - Progressive Web App (Service Worker) Natürlich kannst du dir auch selbst was überlegen. Am besten ein Thema was dich begeistert. Wo du motiviert bist bei der Umsetzung und wovon du gerne erzählst. Grüße...

@prple_mk2236 3 жыл бұрын

echt gutes video

@ProgrammierenMario 3 жыл бұрын

Das freut mich sehr. Konnte ich dir damit weiterhelfen?

@prple_mk2236 3 жыл бұрын

@@ProgrammierenMario ja schon komme aber das doofe ist ich habe vs code 2019 und weiß nicht wie man eine css datei erstellt

@ProgrammierenMario 3 жыл бұрын

Klingt als würdest du Visual Studio verwenden welches ein komplett anderes Programm ist. Ich würde den aktuellen VS Code installieren. Die CSS Datei kannst du da sehr einfach wie jede andere Datei auch im Explorer anlegen.

@ferdinandlichte3518 2 жыл бұрын

Hallo mario ich schaue mir gerade dein Tutorail an. Zunächst mal grosses Lob dafür! ich werde mir auch die anderen Videos anschauen! Aber ein Frage zu deinen Erklärungen. Wenn ich dich richtig verstehe brauche ich doch aber in der verlinkten css Datei nicht unbedingt eine Anweisung wie p { Anweisungen} sondern egleich nur mit Klassen wie bei deinem Beispiel .speziell arbeit. So spart man doch letztlich min. eine Cascade!? Danke für deinen Antwort Gruss Ferdinand

@ProgrammierenMario 2 жыл бұрын

Hallo Ferdinand, du kannst dies ganz individuell machen, je nach dem ob du alle HTML Elemente eines bestimmten Typs mit CSS selektieren möchtest, nur einige wenige oder nur ein Element. Bei ersterem kannst du ruhig mit dem HTML-Tag selektieren, mit einer CSS Klasse kannst du es aber eingrenzen wenn du möchtest und diese Klasse dann den Elementen zuweisen welche selektiert werden sollen. Am besten einfach mal alle erdenklichen Möglichkeiten ausprobieren und schauen was passiert ;)

@captainfalcon535 2 жыл бұрын

39:31 : Muss ich mit dem Punkt arbeiten? Kann ich in der css nicht einfach page-teaser verwenden? Macht es einen unterschied? Ich habe durch das Video vermeintlich gelernt, das man mit dem "." Explizit nur diese eine genannte klasse anspricht auch wenn sie innerhalb eines definiert ist. Aber da bin ich jetzt grad stutzig wieso, weshalb oder warum. Oder werden einfach alle IDs so angesprochen?

@captainfalcon535 2 жыл бұрын

Ah! Es hat sich erübrigt und das wenige sekunden nach meiner Frage :D

@ProgrammierenMario 2 жыл бұрын

Freut mich das zum Schluss doch noch alles gepasst hat ✌️🙂

@rapier64 2 жыл бұрын

Hi Mario, ich eine Frage zum Webdesign. Wenn Du deine Projekte umsetzst, erstellst du das Design der Website selbst oder arbeitest du mit einem Webdesigner zusammen? Mein 'Problem' ist, dass man eine ansprechende Webdesignvorlage für entsprechende Webprojekte haben sollte, damit man dann mit HTML, CSS & Co. dies auch ansprechend umsetzen kann. Ist so als ob man ein technisch und qualitativ gutes Auto baut, aber die Form potthässlich ist. Dann wird es zum Ladenhüter... ☹️ Hättest du dazu einige Tipps? Danke und Gruss, Peter

@ProgrammierenMario 2 жыл бұрын

Hallo Peter, beruflich bekomme ich die Designvorlagen oft direkt vom Marketing etc. falls nicht wird improvisiert bzw. je nach Kunde sich an das bestehende orientiert. Privat mache ich das natürlich selbst. Ich bin kein Designer zumindest bin ich da nicht so tief in dieser Materie unterwegs. Konnte mir aber über die Jahre viel abschauen und bekam auch ein gewisses Gefühl dafür. Was ich viele Jahre gemacht habe und zum Teil auch immer noch mache ist mich durch fertige Templates/Designs inspirieren zu lassen. Es gibt tonnenweise Plattformen wo man sich Templates anschauen kann, wie zum Beispiel dribbble.com aber auch Social Media wie Instagram, da gibt es reihenweise Profile die Templates posten. Am besten versuchst du diese nachzubauen und hier und da den eigenen Bedürfnissen anzupassen.

@ferdinandlichte3518 2 жыл бұрын

Halo Mario du machst das für einen Überblick wirklich gut und man merkt dir deine absolute Routine und Wissen an. Toll!!! Allerdings fehlt mir als Anfänger doch ein bisschen Hinweise wann nehme ich z. B. einen Header um ein Bild einzubinden oder wann warum verwende ich z. B. main. Hast du evtl. Hinweise oder Empfehlungen für ein Nachschlagewerk für einzelene Elemente. Oder auch Erklärungen wann benutze ich cleverer weise style sheets oder wann nehme ich die Anweisungen direkt in das HTML Dokument und was ist der Unterschied zwischen der Anweisung id= oder Class= Vielen Dank schonmal im Vorraus für deine Antworten (Natürlich nur wenn du Lust und Zeit hast) Grüsse auch an die Mitlesenden

@ProgrammierenMario 2 жыл бұрын

Hallo Ferdinand, erstmal vielen lieben Dank für deine Fragen. Ich kann dich sehr gut verstehen. Und ich kenne das Gefühl das man von Anfang an keine Fehler machen möchte. Bei HTML und CSS ist das aber so das der Browser ziemlich tolerant ist. Das bedeutet das Grundsätzlich keine Fehler erzeugt werden wenn du z.B. "falsche" HTML Tags verwendest oder CSS in der HTML Datei verwendest oder als separate Datei. Mit der Zeit bekommst du automatisch ein Gespür dafür und entwickelst auch deinen eigenen Stil. Es gibt hier nämlich keine absolutes Richtig oder Falsch. Das hängt immer vom Einzelfall ab und was das Ziel ist. Ich weiß das ist vllt. nicht die Antwort die du dir erhofft hast. Es ist schwierig hier eine Pauschale Antwort zu finden. Zu der ID, diese sollte eindeutig und nur einmalig im HTML Dokument vorhanden sein. Eine Class kannst du beliebig oft Elementen zuweisen und für die CSS Selektierung verwenden.

@niklas4740 3 жыл бұрын

Moin, machst du ggf. ein Video zu CSS Container Queries ?

@ProgrammierenMario 3 жыл бұрын

Frühestens wenn die neue Spezifikation fertig und von den Browsern implementiert ist. Vorher macht das noch nicht wirklich sinn ;-)

@sergemiyo4217 3 жыл бұрын

ich habe nicht so gut verstanden in der index.html-datei die benutzung von und

@ProgrammierenMario 3 жыл бұрын

Die article und section Tags dienen hauptsächlich dazu dein HTML Dokument besser zu strukturieren. Diese haben keine Auswirkungen auf das Layout.

@sergemiyo4217 3 жыл бұрын

Danke Mario

@igorbonicib Жыл бұрын

ein video zu angular add to cart. e commercer bitte bitte das wäre toll.

@ProgrammierenMario Жыл бұрын

Zu Angular ist aktuell leider nichts geplant.

@henningw.6582 3 жыл бұрын

Hallo Mario. Tolles Video. kannst du mir helfen bei einer Programmierung HTML / CSS. Würde mich über eine Antwort sehr freuen. Danke

@ProgrammierenMario 3 жыл бұрын

Wo drückt denn der Schuh?

@derdonderehre5592 Жыл бұрын

Ich habe bei " background-imgae:url" den Pfad von meinem Bild angegeben, aber dennoch erscheint es nicht. Weiß einer vielleicht woran das liegen könnte?

@ProgrammierenMario Жыл бұрын

Hat dieses Element auch eine definierte Breite und Höhe? Falls nicht und das Element hat keinen Inhalt dann wird es nicht angezeigt :)

@rimurutempest-lm2hp Жыл бұрын

Woher finde ich diese Image Bilder? Oder kann ich da beliebige Bilder benutzen?

@ProgrammierenMario Жыл бұрын

Die Bilder waren nur Beispiele. Du kannst natürlich beliebige Bilder verwenden. Falls du welche zum testen brauchst, dann kann ich dir z.B: unsplash.com/ empfehlen. Da gibt es sehr viele frei verfügbare Bilder die man verwenden kann.

@derroteshanks4821 Жыл бұрын

10:03 wieso ist das bei mir nicht so wenn ich color eingebe und dann die Farbe das es dann halt color blau ist und dann die farbe das ist alles weiße schrifft auf vs code bei mir

@ProgrammierenMario Жыл бұрын

Meinst du hier das farbige Quadrat vor dem Wert? Die Schrift bestimmt das aktuelle Theme von VS Code. Das ist im Video eher Zufall das die Schrift hier mit der Farbe etwas übereinstimmt ;)

@derroteshanks4821 Жыл бұрын

@@ProgrammierenMario nein generell wenn ich class eingebe ist es auch nur weiße Schrift

@ProgrammierenMario Жыл бұрын

@@derroteshanks4821 Leider stehe ich gerade total auf dem Schlauch xD Kannst du nochmal ausführlicher beschreiben wo es bei dir hängt?

@derroteshanks4821 Жыл бұрын

@@ProgrammierenMario also bei vs code gebe ich zb. color pink ein und die Schrift ist weiß da wird nix anerkannt zb. Gebe ich style ist Schrift blau und wenn ich color eingebe passiert nix

@In5perat0r 2 жыл бұрын

Sorry ich muss dich Korriegieren beim Kapitel Kaskaden Effekt, ich habe es so verstanden das was als letztes gelesen wird auch angewendet bzw. höhere Priorität hat aber leider muss ich dich da Verbessern es ist nicht so was als letztes gelesen wird, wird auch angewendet sondern in deinen Fall hatte der class Selector ".speziell" eine höhere Priorität ich habe es ausprobiert scheinbar ist die Priorität abhänging vom Selector z.B. beim Selector "p" das kann man als Ober Kategorie bezeichnen aber beim Selector ".speziell" das kann man als Unter Kategorie bezeichnen ich verstehe das so alles was genauer definiert wurde beim Selector hat höhere Priorität und was mir auch aufgefallen ist, ist das Attribute "style" eine noch höhere Priorität hat P.S. Ich Finde das Video RIchtig gut gemacht weiter so

@ProgrammierenMario 2 жыл бұрын

Tut mir Leid wenn meine Erklärung im Video nicht ganz verständlich war. Bei dem Kaskaden Effekt geht es in erster Linie um die Eigenschaften, unabhängig von den Selektoren. Wenn die selbe Eigenschaft für ein Element mehrmals mit Werten gesetzt wurde zählt immer der letzte Wert der angegeben wurde. Werte zuvor für dieselbe Eigenschaft werden überschrieben. Das style Attribut ist immer der letzte Ort wo für ein Element etwas gesetzt werden kann, somit wird hier alles zuvor gesetzte bzgl. der gleichen Eigenschaften ersetzt. Andere Eigenschaften nicht! Wenn unterschiedliche Eigenschaften für ein Element angegeben werden, dann gelten all diese für das Element, egal wo diese einzelnen definiert wurden. Es baut dann alles aufeinander auf und wird für dieses Element wie zusammengesetzt. Und das ist der wesentliche Knackpunkt. Es ist fast egal wo, wie und wie oft du ein Element selektierst, wenn du die obigen Regeln kennst und verinnerlichst. Natürlich hat die ein oder andere Variante der Selektierung und auch wo das ganze Stattfindet Vor- und Nachteile aber das ist ein anderes Thema. Es gibt zwar Prioritäten bei der Selektierung, wie du beschreibst, aber du bekommst damit nur Probleme wenn du inkonsistent bist bei der Art und Weise wie du selektierst. Ich hoffe ich konnte dir erstmal weiterhelfen. Vielen Dank für dein Feedback.

@In5perat0r 2 жыл бұрын

@@ProgrammierenMario Auch mir tut es leid da ich davon ausgegangen bin das du das meintest (neben bei bemerkt bin ich ein Autist falls dir das was sagt) aber bezüglich der Selectoren habe ich Recht kann mir auch leider nicht die Nachricht nicht Komplett durchlesen weil ich gleich jetzt gleich weg muss und weil ich ein Langsamer Leser bin und Tut mir leid falls ich dich mit dem Kommentar von mir dich auf irgendeiner weise verletzt haben sollte wollte es nur nett meinen da ich mir sowas immer zu herzen nehme

@ProgrammierenMario 2 жыл бұрын

Alles kein Problem, ich nehme nichts persönlich alles gut. Mein Ziel ist das jeder es versteht und ich versuche es so einfach wie möglich zu erklären. Manchmal ist es auch für Anfänger nicht immer förderlich zu sehr ins Detail zu gehen, weil es dann zu komplex wird. Autisten sind mir vertraut, lebe selbst mit einem zusammen. Das muss aber nichts heißen, denn jeder Autist ist anders und einzigartig. Wie auch sonst jeder Mensch. Schubladen gibt es bei mir nicht.