LU12.L01 - CSS Grundlagen

<!doctype html>
<html lang="de">
<head>
  <title>Klassenselektor</title>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>Kopfzeile</header>
<nav>Navigation</nav>
<h1>Klassenselektor</h1>
<p>1. Absatz</p>
<p class="remark">2. Absatz</p>
<p class="remark warning">3. Absatz</p>
<p class="warning bigfont">4. Absatz</p>
<footer>Fußzeile</footer>
</body>
</html>

css/style.css

/* 1. */
body {
    font-family: Futura, sans-serif;
}
 
/* 5. */
header,
footer {
    font-size: 80%;
    background-color: #00b3ee;
    text-align: left;
}
 
/* 7. */
nav {
    font-size: 90%;
    background-color: #778899;
    color: #ffffff;
    text-align: center;
}
 
/* 6. */
h1, h2{
    color: darkslateblue;
}
 
/* 2. */
p.remark {
    margin-left: 70px;
    border-left: 15px solid blue;
    padding-left: 10px;
}
 
/*  3. */
p.remark.warning {
    border-left: 9px solid blue;
    border-top: 1.5px solid blue;
    border-right: 9px solid blue;
    border-bottom: 1.5px solid blue;
    text-align: center;
}
 
/* 4. */
.warning { color: blue; }
.bigfont { font-size: 130%; }

m293-LU12

Daniel Garavaldi, Kevin Maurizi