Kleiner JavaScript Kurs

Exkurs CSS Grundlagen

Mit der Seitenbeschreibungs-Sprache HTML (HyperText Markup Language) werden Internetseiten beschrieben. Formatiert werden die Seiten über CSS (Cascading Style Sheets; deutsch mehrstufige Formatvorlagen)
CSS Definitionen werden in der Regel in einer eigenen Datei gespeichert (z.B. style.css) und über einen Link im head in die HTML Seite eingebunden:


<link href="css/style.css" rel="stylesheet">

CSS Definitionen können aber auch direkt im head oder im body einer HTML Seite stehen:


<body>
    <p style="text-align: center; color: green;">
        Dieser Absatz wird über ein style-Attribut formatiert. 
    </p>
    <p>
        Dieser Absatz ist unformatiert. 
    </p>

</body>

Einige Beispiele für CSS Definitionen


Tags einheitlich formatieren z.B. die Überschriften <h1>

<!doctype html>
<html lang="de">
  <head>
    <style>
        h1 { 
           background-color: blue;
           color: white;
            }
    </style>
  </head>
  <body>
    <h1>Erste Überschrift</h1>
    <p>Das ist ein Absatz</p><br>
    <h1>Zweite Überschrift</h1>
    <p>Das ist der zweite Absatz</p>
  
  </body>
</html>


Eine bestimmte Klasse (class), oder id formatieren

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <style>
          .menue{
            background-color: skyblue;
            padding-top: 1px;
            padding-bottom: 1px;
            border-radius: 1em;
            }
          .menue ul li {
            display: inline;
            list-style-type: none;
    		}
          .menue ul li  a{
            background-color: blue;
            color: white;
            text-decoration-line: none;
            font-size: larger;
            border-radius: 10%;
            }
          #aktiv {
          	background-color: darkblue !important;
            }
      	</style>
    </head>
                        
    <body>
		<nav class="menue">
          <ul>
            <li><a href="#link_1.html">Menüpunkt 1</a></li>
            <li><a href="#link_2.html" id="aktiv">Menüpunkt 2</a></li>
            <li><a href="#link_3.html">Menüpunkt 3</a></li>
          </ul>
        </nav>
      	<article>
      	 <ul>
           <li><a href="#link_1.html">Menüpunkt 1</a></li>
           <li><a href="#link_2.html">Menüpunkt 2</a></li>
           <li><a href="#link_3.html">Menüpunkt 3</a></li>
         </ul>
       </article>
    </body>
</html>
Klassen werden mit einem Punkt ".", id's mit einer Raute "#" gekennzeichnet.