CSS Codes to Copy and Paste

On this page you will find simple CSS examples (with HTML) that you can copy and paste into the PlayCode123 Code Sandbox.

If you are a complete beginner, it is helpful to first try some HTML examples and then come back here to style your pages with CSS.

How to use this page

Choose Open in Sandbox beside any example.
The Sandbox opens with the complete example already loaded and running.
Edit the CSS, then choose Run Code to see your changes.
Change some values (colors, fonts, sizes) and run again.

Using the Sandbox on a smartphone

Tap Open in Sandbox beside an example.
The example opens automatically in the Sandbox.
Tap inside the editor to change the code.
Tap Run Code to update the preview.
Tap Reset this example to undo your changes.
Optionally tap Full-screen editor for more editing space.

Reminder: CSS (Cascading Style Sheets) changes how your page looks. In these examples, CSS is placed inside a <style> tag in the <head> of the HTML document. In real projects, you usually keep most CSS in one <style> block or in a separate file (for example styles.css).

Example 1 – Background Color of the Page

This example sets the background color of the whole page using the body selector.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Background Color Example</title>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>

  <body>
    <h1>Aquatic Plants</h1>
    <p>The background of this page is light blue.</p>
  </body>
</html>

Try this: Change lightblue to another color, for example lightgreen or pink.

Example 2 – Text Color for the Whole Page

This example changes the text color of the page using the color property on the body element.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Text Color Example</title>
    <style>
      body {
            color: #166534;
      }
    </style>
  </head>

  <body>
    <h1>Aquatic Plants</h1>
    <p>All the text on this page is green.</p>
  </body>
</html>

Try this: Choose another dark text color and check that it remains readable against the page background.

Example 3 – Heading Color and Alignment

This example changes the color of all <h1> elements and centers them.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Heading Style Example</title>
    <style>
      h1 {
            color: #7c2d12;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>Aquatic Plants</h1>
    <p>This heading is yellow and centered.</p>
  </body>
</html>

Try this: Change the heading color, check its contrast, and try text-align: left; or text-align: right;.

Example 4 – Paragraph Alignment

This example shows how to align paragraphs to the center or to the right.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Paragraph Alignment Example</title>
    <style>
      p.centered {
        text-align: center;
      }

      p.right {
        text-align: right;
      }
    </style>
  </head>

  <body>
    <p class="centered">This text is centered.</p>
    <p class="right">This text is aligned to the right.</p>
  </body>
</html>

Try this: Add a third paragraph with normal (left) alignment and no class.

Example 5 – Font Family for Paragraphs

This example shows how to choose a font for all <p> elements on the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Font Family Example</title>
    <style>
      p {
        font-family: Verdana, Arial, sans-serif;
      }
    </style>
  </head>

  <body>
    <h1>Winding Water Plants</h1>
    <p>This paragraph uses the Verdana font (or a similar font).</p>
  </body>
</html>

Try this: Change the font to Georgia or "Times New Roman".

Example 6 – Font Size for Text

This example changes the font size of paragraphs using font-size.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Font Size Example</title>
    <style>
      p {
            font-size: 1.125rem;
      }
    </style>
  </head>

  <body>
    <h1>Different Aquatic Plants</h1>
    <p>This paragraph text is a bit larger.</p>
  </body>
</html>

Try this: Try font-size: 1.25rem; and test the page at 200% browser zoom.

Example 7 – Using an ID Selector

This example uses an ID selector to style a single paragraph.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ID Selector Example</title>
    <style>
      #beautifulaquaticplants {
        color: brown;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <p id="beautifulaquaticplants">Various beautiful aquatic plants.</p>
    <p>This paragraph has the default style.</p>
  </body>
</html>

Try this: Change the color and add text-decoration: underline; to the ID selector.

Example 8 – Using a Class Selector

This example uses a class selector to style several paragraphs in the same way.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Class Selector Example</title>
    <style>
      p.aquaticplants {
        color: brown;
      }
    </style>
  </head>

  <body>
    <p class="aquaticplants">Aquatic plants in cold regions...</p>
    <p class="aquaticplants">Aquatic plants in tropical regions...</p>
    <p class="aquaticplants">Aquatic plants in subtropical regions...</p>
    <p>This paragraph has default styling.</p>
  </body>
</html>

Try this: Add font-style: italic; to the class, and see all three paragraphs change.

Example 9 – Reusable Highlight Classes

This example uses reusable classes instead of placing presentation rules directly on individual HTML elements. In a larger website, put these rules in a separate stylesheet.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Highlight Class Example</title>
    <style>
      .highlight {
        background-color: #1e3a8a;
        color: white;
        padding: 0.2rem 0.35rem;
      }

      .plant-note {
        background-color: #166534;
        color: white;
        padding: 1rem;
      }
    </style>
  </head>

  <body>
    <h1>Food Sources</h1>

    <mark class="highlight">
      Aquatic plants are food sources
    </mark>

    <p class="plant-note">
      Aquatic plants are food sources<br>
      for many animals,<br>
      and they also serve as shelters.
    </p>
  </body>
</html>

Try this: Change the colors in the class rules and reuse class="plant-note" on another paragraph.

Example 10 – Simple Card with Border and Padding

This example creates a simple “card” with a border, padding and a different background color.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Card Style Example</title>
    <style>
      .card {
        border: 1px solid #333;
        background-color: #f0fff0;
        padding: 20px;
        margin: 20px;
        border-radius: 8px;
      }
    </style>
  </head>

  <body>
    <div class="card">
      <h1>Aquatic Plant Card</h1>
      <p>This box has a border, padding and a light background color.</p>
    </div>
  </body>
</html>

Try this: Change the background color of the card, and try increasing the border-radius to make the corners more round.