CSS Codes

  • erol.koc
  • erol.koc's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 6 months ago #232 by erol.koc
CSS Codes was created by erol.koc
Liebe TeilnehmerInnen,
anbei sind die heute durchgearbeiteten Dateien:
Einmal webseite.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Meine WM-Seite</title>
</head>
<body>
<img class="center" src="wm2018.jpg" alt="WM Logo">
<h1>FIFA WM 2018</h1>
<p>Die Endrunde der Fußball-Weltmeisterschaft 2018 (englisch 2018 FIFA World Cup) ist die 21.
Austragung des bedeutendsten Turniers für Fußball-Nationalmannschaften und findet vom 14. Juni bis zum 15. Juli 2018
in Russland statt.</p>
<h2><span class="gruppe">Gruppe A</span></h2>
<p>Das sind die Mannschaften in der Gruppe A:</p>
<p class="laender">Russland<br><span id="favorit">Uruguay</span><br>Ägypten<br>Saudi Arabien</p>
<h2><span class="gruppe">Gruppe B</span></h2>
<p>Das sind die Mannschaften in der Gruppe B:</p>
<p class="laender">Portugal<br><span id="favorit">Spanien</span><br>Marokko<br>Iran</p>
<p>Hier geht es zur <a href="https://de.fifa.com/worldcup" target=”_blank”>FIFA-Webseite</a></p>
<p>Bla bla bla
</body>
</html>


Einmal style.css
body {
background-color: lightblue;
font-family: sans-serif;
}

h1 {
background-color: DodgerBlue;
color: white;
text-align: center;
}

/*h2 {
border:5px solid Tomato;
}*/

.gruppe {
border-width: 4px;
border-style: solid;
border-color: Tomato;
border-radius: 12px;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

p {
margin: 10px;
text-align: justify;
}

#favorit {
background-color: yellow;
}

.laender {
text-transform: uppercase;
font-size: 1.4em;
}

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}


Viel Spass beim Weiterverändern!
The following user(s) said Thank You: franz

Please Anmelden to join the conversation.

Moderators: ivan.gulagozde.taskaya