Zed-King Institute
    PreviousNext

    CSS Class Selector Example: Background, Color and Padding

    mediumCSSHTML

    A class lets you style any number of elements the same way — define it once in CSS, use it in HTML.

    The question

    Create a <div> with class "box" containing any text. In CSS, give .box a background-color of maroon, a text color of yellow and padding of 20px.

    The code

    index.html

    <div class="box">Computer Sikho, Rojgaar Pao</div>

<style>
.box {
  background-color: maroon;
  color: yellow;
  padding: 20px;
}
</style>
    Try it Yourself »

    Result

    How it works

    1. 1In HTML, class="box" gives the element the class.
    2. 2In CSS, .box { … } (with a dot) targets every element with that class.
    3. 3background-color fills the box, color sets the text colour, padding adds space inside the border.

    Common mistakes

    • Forgetting the dot: box { … } looks for a <box> tag, which does not exist.
    • Using color when you meant background-color.

    Now solve a similar question yourself

    A new HTML / CSS / JS question every time, checked instantly.

    Practice questions

    More in CSS

    PreviousNext