There is a problem that css is not applied to app.vue-CodePudding

I'm a beginner who just entered vue.js. After creating the project, I want to apply a simple css to the web. (margin, box size) However, for some reason, the css written in app.vue does not apply at all.

//app.vue

<template>
  <div>
    <Nav />

    <div >
      <carousel
        :autoplay="true"
        :nav="true"
        :dots="true"
        :items="1"
        :pullDrag="true"
      >
        <!-- <img src="https://placeimg.com/200/200/any?1" /> -->
        <img src="./assets/1.png" />
        <img src="./assets/2.png" />
        <img src="./assets/3.png" />
      </carousel>
    </div>

    <div id="category-title">
      <h2 >Title</h2>
      <h2 >Title</h2>
      <h2 >Title</h2>
      <h2 >Title</h2>
      <h2 >Title</h2>
    </div>
  </div>
</template>

<script>
import Nav from "./components/Nav";
// import Banner from "./components/Banner.vue";
import carousel from "vue-owl-carousel";

export default {
  name: "App",
  components: {
    Nav,
    carousel,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-left: 30%;
  margin-right: 30%;
}

.banner {
  height: 100px;
}

#category-title {
  margin-top: 100px;
}
</style>

I want to apply the size of the margin and banner in , but no css applies. I don't think there's a problem with other projects, but can I know the suspected cause?

Thank you.

CodePudding user response：

I suppose style related to #category-title would be working but #app style wouldn't be applied since since app tag doesn't exist in this component scope for that purpose you need to apply style on index.html file which is present in the public folder like below

Or include a global css file and link in index.html