CSS

Definition	integrieren	lernen
programmieren	verwenden

Was ist CSS?

CSS, die Abkürzung für Cascading Style Sheets, ist eine Programmiersprache.

Wie kann man CSS in eine Webseite integrieren?

Alle vier Möglichkeiten kann man gleichzeitig einsetzen.

Man muss aber bedenken, dass dann CSS im HTML-Tag (4. Möglichkeit) vor der 2. Möglichkeit geht und die 2. Möglichkeit vor der 3. und 1. Möglichkeit.

1. Möglichkeit: Externe Datei:

Die CSS Angaben werden in eine separate Datei geschrieben.

Das ist dann sinnvoll, wenn man einen besseren Überblick haben will und vor allem dann, wenn die CSS-Angaben für mehrere Dateien gleich sind. So ist es auch einfacher etwas an den CSS-Angaben zu ändern, da man nur noch eine Datei bearbeiten muss.

Mit einem Editor öffnet man eine neue Datei.

Darein schreibt man CSS:

BODY {FONT-SIZE: 12px; BACKGROUND: #ffffff}
TD {FONT-SIZE: 12px; COLOR: #000000}

Man speichert die Datei mit der Endung .css ab (dateiname.css)

Öffne dann .html, .php, … Datei mit einem Text-Editor.

Setzen Sie in den Head-Bereich, also zwischen <head> und </head> eine Zeile mit dem Link zu Ihrer CSS-Datei :

<link rel="stylesheet" type="text/css" href="styledatei.css" media="screen" />

2. Möglichkeit: Direkt auf der Seite:

Die CSS Angaben wird in die HTML-Seite direkt geschrieben.

Ab HTML 4.2 ist es möglich die CSS-Angaben zwischen <head> und </head> zu schreiben.

<style>
   h2 { background-color: green; }
   </style>

3. Möglichkeit: Eine externe CSS-Datei innerhalb des style-Tags wird integriert:

<style>
   @import url("style.css") screen;
   </style>

Diese Möglichkeit geht nicht in jedem Browser!

4. Möglichkeit: style-Attribute im HTML-Tag:

Die CSS Angaben werden direkt an die gewünschte Stelle (Inline CSS) in den HTML-Befehl geschrieben.

So kann z.B. eine einzige Überschrift gestaltet werden.

<h2 style="background-color: green">Inline-CSS</h2>

Wie kann man CSS lernen?

Einführung in CSS
Cascading-Style-Sheets lernen (selfhtml.org).

Wie kann man CSS programmieren?

CSS-Codes

Wofür kann man CSS verwenden?

Design einer Homepage gestalten

Februar 22, 2020Februar 28, 2020 admin CSS