10 Simple CSS Code Examples



Once you've started dabbling in HTML, you'll probably be interested in adding more power to your web pages. CSS is the best way to do that. CSS lets you apply changes across your entire page without relying on inline styling.


Here are several simple CSS examples to show you how to make some basic styling changes on your web page.


1. Basic CSS Code for Easy Paragraph Formatting

Styling with CSS means you don't have to specify a style every time you create an element. You can just say "all paragraphs should have this particular styling" and you're good to go.

Let's say you want every paragraph (<p>, one of the HTML tags everyone should know) to be slightly larger than usual. And dark grey text, instead of black. The CSS code for this is:

p {
  font-size: 120%;
  color: dimgray;
}

Simple! Now, whenever the browser renders a paragraph, the text will inherit the size (120 percent of normal) and color ("dimgray").


If you're curious as to which plain-text colors you can use, check out this CSS color list from Mozilla.


2. Change Letter Case

Want to create a designation for paragraphs that should be in small caps? A CSS sample for that would be:

p.smallcaps {
  font-variant: small-caps;
}

To make a paragraph that's entirely in small caps, we'll use a slightly different HTML tag. Here's what it looks like:

<p class="smallcaps">Your paragraph here.</p>

Adding a dot and a class name to an element specifies a sub-type of that element defined by a class. You can do this with text, images, links, and just about anything else.

If you want to change the case of a set of text to a specific case, use these CSS examples:

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

The last one capitalizes the first letter of every sentence.


3. Change Link Colors