10 easiest CSS code examples to learn in 10 minutes

Once you’ve started learning about HTML, you’ll probably want to make your website more beautiful. CSS code is exactly what you need to do it. CSS allows you to apply changes throughout your page without relying on inline styling.

Here are some simple CSS examples so you can make some basic changes to your website.

10 easiest CSS code examples to learn in 10 minutes

1. Text Format

With CSS, you don’t need to change the properties of each HTML element. CSS can apply the attribute to all tags in the HTML file.

Assuming you want every paragraph in the

tag to be slightly larger than normal and change the text color to dark gray, you can code the CSS like this:

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

Whenever the browser renders a paragraph, that text is sized (120 percent larger than normal) and has a “dimgray” color.

If you want to know what colors you can use in CSS you can check out Mozilla’s color list here.

2. Change the text property

If you want to reduce capital letters, you can use the following code to apply to

tags in the HTML file.

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

To apply only one

tag in an HTML file, you can use the class attribute.

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

Add periods and class names to the CSS file. Only the html element that uses that class can apply the attribute you write in the CSS file.

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

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

The last attribute will capitalize the first letter of each sentence.

3. Change the link color

Changing properties is not limited to paragraphs. There are 4 different colors you can apply to the link: the standard color, the visited color, the color on hover, and the color when you click on the link. You can try this CSS code for better understanding:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Depending on the specific context and user actions, the link will change color accordingly

4. Remove the underline of the link

Links will become more beautiful if you remove the underline on the link using the “text-decoration” attribute. You can use the following CSS code to remove that underline:

a { text-decoration: none; }

Anything with a link tag (“a”) will not be underlined. Want to add an underscore when the user hovers over the link? Just use:

a:hover { text-decoration: underline; }

You can also apply this property to active links to make sure the underline doesn’t disappear when you click the link.

5. Create a Link Button Using CSS

Want your link to attract more attention? Then you can create a link button using the below CSS code:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

I will explain the above CSS code.

The code that includes all four link states ensures that the button doesn’t disappear when the user hovers over or clicks on it. You can also set different parameters for the 4 states of the link, for example, change the button color or the text.

The background color is set using the background-color property and the text color is color. Padding defines the size of the button.

Text-align ensures that the text is displayed in the center of the button, rather than off to the side. I also removed the underscore of the link as mentioned above.

“display: inline-block” is a bit more complicated. In short, it allows you to set the height and width of the object. Also, items will be stacked together on a line.

6. Create a text box

A simple paragraph will not be interesting. If you want to highlight an element on the page, you can add a border around the text. For example the following CSS code:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

It will create a purple border, five pixels wide, around any paragraphs with class important. To create a paragraph with the above attribute applied, you just need to code:

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

There are different border styles you can apply besides “solid” like “dotted” or “double”. Meanwhile, width can be “thin”, “medium”, or “thick”. You can even specify the thickness of each contour edge:

border-width: 5px 8px 3px 9px;

The top border is 5 pixels, the right border is 8 pixels, the bottom border is 3 pixels, and the left border is 9 pixels.

7. Center the object

For common tasks, centering elements with CSS code won’t be intuitive. However, you will get used to it once you do it a few times.

For a block element, usually an image, you can use the margin property:

.center { display: block; margin: auto; }

The element is displayed as a block and the margin on each side is set automatically. If you want to center all images on a certain page, you can simply add “margin: auto” to the img tag:

img { margin: auto; }

But what if you want to center the text with CSS? Let’s use this CSS code:

.centertext { text-align: center; }

So you just need to add the class “centertext” to the tag to center the text.

<p class="centertext">This text will be centered.</p>

8. Adjust padding

Padding of an element specifies how much space is on each side of the element. For example, if you add 25 pixels of padding to the bottom of an image element, the text below the image will be pushed down by 25 pixels. Multiple elements can add padding, not just an image.

Let’s say you want every image to have 20 pixels of padding on the left and right sides and 40 pixels on the top and bottom. Then you just need to code:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

When you use only two values, the first value is set for the top and bottom, while the second will be left and right.

9. Highlight the rows in the table

CSS makes the table look much better than default. Add color, adjust borders, and make your table automatically resize when displayed on phones. This simple CSS code example will show you how to highlight table rows when you hover over them.

tr:hover { background-color: #ddd; }

Now whenever you hover over a cell in the table, that row changes color.

10. Make photos transparent and blur

CSS can also help you do interesting things with images. You can blur an image with the following CSS code:

img { opacity: 0.5; filter: alpha(opacity=50); }

The “filter” property works similarly to “opacity”, but Internet Explorer 8 and earlier does not recognize opacity. So for older browsers, you should add the “filter” attribute.

Now that the images are slightly transparent, you can make them completely opaque on hover:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Above are the 10 easiest CSS code examples that you can learn in 10 minutes. Do you find it easy to understand? In addition, you can also learn more about 17 HTML examples in 10 minutes here.