Styling a Component in the Vue Framework
To style components, you need to write the style tag in the component file:
<script>
</script>
<template>
</template>
<style>
</style>
In this tag you can write CSS code, but it will only be applied to the HTML code of the component and will not be applied anywhere else. This is done specifically for convenience.
Let's look at an example. Let's say we have some paragraphs:
<template>
<p>
1
</p>
<p>
2
</p>
</template>
Let's color them red:
<style>
p {
color: red;
}
</style>
Style your component tags.