In this article, we will learn how to use CSS in your HTML. There are 2-3 ways to use CSS in your HTML. ALL way we will see this in this article with examples. Before going to using CSS lets understand what is CSS first.

The full form of CSS is Cascading Style Sheet, which is a text file with .css extension. This is used to design the webpages to look more attractive and user friendly.

CSS is commonly used to define styles and layouts of Web pages which are written in HTML and XHTML. We can control each tag of HTML using CSS from the perspective of design.

CSS3 is an upgraded version of CSS with more design, features and new elements.

Syntax of CSS:-

[cc lang=”html” tab_size=”2″ lines=”80″]
{ first property : value;

Second property : value;

Third property: value;

.
.

}
[/cc]

Inline CSS

If you want to style a particular and specific element of HTML then you can use inline CSS.

To use inline CSS, add the style attribute to the relevant element.

Below is an example of inline CSS.

[cc lang=”html” tab_size=”2″ lines=”80″]

This is a h1 heading

This is a paragraph.

[/cc]

Internal CSS

Internal CSS is also very useful. It is used most of the time when you want to use the same style for the multiple tags or for all tags.

Suppose if you want to make the color of h tag red for all HTML page then you can use it instead of inline CSS.

[cc lang=”html” tab_size=”2″ lines=”80″]

This is a heading

This is a paragraph.

[/cc]

External CSS

External CSS is not a complicated process. It is very easy. The only difference in external CSS from the above two is that here we create a separate CSS file with .css extension where we write the code of CSS. And inside the HTML file we give the location of the CSS file.

Like

Lets see the complete example for how we can use it efficiantly.

index.html

[cc lang=”html” tab_size=”2″ lines=”80″]

This is h2 tag

This is paragraph tag

[/cc]

As we can write HTML in any text editor. Similarly css file we can write in any text editor.

style.css

body{
	background-color:green;
}
h2{
color:red;
}

Using the above css of body, we are trying to make background green of the webpage.

And using color:red; we have tried to make heading h2 text color red.