As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please guide me on how to apply CSS styles to this code?
<!DOCTYPE HTML>
<html>
<head>
<title>v-if If Statements</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.special {background:yellow; border: 1px dotted #fe0000; padding:30px; display:block; text-align:center;}
.important {font-weight:bold; font-size:30px;}
</style>
</head>
<body>
<div id="app">
<figure>
<img v-if="profile.pic" :src="profile.pic">
<div v-if="profile.fname && profile.lname">
Profile: {{profile.fname}} {{profile.lname}}
</div>
<div v-else>
No First or Last name found.
</div>
<figcaption>
<div v-if="profile.desc">
Desc: {{profile.desc}}
</div>
<div v-else>
No description found.
</div>
<div v-if="profile.bio">
Bio: {{profile.bio}}
</div>
<div v-else>
No bio found.
</div>
</figcaption>
</figure>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
profile: {
fname: "Chris",
lname: "Picasso",
desc: "Student",
bio: "Web developer",
pic: "https://i.pinimg.com/custom_covers/222x/85498161615209203_1636332751.jpg"
}
}
});
</script>