CODEWITHSUNDEEP
javascripthtmlcssangularjs
CodyBugstein
CodyBugstein

Reputation: 23302

CSS is not being applied in my Angular project

In my Angular project, I am trying to apply some basic CSS, but it is not working no matter what I try.

I know that the CSS file is being referenced properly so that is not the issue.

Here is the exact code:

css file

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
h1 {
    color: blue;
}
.card {
    height: 100px;
    width: 100px;
    background-color: #0099ec;
}

main html file

<html ng-app="Gameplay_01">
<head>
    <link href="public/stylesheets/style.css" type="text/css" />
    <script src="bower_components/angular/angular.js"></script>
    <script>
        var gameModule = angular.module('Gameplay_01', []);
        gameModule.controller('cardsController', cardsController);

        function cardsController($scope){
            $scope.cards = [
                {
                    "id": 1,
                    "suit": "hearts",
                    "number": 4,

                },
                {
                    "id": 1,
                    "suit": "spades",
                    "number": 10,
                },
                {
                    "id": 3,
                    "suit": "clubs",
                    "number": 12,
                }
            ];
        }

    </script>
</head>
<body>
<h1>The Gameboard</h1>
<div ng-controller="cardsController">
    <div id="cards" ng-repeat="card in cards">
        <div class="card">
            <p>{{card.suit}} </p>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 1064

Answers (1)

szupie
szupie

Reputation: 856

You're missing rel="stylesheet" in your link tag.

<link href="public/stylesheets/style.css" type="text/css" />

should be

<link rel="stylesheet" href="public/stylesheets/style.css" type="text/css" />

Upvotes: 2

Related Questions