HTML & CSS Tutorials

Wir erstellen in CSS eine neue class:


. = class
# = id

.font {
font-family: XXX;
font-weight: XXX;
fonts-size:XXX;
color:XXX;
---------------
text-shadow: XXXpx XXXpx XXXpx #000000;
text-decoration: ;
}

font-family ist eure Schriftart die meisten Webseiten nutzen Arial,Verdana,Helvetica usw. Ich hab mich für die Font Ubuntu entschieden.

.font {
font-family:Ubuntu;
}

font-weight: Hier habt ihr verschiedene Möglichkeiten:

normal (Eure Schrift wird normal angezeigt)
bold (Eure Schrift wird fett angezeigt)
bolder (Eure Schrift wird noch fetter angezeigt)
lighter (Eure schrift wird ziemlich dünn angezeigt)
100
200
300
400
500 } Diese Zahlen sind zwischen den lighter bis bolder z.b ist 600 etwas dünner als Bold!
600
700
800
900
inherit (Die weight wird von dem überliegendem Element übernommen)

Ich nehme gerne zu Ubuntu lighter;

.font {
font-family:Ubuntu;
font-weight:lighter;
}

Die Font-size ist eure Schriftgröße ich nehm einfach mal 15.

.font {
font-family:Ubuntu;
font-weight:lighter;
font-size:15;
}

Das sieht dann so aus bis jetzt:

color: sollte auch selbsterklärend sein ist eure Font-Farbe.

.font {
font-family:Ubuntu;
font-weight:lighter;
font-size:15;
color:black;
}

Der Text-Shadow ist eure Font Schattenfarbe z.b text-shadow: (Text Shadow nach rechts)1px (Text Shadow nach unten)1px (Allgemeiner Shadow)0px #000000;

Ich benutze für meine weiteren beispiele keinen Text-Shadow.

.font {
font-family:Ubuntu;
font-weight:lighter;
font-size:15;
color:black;
}

Kommen wir zur Text-Decoration:

text-decoration: overline; Über dem Text ist eine Linie

text-decoration: line-through; Text durchgestrichen

text-decoration:underline; Unter dem Text eine Linie

Nun zum Text-align:

text-align:end; (Text steht am Ende)

text-align:center; (Text ist in der Mitte)

text-align:left; (Text ist Links)
text-align:right; (Text ist Rechts)

text-align:start; (Text steht am Anfang)

Noch ein paar Extras:

letter-spacing: 1px; (Abstand zwischen den Buchstaben)
text-transform: uppercase; (Alle Buchstaben sind groß)
text-transform:lowercase; (Alle Buchstaben sind klein)


Und zum schluss noch der Font-style:


font-style: italic; (Kursive Ausrichtung)

font-style: inherit; (Passt sich dem übergeordnetem Element an)

Hiermit meine ich einfach die Boxen z.B beim Wartungsmodus usw..

Das Grundgerüst sollte eigentlich jeder hinbekommen:

#box {
height: 400px;
width: 400px;
background: white;
}

Kommen wir zum border:

border:solid 1px black; 1px = Eure Border breite. Black = Eure Border Farbe.

Wenn ihr nur border: nimmt zählt das für alle Seiten (Unten,Oben,Rechts,Links)
Ihr könnt das ganze natürlich auch selbst anpassen:

border-top:solid 1px black;

border-bottom:solid 1px red;

border-right:solid 1px yellow;
border-left:solid 1px blue;

Der border-radius: XXXpx; legt den Einzug in den Ecken fest z.B:

border-radius: 3px;

border-radius: 10px;

#box {
height: 400px;
width: 400px;
background: white;
border:solid 1px black;
border-radius: 3px;
}

Der box-shadow ist genau wie der text-shadow zu verstehen:

box-shadow: (Bottom-right) (X) 0px (Bottom-shadow) (Y) 0px 2px (Alle Seiten)2px rgba(0,0,0,0.3);

