CSS Tutorial

This tutorial includes many CSS examples.

Each example shows the rendered output first, like so:

This is followed by the code that created it.

<style>
  .bg-aliceblue {
    padding: 20px;
    background-color: aliceblue;
  }
</style>

<div class="bg-aliceblue">
  An element with an aliceblue background color
</div>

Click the above button to explore the code in our online CSS editor.

For a list of all CSS properties, see our CSS reference guide.

CSS is a core technology in web development, together with HTML and JavaScript. Advantages of CSS are:

Next are some HTML elements styled with CSS.

Three clickable <button> elements, each styled differently.

<style type="text/css">
  .btn-base {
    width: 150px;
    padding: 15px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
  }

  .btn-dark {
    background: #3630A3;
    color: white;
    border: none;
  }

  .btn-light {
    background: #808cf8;
    color: white;
    border: none;
  }

  .btn-outline {
    background: none;
    color: #302ea3;
    border: 1px solid #302ea3;
  }
</style>

<button class="btn-base btn-dark"
        onclick="alert('Hello')">
  Button 1
</button>
<button class="btn-base btn-light"
        onclick="alert('Hi')">
  Button 2
</button>
<button class="btn-base btn-outline"
        onclick="alert('Hola')">
  Button 3
</button>

Explanation

Another Example

Next, we'll take styling a step further.

Hovering over the <button> element applies another CSS style.

<style type="text/css">
  .btn-style {
    background: none;
    color: #3630A3;
    border: 2px solid #3630A3;
    width: 150px;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
  }

  .btn-style:hover {
    background: #3630A3;
    color: white;
  }
</style>

<button class="btn-style">Hover Me</button>

Explanation:

• Our CSS Pseudo-classes Tutorial
• Our CSS background Property Reference
• Our HTML Reference Guide