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

HTML und PHP mit CSS stylen

roboterfreund

Neues Mitglied
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!---
 
Werbung:
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 ?
 
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!
 
Werbung:
Und wo wird das h3-Tag benutzt? Was sollen wir mit dem Teil Quellcode alleine anfangen?
 
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>
 
Werbung:
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>
 
Werbung:
Sollte da nicht auch ein Link vorhanden sein ?
<link rel="stylesheet" type="text/css" href="link_zur.css">
sonst hat der Teil doch keine Funktion oder ?
 
Werbung:
Zurück
Oben