Zukunftstag – CSS, das Make-Up der Webseiten – Das Make-Up des Internets

View Github Repository Open presentation in a new window

subugoe-zukunftstag

See all presentation from subugoe-zukunftstag

Zukunftstag – CSS, das Make-Up der Webseiten – Das Make-Up des Internets

0 0

css

On Github subugoe-zukunftstag / css

Zukunftstag

CSS, das Make-Up der Webseiten

Das Make-Up des Internets

HTML ist nur eine Auszeichnungssprache, das heißt es erzählt dem Browser nur "das ist eine Überschrift", und "das ist ein Text". Aber es sagt nicht wie diese Elemente auszusehen haben.

Diesen Part übernimmt CSS.

Mit CSS kann man sich die HTML-Tags schnappen und ändern

z.B. den Hintergrund der Seite einfärben:

body {
  background-color: lightblue;
}

Oder den Hintergrund eines Paragraphen mit der id="achtung"

#achtung {
  background-color: red; 
}

Wo schreibt man das CSS hin?

CSS kann zum Beispiel auf der Webseite stehen, eingeschlossen in die <style>-Tags:<style>  body {    background-color: lightblue;  }  #achtung {    background-color: palegreen;  }</style>

Etwas CSS zum rumspielen

  • background-color: red;
  • font-style: italic;
  • font-weight: bold;
  • font-size: 120%;
  • color: darkgray;
  • text-align: center;
  • border: 2px solid green;

Aufgabe: Webseiten umgestalten

  • Die meisten Browser haben sogenannte Entwicklertools. Mit diesen kann das CSS von Webseiten verändern.
  • Du kannst sie über das Menü öffnen (meist heißen sie Web Developer, oder so ähnlich), oder
  • du kannst sie über die Konsole mit der Tastenkombination Strg+Shift+C öffnen.
  • Nach dem Öffnen bekommst du die Möglichkeit Elemente auf der Webseite zu markieren. Wenn du dies getan hast siehst du unten rechts das dazugehörige CSS und kannst es verändern.

Aufgabe: Eigene Datei gestalten

  • Nimm dir deine Datei vor, und füge CSS hinzu.
  • Zeichne verschiedene Elemente aus:
    • Alle Paragraphen
    • Bestimmte Paragraphen. Gib ihnen eine id (id="meinName") und gestalte diese
    • Gib den Bildern einen Rahmen

Viel Spaß beim Gestalten!

:)