box-shadow: 0px -1px 0px 0px #ff0000; (Shadow Oben)
box-shadow: -1px 0px 0px 0px #ff0000; (Shadow Links)

Das ganze funktioniert natürlich auch nach innen: box-shadow: inset 0px 0px 1px 1px #d75e5e;

Mit background-image:url(background.png); könnt ihr der Box einen Hintergrund verschaffen


Und mit background-position: ; legt ihr die Bild Positon fest z.B center center; center right; center left; usw....

#box {
height: 400px;
width: 400px;
background: white;
border:solid 1px black;
border-radius: 3px;
box-shadow:0px 0px 0px black;
background-image:url(background.png);
background-position: center right;
}

In Kombination mit unserer Font:

Buttons in CSS Designen? Easy Work!

Wir erstellen uns eine neue class:

.button {}

Jetzt legt ihr fest wie lang und wie hoch euer Button werden soll, die länge könnt ihr auch auf Auto setzen und er passt sich dann der Schrift an die auf dem Button liegt.

.button {
background-color: #bb3415;
border: 1px solid #9f2d13;
width: 200px;
height: 20px;
}

Jetzt haben wir einen Roten aber noch ziemlich hässlichen Button.
Deswegen bringen wir jetzt einen box-shadow: dazu:

Was immer gut aussieht ist ein kleiner strich oben am Button dieser würde dann so aussehen:
Wir benutzen box-shadow: inset(Inset steht für innen) 0 (Y Achse)1px 0 0 (Die RGBA Farbe steht für ein Transparentes Weiß)rgba(255, 255, 255, 0.3);

So sieht es bis jetzt aus:

.button {
background-color: #bb3415; (Hintergrundfarbe bei mir ein Rotton)
border: 1px solid #9f2d13; (Der Border sollte etwas dunkler sein als eure gewählte Hintergrund Farbe)
width: 200px;
height: 20px;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

Sieht schon besser aus aber immer noch nicht so wirklich, also weiter gehts mit dem border-radius:

Für den Einzug an den Ecken benutzen wir border-radius: 3px; Wie weit euer Einzug sein soll könnt ihr selbst entscheiden.
(Ich erweitere ausserdem noch die Höhe)

Nun machen wir uns an den Text ran:

Wir setzen unseren Text mithilfe von text-align: center; mittig.
Dann wählen mir mit font-family: eine gewünschte Schriftart aus, ich benutze Ubuntu mit kombination von font-weight:lighter;

Falls ihr eine width: benutzt schmeisst ihr diese raus und setzt in euren CSS Code:

cursor: pointer;
display: inline-block;
padding:4px;
font-size:15px;

Nun passt sich der Button der Textgröße an.
Jetzt legt ihr noch eure Schriftfarbe mit color:white; fest.

Mein CSS Code sieht nun so aus:

.button {
background-color: #bb3415;
border: 1px solid #9f2d13;
width: 200px;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
border-radius: 3px;
text-align: center;
font-family: Ubuntu;
font-weight: lighter;
cursor: pointer;
display: inline-block;
padding:4px;
color:white;
font-size:15px;
}

Diese Art von Button ist ziemlich häufig vertreten weil es zu dem Simpleren Style passt... ihr müsst natürlich mit den Werten selbst rumspielen wie es euch grade passt..

Jetzt fügen wir noch einen Hover dazu.

Hover: Wenn man über den Button geht das sich z.b die Farbe verändert oder andere sachen.

ihr müsst einfach hinter den } .button:hover { } schreiben also so:

.button {
background-color: #bb3415;
border: 1px solid #9f2d13;
width: 200px;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
border-radius: 3px;
text-align: center;
font-family: Ubuntu;
font-weight: lighter;
cursor: pointer;
display: inline-block;
padding:4px;
color:white;
font-size:15px;
} .button:hover {
background-color:#c44529;

}

Ich hab nur die Background-Farbe erhellt:

Ein HTML Dokument ist folgendermaßen aufgebaut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Gibt die DTD an, in diesem Fall XHTML 1.0
<head>
In den Head 'Kopf' Bereich stehen die verlinkungen auf die einzelnen Stylesheets, Meta Tags die verlinkungen von JavaScripts usw... Die Sachen die hier stehen werden nicht auf der Webseite angezeigt (Nur im Quelltext)
</head>

<body>
Hier steht alles was dann im Browser angezeigt wird
</body>

Was könnte denn alles so im <head> Bereich stehen?


Um ein Favicon anzeigen zulassen benutzt ihr den Code:

<link rel="icon" href="favicon.png" type="image/x-icon">

Um einen Titel Anzeigen zu lassen benutz ihr den Code:
<title>Hallo RetroTown!</title>

Nun Kommen wir zu den META Tags:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> //G ibt den Charset an (z.B Bei Falschen oder Fehlendem werden ü ö ä nicht angezeigt.
<meta name="robots" content="all" /> // Hier durch wird die Webseite in Suchmaschinen aufgelistet.
<meta name="author" content="Name des Betreibers" /> // Der 'Autor' der für die Webseite verantwortlich ist.
<meta name="keywords" content="RetroTown, CSS Tutorial, usw.." /> // Helfen bei der Suchmaschinen optimierung, die Keywords 'Stichwörter' sollen Beschreiben was auf der Webseite vorfindbar ist.


Nach den Meta Tags kommen wir zu den Verlinkungen der Stylesheets, JavaScripts usw...


Ein CSS Dokument verlinkt ihr folgendermaßen:
<link href="Link zu deinem CSS Dokument" type="text/css" rel="stylesheet" />


Und eine JavaScript Datei so:
<script type="text/javascript" src="Link zu deinem JavaScript Dokument"></script>


Um im Head Bereich alles zu Ordnen empfehle ich Kommentare zu Benutzen die könnten so aussehen:

<!-- Meta Tags -->


Und so sieht ein Head Bereich dann komplett aus:

Nun kommen wir zum Body Bereich


Im Body Bereich kommen eure Elemente (id,class,a usw..)


Eine Div Class würde so aussehen:


<div class="retrotown"></div>
In diesen Div-Tag passen aber noch viel mehr sachen rein z.B


<div id="Retro" class="town" style="color:orange;" align="left"></div>


Legen wir diesen "code" mal in Teile:


Wir haben eine ID (Sollte jedem klar sein, wenn nicht: #dasisteineID { } )


Wir haben eine CLASS ( Siehe oben, wenn nicht: .dasisteineCLASS { } )


Wir haben style=" " dort könnt ihr die CSS Codes einfügen falls ihr ändern wollt. Es ist also das gleiche in Grün wie die ID/CLASS in CSS nur mit dem Unterschied das es so ziemlich blöd aussieht:


<div style="height: 400px; width: 400px; background: white; border:solid 1px black; border-radius: 3px; box-shadow:0px 0px 0px black; background-image:url(background.png); background-position: center right;">


Und vorallem ziemlich unübersichtlich ist.


Mit <a href=""></a> Könnt ihr Elemente verlinken z.b


<a href="retrotown.ws"><div class="button">Ab nach RetroTown</div></a>


Um Bilder anzeigen zu lassen könnt ihr <img src="LINK"> benutzen ihr könnt jedoch genausogut <div style="background: url(LINK); height:40px; width: 40px; float:left;"></div> benutzen.


<img src="link" align="left"> Schiebt den Text Rechts neben das Bild


<img src="link" align="right"> Schiebt den Text Links neben das Bild


CSS in HTML Benutzen


Ich empfehle es euch nicht, allerdings könnt ihr statt einem CSS Dokument auch die CSS Id's/classes in HTML reinschreiben das sieht dann so aus:


<style>
.retrotown {


}
</style>