Dofactory.com
Dofactory.com

CSS Tutorial

CSS

CSS describes the presentation of web pages.

With CSS you can design beautiful websites.

This tutorial gets you up to speed quickly.

It's designed for you and it's free. We hope you enjoy!

CSS Examples

#

This tutorial includes many CSS examples.

Each example shows the rendered output first, like so:

An element with an aliceblue background color

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.


What is CSS?

CSS stands for Cascading Style Sheets.

It's a language to control the presentation of a web page.

CSS can control the styling of individual HTML elements.

CSS can also style many web pages.

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


Why CSS?

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

CSS specifies the presentation of HTML documents.

This includes colors, background, fonts, spacing, animations, etc.

It works on all devices: desktop, tablet, mobile, printer, etc.

CSS is lightweight and relatively easy to learn.

HTML and CSS are essential skills for web developers.

Next are some HTML elements styled with CSS.


Examples

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

The background, color, and border properties are specified using CSS.

The size of the buttons is specified with the padding property.

The class attributes on the buttons reference CSS class selectors, such as btn-base

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:

Again, the button style is specified with CSS.

A hover effect is created by using a CSS pseudo-class :hover.

This pseudo-class applies a new style when the button is hovered.


Did you know?

Did you know?

The person behind CSS

CSS was first proposed by a Norwegion web pioneer named Håkon Wium Lie on October 10, 1994
Håkon Wium Lie

The first version of CSS (CSS1) was released in 1996.

CSS is currently maintained by the World Wide Web Consortium (W3C).


You may also like


Last updated on Sep 30, 2023




Guides