CSS
Links
Zielsetzung
Cascading Style Sheets (CSS) ist eine Sprache, mit der HTML-Inhalte mit Formateigenschaften ausgestattet werden. Das dient der Trennung von Inhalt (HTML) und Form (CSS).
Schnellkurs
- Datei anlegen: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tutorial.css">
</head>
<body>
<div class="sheet">
<h1>Try it!</h1>
<div class="region1 right">
This is a paragraph with right alignment.
</div>
<div class="region2">
<div class="error">Error found</div>
<div class="warning">Warning: it is dangerous</div>
</div>
<div class="region1 middle">
This is a paragraph too, but with center alignment.
</div>
<div>
</body>
</html>
- Datei anlegen: tutorial.css
h1, h2, h3 {
border-bottom: 1px blue solid;
}
.sheet {
background-color: #cc;
margin: 1em;
padding: 1em;
}
.region1 {
background-color: lightgreen;
margin: 1em 33%;
}
.region2 {
background-color: white;
}
.error {
color: red;
border: 0.1em solid red;
}
.warning {
color: blue;
}
.middle {
text-align: center;
}
.right {
text-align: right;
}
- Datei index.php im Browser öffnen.