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

Open the Code Sandbox in a new tab.
On this page, click the Copy to Sandbox button above a code block.
Go to the sandbox tab, click in the code box, and press Ctrl + V (or ⌘ + V on Mac) to paste.
Click the Run Code button in the sandbox to see the result.
Change some values (colors, fonts, sizes) and run again.

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: green;
      }
    </style>
  </head>

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

Try this: Change green to another color, such as darkblue or brown.

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: yellow;
        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 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.2em;
      }
    </style>
  </head>

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

Try this: Try font-size: 2em; or font-size: 18px; and see the difference.

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 – Inline Styles

This example shows how to use inline styles directly on HTML elements. This is fine for small tests, but for bigger websites it is better to keep most CSS in a <style> block or a separate file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Inline Style Example</title>
  </head>

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

    <mark style="background-color: blue; color: white;">
      Aquatic plants are food sources
    </mark>

    <p style="background-color: green; color: white;">
      Aquatic plants are food sources<br>
      for many animals,<br>
      and they also serve as shelters.
    </p>
  </body>
</html>

Try this: Change the background color in the inline styles and see how it affects only those elements.

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.