eldutcho
Reputation: 41
CSS styling doesn't appear to have any effect
I'm working through some challenges on freeCodeCamp. Specifically, the challenge is to make a brief "tribute page" on a topic of your choice. I've been working in CodePen, but have started using Brackets because it seems more user-friendly.
My issue is that my CSS styling isn't doing anything in my standalone html file, whereas in CodePen it was working. I'm sure I'm making a boneheaded error somewhere. Thoughts? Thank you for any suggestions/help!
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>Upvotes: 2
Views: 98
Answers (3)
Orok Ukpong
Reputation: 37
You need to add a Bootstrap CDN link to your in order to get the custom classes to work
<!DOCTYPE html>
<html>
<head>
<link hef="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {margin: auto; }
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>Upvotes: 0
Deathstorm
Reputation: 847
This sounds a bit obvious but:
Do check that you've included your CSS file:
Example for bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<!-- load bootstrap from CDN !-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Content
</body>
</html>Secondly why use <style> tags? you could also include that in another file.
Upvotes: 0
Michael Coker
Reputation: 53674
Looks like you're using bootstrap classes, so you need to add the bootstrap stylesheet to your page. You can use this CDN link I've put in the HTML, or you can download the files and upload them to your site/project https://getbootstrap.com/.
Bootstrap was likely baked in to your codepen project, but bootstrap isn't a fundamental part of HTML or CSS, so if you want to use it on a custom project, you have to include it. You also want to include the bootstrap stylesheet before any of your own styles, so that the base bootstrap styles are applied, then you can overwrite specific ones if needed with styles that are loaded afterward and bootstrap won't interfere.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.center {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:20px" >
<h1 style="color: black" class="text-center">Gord Downie</h1>
<div class="row center">
<img src="http://i.huffpost.com/gen/4541188/thumbs/o-GORD-DOWNIE-TRAGICALLY-HIP-570.jpg?5" class="center">
</div>
<p class="caption text-center"> "He Who Walks Among The Stars" </p>
<p class="text-center"> Gord Downie is a Canadian musician, most well known for his role as the lead singer of the Tragically Hip. More recently in his career, he has also been a spokesperson for the welfare of First Nations communities across Canada. Since 2016, Gord has been battling incurable brain cancer, but has been able to continue writing and performing. As a true artist, Gord has never let fame change him, always maintaining his focus on his music and philanthropy.</p>
<div class="text-center">
<h3 class="text-center"> <strong>Musical Works </strong></h3>
<h5>As a member of the Tragically Hip:</h5>
<ul class="text-center">
<li>The Tragically Hip (Self-Titled) - <em>1987</em></li>
<li>Up To Here - <em>1989</em></li>
<li>Road Apples - <em>1991</em></li>
<li>Fully Completely - <em>1992</em></li>
<li>Day for Night - <em>1994</em></li>
<li>Trouble at the Henhouse - <em>1996</em></li>
<li>Phantom Power - <em>1998</em></li>
<li>Music @ Work - <em>2000</em></li>
<li>In Violet Light - <em>2002</em></li>
<li>In Between Evolution - <em>2004</em></li>
<li>World Container - <em>2006</em></li>
<li>We Are the Same - <em>2009</em></li>
<li>Now for Plan A - <em>2012</em></li>
</ul>
<h5>Solo Work</h5>
<ul>
<li>Coke Machine Glow - <em>2001</em></li>
<li>Battle of the Nudes - <em>2003</em></li>
<li>The Grand Bounce - <em>2010</em></li>
<li>Secret Path - <em>2016</em></li>
</ul>
</div>
</body>
</html>Upvotes: 1