CSS
Contents
Einführung
Gute Tutorials zu CSS findest Du bei www.css4you.de
Einen guten Überblicke über die CSS Befehle gibt folgendes Cheat-Sheet von Dave Child Autor von Added Bytes: CSS-Cheat-Sheet
CSS im HTML
HTML-Datei: css_in_html.html
<syntaxhighlight lang="html4strict"> <html> <header>
</header>
<body style="color:rgb(0%, 0%, 100%);"> hello world </body>
</html> </syntaxhighlight>
Online-Test: css_in_html
CSS im Header
<syntaxhighlight lang="html4strict"> <html> <header> <style> a { text-decoration:none; color:rgb(40%, 40%, 40%); } a:hover { color: rgb(100%, 0%, 0%); } </style> </header>
<body>
Kontakt:
Digipool-Team
<a href="http://www.digipool.info">www.digipool.info</a>
<a href="mailto:digipool@uni-kassel.de">digipool@uni-kassel.de</a>
</body>
</html> </syntaxhighlight>
Online-Test: css_in_header
CSS-Datei verlinken
Mit dieser Zeile bindet man eine CSS-Datei ein:
<syntaxhighlight lang="html4strict">
<link rel="stylesheet" type="text/css" href="MeinName.css" media="all"/>
</syntaxhighlight>
- Diese Zeile wird in den Head gelegt. (Zwischen <head> und </head>)
- Die Datei "MeinName.css" ist eine normale Text Datei in UTF-8 Kodierung der man die Endung ".css" gibt.
- Der Dateiname muss selbstverständlich mit dem im Link genau übereinstimmen (auch in Groß- und Kleinschreibung).
Typische Webseite
Typischer Aufbau einer Webseite mit Header, Footer, Menü und Content in der Mitte. Das Ganze ist in einen "wrapper" und "inner-wrapper" gepackt.
HTML-Datei:
typische_webseite.html
<syntaxhighlight lang="html4strict">
<html>
<head>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<a href="./demo.hmtl">title</a>
<a href="#titel1">projekt1</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a href="#titel1">projekt1</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body> </html> </syntaxhighlight>
CSS-Datei:
style.css
<syntaxhighlight lang="html4strict">
- {
margin:0; padding:0; }
body { background-color:#999; }
a { text-decoration:none; font-weight: normal; } a:hover { color: #fff; }
p { color: #eee; }
- wrapper {
margin-left: 35px; margin-top: 20px; }
- inner-wrapper{
width: 775px; }
- header {
width: 775px; height: 100px; background-color:#0000ff; margin-bottom: 20px; }
- navigation {
background-color:#ff0000; width:200px; float: left; margin-right:20px; }
- navigation ul {
width: 200px; padding: 20px 0 20px 20px; list-style-type: none; }
- navigation ul li.selected a {
color: #fff; }
- content-wrapper {
width: 555px; background-color:lime; float: left; } .clear { clear:both; }
- footer {
background-color:purple; margin-top: 20px; } </syntaxhighlight>
Online-Test: typische_webseite
