Styling Components with CSS

Vue components can be styled using regular CSS. You define styles inside the <style> section of a component.

<template>
  <h1 class="title">Hello Vue</h1>
</template>

<style>
.title {
  color: #4f46e5;
  font-size: 28px;
}
</style>

The class is applied in the template and styled in the <style> block.

You can use all standard CSS features such as colors, spacing, and typography.

.title {
  color: #111827;
  margin-top: 20px;
  font-weight: bold;
}

Styling components with CSS allows you to control the appearance of your interface while keeping styles organized inside each component.