Revision history [back]

Inline CSS: You can apply inline CSS styles directly to your Vue.js template elements. For example:

<template>
  <div style="background-color: red; color: white;">
    Hello World!
  </div>
</template>

Style Tag: You can include a style tag within your Vue.js template to apply styles using CSS. For example:

<template>
  <div>
    <style>
      .title {
        color: green;
        font-size: 24px;
      }
    </style>
    <h1 class="title">Welcome to my blog!</h1>
  </div>
</template>

External CSS file: Use an external CSS file to style your Vue.js template. Simply link your style file in your HTML file using the link tag.

<template>
  <div class="container">
    <h1>Welcome to my website!</h1>
  </div>
</template>

<!DOCTYPE html>
<html>
...
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
...
</html>



md5-ecb6741fc35114cffe91507e0a0392ae



<template>
  <div class="container">
    <h1 class="title">{{ title }}</h1>
  </div>
</template>



md5-a176c7e25ad7ea91f1c37ea95c88c51b



<style module>
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
  .title {
    color: red;
    font-size: 24px;
  }
</style>