HTML und PHP mit CSS stylen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

roboterfreund

Neues Mitglied
24 März 2020
10
0
1
48
Hallo,

ich bin neu hier und habe eine Frage:

Wie kann man eine HTML und PHP-Datei mit CSS stylen?


Vllt. könnt ihr etwas damit anfangen, wenn ich die PHP-Datei (mit HTML) hier reinschicke:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"

<link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">

</head>

<body>




<!--HEADER--->
<header>
<div id="logo">
<a href="#">
<a href="#home"><img src="img/logo.png" alt="Logo"></a>
</a>
</div>
<!--NAVIGATIONSLEISTE-------------------------------------------->
<nav id="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>

</ul>
</nav>
</header>
<!--HOME------------------------------------------------------------->
<section id="home">
<hr>
<h1>Max Mustermann</h1><br>
<h2>Isst gerne Kekse.</h2>
<a href="#about"><img src="img/pfeil.png" alt="Pfeil">
</a>
</section>
<!--ABOUT------------------------------------------------------------->
<section id="about">
<h3>About</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4>Max Mustermann</h4>
<p>Lorem ipsum dolor sit <u>amet</u>, 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.</p8>
</section>
<!--WORK---------------------------------------------------------------->
<section id="work">
<br> <h3>Work</h3>
<hr>
<!--WORK: PROJECTS------------------------------------------------------->
<div id="projects">
<ul>
<li><a href="Projekt1.html"><img src="https://placehold.it/280x170" alt="Projekt_01"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_02"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_03"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_04"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_05"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_06"></a></li>
</ul>
</div>
</section>


<!--KONTAKT--------------------------------------------------------->
<section id="contact">
<h3>Contact</h3>
<hr>

<p>Zögern Sie nicht, mich zu kontaktieren!</p>

<?php

echo "Sie können folgende Meinungen abgeben: <u>Ja, Nein</u><form action='VerarbeiteForm.php'
method='POST'> \n
<input type='text' name='Ihre Meinung' /> \n
<input type='submit' value='Name absenden' /> \n
</form> \n";





?>


<div id="SocialNetworks"
<br>
<a href="#"><img src="img/icons8-ios-50.png" alt="Instagram"></a>
<a href="#"><img src="img/icons8-facebook-50.png" alt="Facebook"></a>
<a href="#"><img src="img/icons8-nachricht-50.png" alt="Nachricht per E-Mail"></a>


</section>


<!--KONTAKT: SOCIAL NETWORKS--------------------------------->





<!--FUßZEILE--------------------------------------------------->

<footer>

<p>
&copy; 1327-1398 Max Mustermann &emsp; <a href="Impressum.html">Impressum</a>
<a href="mainindex.php">Intern</a>
</p>


</footer>



</body>
</html>




---Ich hoffe auf Eure Antwort!---
 

roboterfreund

Neues Mitglied
24 März 2020
10
0
1
48
wie soll man die frage verstehen ?
Mit der css stylt man seine Seite.
Die bindet man extern ein oder mit
Code:
<style>
p{
background:green;
}
</style>
Damit ist jeder Hintergrund von einen <p> Element grün.

Oder meinst du das anders ?
Danke für deine Antwort! :D Ich habe es jetzt so probiert (Anfang Websitecode):

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"

<style>

h3 {
font-size: 80px;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">

</head>


<body>

Leider wird mein Style-Code nicht ausgeführt.

Ich hoffe auf eine erneute Antwort!
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.113
227
63
18
Der Grund warum dein CSS nicht greift ist, weil du hier einen Syntax-Fehler hast. Der eine link tag ist nicht geschlossen und kann vollständig entfernt werden.
<head>
<title>Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"

<link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">

</head>
 
  • Like
Reactions: roboterfreund

roboterfreund

Neues Mitglied
24 März 2020
10
0
1
48
Der Grund warum dein CSS nicht greift ist, weil du hier einen Syntax-Fehler hast. Der eine link tag ist nicht geschlossen und kann vollständig entfernt werden.
Leider funktioniert das irgendwie immernoch nicht... Ich hoffe auf Eure Antwort!


Hier der Code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"

<style>
section {
min-height: 100%;
}

a {
text-decoration: none;
}

li {
list-style-type: none;
}

h2, h3, a {
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #494949;
text-transform: uppercase;
}

h2 {
color: #5d7177;
}

h3 {
font-size: 40px;
padding-top: 85;
margin-bottom: 5px;
}

h4, p {
font-family: 'Roboto Slab', sans-serif;
color: #494949;
}

hr {
width: 30px;
height: 3px;
background: #494949;
border: 0;
margin: 0 auto 40px auto;
}
#logo, li, img, .button {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}



/* HEADER ****************************************************/

header {
width: 100%;
height: 65px;
position: fixed;
top: 0;
left: 0;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 1;
}

#logo {
width: 140px;
float: left;
margin: 10px 0 0 50px;
}

#logo:hover {
opacity: 0.5;
}

#logo img {
width: 100%;
height: 100%;
}



</style>

<link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">

</head>

<body>




<!--HEADER--->
<header>
<div id="logo">
<a href="#">
<a href="#home"><img src="img/logo.png" alt="Logo"></a>
</a>
</div>
<!--NAVIGATIONSLEISTE-------------------------------------------->
<nav id="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>

</ul>
</nav>
</header>
<!--HOME------------------------------------------------------------->
<section id="home">
<hr>
<h1>Max Mustermann</h1><br>
<h2>Isst gerne Kekse.</h2>
<a href="#about"><img src="img/pfeil.png" alt="Pfeil">
</a>
</section>
<!--ABOUT------------------------------------------------------------->
<section id="about">
<h3>About</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4>Max Mustermann</h4>
<p>Lorem ipsum dolor sit <u>amet</u>, 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.</p8>
</section>
<!--WORK---------------------------------------------------------------->
<section id="work">
<br> <h3>Work</h3>
<hr>
<!--WORK: PROJECTS------------------------------------------------------->
<div id="projects">
<ul>
<li><a href="Projekt1.html"><img src="https://placehold.it/280x170" alt="Projekt_01"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_02"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_03"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_04"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_05"></a></li>
<li><a href="#"><img src="https://placehold.it/280x170" alt="Projekt_06"></a></li>
</ul>
</div>
</section>


<!--KONTAKT--------------------------------------------------------->
<section id="contact">
<h3>Contact</h3>
<hr>

<p>Zögern Sie nicht, mich zu kontaktieren!</p>



<div id="SocialNetworks"
<br>
<a href="#"><img src="img/icons8-ios-50.png" alt="Instagram"></a>
<a href="#"><img src="img/icons8-facebook-50.png" alt="Facebook"></a>
<a href="#"><img src="img/icons8-nachricht-50.png" alt="Nachricht per E-Mail"></a>


</section>


<!--KONTAKT: SOCIAL NETWORKS--------------------------------->





<!--FUßZEILE--------------------------------------------------->

<footer>

<p>
&copy; 1327-1398 Max Mustermann &emsp; <a href="Impressum.html">Impressum</a>
<a href="mainindex.php">Intern</a>
</p>


</footer>



</body>
</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67