5 Simple CSS Code That Can Make Your Website Awesome

CSS is the best way to style the elements of your webpage. With CSS, you don’t have to write the same code again and again as it can style different elements such as text, paragraph and images with just few line of code. Take a glance at this article to know few simple CSS codes that can make your web page totally amazing.

Simple Paragraph Formatting

The most intriguing thing about CSS is that a particular style can be easily applied to all the elements that you create. If you want all paragraphs of your web page to be of the same style then here is the code that can give a specific style to your page.

p {

font-size: 100%;

color: blue;

}

 

These 2-3 lines of CSS code will give a styling to your code and will make your paragraph font color blue and slightly larger than the normal font.

Modify Letter Case

If you want to keep your paragraph in small caps then you just have to add few line of code. Here is the code for that.

p.smallcaps {

font-variant: small-caps;

}

The dot is used to add a class name after the element. The code for defining a class is given below

<p class=”smallcaps“>Paragraph here.</p>

Alter Link Colors

Mostly, four-color are used for the links. The colors of the links are given according to its status that is hover color, standard color , active color and visited color. Let’ see the code to change color links.

a:link {

color:grey ;

}

 

a:visited {

color: red;

}

 

a:hover {

color: purple;

}

 

a:active {

color: blue

}

Make a TextBox

It is very easy to create a text box with CSS. Even a plain and dull paragraph can be made interesting with the help of textboxes. You just have to create a border around the paragraph and add colors and style as per your choice. Here are the steps are given below:

p.imp {

border-style: solid;

border-width: 10px;

border-color: red;

}

And after that define a class for this element

<p class=”imp”>Important paragraph here.</p>

Eliminate Link Underlines

It is very easy to remove the link underlines with the help of “text-decoration” attribute. Here is the code for that.

a {

text-decoration: none;

}

If you want to underline your link when you hover your mouse over it then add the code given below:

a:hover {

text-decoration: underline;

}

Wrapping Up

These are some easy CSS code examples that will give you a rough idea of the of CSS. You can apply your own ideas to style your website according to your preference.

Leave a Comment

%d bloggers like this: