Hjälp med kod i css

Hjälp med kod i css

Hjälp detta är helt nytt för mig har skapat ett html och skapat en tillhörande css.
Dock får jag problem i css när jag efter <li> vill ha en rubrik som ser likadan ut som de andra.
Fast jag har skrivit in alla rubriker likadant så blir det som kommer efter li helt annorlunda. Dessutom så får jag det inte att fungera med bakgrundsfärg:
Koden jag skrivit i css är skulle uppskatta om någon kunde se vad felet är
<!DOCTYPE html>
<html>
<head>
<head> <meta charset="utf-8">
<style>
body {
background-color: pink;
}
h1 {
text-align: center;
}

h2 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h3 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h4 {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

h5 {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

h6 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

h7 {
font-family: arial;
font-size: 26px;
margin-left: 150px;
}

p {
font-family: arial;
font-size: 16px;
margin-left: 150px;
margin-right: 150px;
}

ul {
font-family: arial;
font-size: 16px;
margin-left: 150px;
}

li {
font-family: arial;
font-size: 16px;
margin-left: 50px;
}

</style>
</head>
<body>

<h1></h1>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
<h4></h4>
<ul></ul>
<li></li>
<h5></h5>
<ul></ul>
<li></li>
<h6></h6>
<p></p>
<h7></h7>
<p></p>

</body>
</html>

Känns inte riktigt som att du förstår strukturen eller grunderna, ta en titta på lite grundexempel på t.ex. https://www.w3schools.com/

t.ex. så brukar man väga h1-h6 där h1 är störst och h6 är minst, du sätter font-size till 26px på h6 som är det samma som h1, då bör den rubriken vara h1.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color: pink; } h1,h2,h3,h4,h5,h6 { font-family: arial; } h2,h3,h4,h5,h6 { margin-left: 150px; } h1 { text-align: center; } h2 { font-size: 26px; } h3 { font-size: 26px; } h4 { font-size: 16px; } h5 { font-size: 16px; } h6 { font-size: 26px; } p { font-family: arial; font-size: 16px; margin-left: 150px; margin-right: 150px; } ul { font-family: arial; font-size: 16px; margin-left: 150px; } ul li { font-family: arial; font-size: 16px; margin-left: 50px; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>Test</p> <h3>Headin 3</h3> <p>Test</p> <h4>List #1</h4> <ul> <li>Item #1</li> </ul> <h5>List #2</h5> <ul> <li>Item #1</li> <li>Item #2</li> </ul> <h6>Heading 6</h6> <p>Text</p> </body> </html>

Hej

@GonAce: Du menar att man ska ha mindre rubriker på de som inte är h1 ?
och att man ska baka in koden för de olika rubrikerna istället för att göra de en och en?
Nej jag ha precis börjat läsa detta så det är helt nytt och förvirrande för mig

css...

Detta är lite roligt. Jag har läst webbutveckling i skolan. Men är inte så bra på det. Jag skulle rekommendera att du använder dig av ett externt css dokument, det gör saker och ting mycket lättare. Jag kan inte direkt se något fel i koden men som sagt jag är verkligen inte bra på css.
Kasper

Om du tex använt Word så är rubrikerna i storleksordning för att man ska se en logik med dem. h1 störst, sedan h2...och h6 minst. Dock skulle jag personligen säga att det räcker med h1-h4 då jag tror att jag själv aldrig använt fler än 3. Det ska ju finnas ett syfte med att dela in i nivåer.

Jag hade helt missauppfattat css fil ! Det det jag ska göra nu men tex istället för att skriva ut varje rubrik kan man skriva h1,h2,h3 tex?
Någon pratade om wrapper ? Vad är det och hur gör jag det isf istället ?

*Tråd flyttad*

För att underlätta för alla som vill hjälpa till så är det bra om du länkar till en "fiddle" eller liknande med det du har skrivit, samt att du omsluter din text i [code]-taggar här på forumet så att man inte får ont i ögonen när man försöker läsa

https://fiddle.jshell.net/

Fiddle är också väldigt smidigt att använda för att snabbt testa olika ändringar, då man får upp resultatet direkt när man klickar på "run".

En "wrapper" är oftast en <div> som omsluter andra element. Användningsområdet kan variera beroende på vad man vill göra. Men som exempel kanske du vill ha 3 rubriker som är omgivna utav en "border".

Har gjort ett fult och snabbt exempel här:
https://fiddle.jshell.net/3xpnb4g4/12/

En wrapper är något du använder för att omsluta ett element t.ex. <div id"mainWrapper"> för att ha en container som omsluter allt övrigt.
Du skall använda tagarna h1 - h6 samt p (paragraf) när du jobbar med text.