KokoaTalk Clone Coding: classes
<head>
<style>
body {
margin: 20px;
}
span {
background-color: teal;
padding: 5px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
</body>
If I want some of them to put another color and to make beautiful, how can I do?
<head>
<style>
body {
margin: 20px;
}
.teal { it means class="teal"
padding: 5px 10px;
border-radius: 5px;
background-color: teal;
}
.tomato {
padding: 5px 10px;
border-radius: 5px;
color: white;
background-color: tomato;
}
</style>
</head>
<body>
<span class="teal">Hello!</span>
<span class="tomato">Hello!</span>
<span class="teal">Hello!</span>
<span class="tomato">Hello!</span>
<span class="teal">Hello!</span>
<span class="tomato">Hello!</span>
<span class="teal">Hello!</span>
</body>
but I don't want to repeat the code.
<head>
<style>
body {
margin: 20px;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.teal {
background-color: teal;
}
.tomato {
color: white;
background-color: tomato;
}
</style>
</head>
<body>
<span class="btn teal">Hello!</span>
<span class="btn tomato">Hello!</span>
<span class="btn teal">Hello!</span>
<span class="btn tomato">Hello!</span>
<span class="btn teal">Hello!</span>
<span class="btn tomato">Hello!</span>
<span class="btn teal">Hello!</span>
</body>
