Applying CSS on a webpage

Inline CSS

CSS defines a style property for either a group of elements on the page or individual elements. So, these properties are moderated by CSS by embedding directly into the tags as attributes. This way of decorating a page is called inline style addition. Lets see an example


This is my first decorated paragraph

Similarly, we can insert a number of style properties in this way. However, this method of putting CSS is not preferable because, if we have say five such paragraphs on my webpage, I would have to change each of them manually in order to fix it. However, if I use other style methods it would be a lot easier. Follow us to get the difference properly.

Internal CSS

This type of CSS is used when we wish to have different styles on different pages, or, if we wanna some specific things on some particular pages. So, all the style properties are set inside the style tag in head tag.


// Inside the body tag, we will have

This is my first paragraph decorated with internal style sheet

The style is set for paragraphs, so its applicable to all the paragraphs in the document. We can also select some particular paragraph by giving them id or class and change their styles selectively. We will be discussing that a bit later.

External CSS

In this way of applying CSS, we use an external file which contain all the style properties defined. The external file has an extension .css and the contents of the file look like this.

	p {
		color: blue;
		font-family: calibri;
		font-size: 15px;

	a {
		color: blue;
		text-decoration: none;

We need to include the style sheet in which we have defined the properties in each of our documents. This saves our time and effort and the code of the webpage becomes easy to understand.Here is how we include in our head tag.

Once we know how we can apply CSS to our webpages, lets see how to write a CSS code

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


<<< Wanna review

Continue >>>