Einfuehrung in CSS
Hey Leute,
Wilkommen zum zehnten Teil der HTML & CSS Tutorialserie.
Bisher haben wir uns nur mit HTML beschäftigt und ihr fragt euch vermutlich, was ist dieses CSS? Dazu aber nochmal kurz was HTML ist. HTML steht für “Hypertext Markup Language”. HTML ist keine Programmiersprache, sondern eine Dokumentenbeschreibungssprache. HTML ist die ?Muttersprache? Ihres Browsers. Sie ermöglicht es Informationen im Browser zu präsentieren. Wenn ihr mehr Details zu HTML lesen wollt, schaut euch den Artikel auf Wikipedia an.
CSS ist die Abkürzung für Cascade Style Sheet und wird dafür verwendet bestimmte HTML Elemente optisch zu verändern. Das heißt quasi, dass es für die Verschönerung von HTML ist. Wenn wir uns ein Auto vorstellen, dann ist das Auto ohne HTML ein einfacher Honda, mit CSS verändert ist es ein übertrieben krass aufgepimpter Honda aus The Fast And The Furious
Nun schauen wir uns an, wie das Ganze im Code aussieht:
Beispiel für CSS
<!doctype html>
<head>
<style type="text/css">
p{color:red;
font-family:verdana;}
</style>
</head>
<body>
Normaler Text
<p> veränderter Text </p>
</body>
Ihr seht also, im Head ist ein Double Tag der “style” heißt. er ist vom type text/css – das müssen wir so machen, damit unser Browser weiß, dass es sich um CSS handelt. Danach folgt was wir optisch verändern möchten. Da ich im Body innerhalb eines Paragraphen “veränderter Text” eingefügt habe, kann ich jetzt das erscheinungsbild von Paragraphen grundsätzlich verändern in dem ich innerhalb des style Tags folgendes einfüge:
p{
color:red;
font-family:verdana;
}
Ich sage also p (Paragraphen) sollen die rot(color:red) sein und in der Schriftart(font-family) Verdana dargestellt werden.
Damit hätten wir unsere erste Regel erstellt und wären am Ende dieses Tutorials angelangt. Im nächsten Tutorial gibt es noch mehr zu CSS, also bleibt dabei!