What is the good practices to apply css to html web pages ?

Before we start what is good way to apply CSS first we will understand that what is css for beginners.

CSS (Cascading Style Sheet) is used for apply and beautify to html web pages to make interactive. If we will not apply CSS to the html page then the User Interface of any web page will not much good.

Now we understand that how many ways to apply CSS to the html web page,

So, there are three ways are available to apply CSS to html pages.

1. Inline CSS

2. Internal CSS

3. External CSS

1. Inline CSS

Inline CSS means we will apply CSS code in to html tag which means HTML and CSS both are in one line.

For Example: <div style="color:red;">Hello, World!</div>

In above example you can see that div is the html tag and we are applying CSS to div tag using style property. In inline style property has attribute and it's value. As an Example in, 'style="color:red;" ', "color " is an attribute and "red" is the value of the attribute.

Advantages: Easy to write

Disadvantages: Not scalable code, repeated code, hard to handle in html page

2. Internal CSS

Internal CSS means we will apply CSS into the style tag and under to the head tage. This way is better than the inline CSS, because the same design we can apply to the multiple html tags.

For Example:

<html>

<head>

<title>This is title</title>

<style>

div,p{

color:red;

}

</style>

</head>

<body>

<p> This is paragraph </p>

</body>

</html>

Output: This is div

This is paragraph

In the above you can see that we are applying CSS as Internal way in that we are applying same design to the different html tags.

Advantages: Easy to write, code reusability, less code

Disadvantages: Not very scalable code, not applied to the multiple pages, hard to handle for very large html page

3. External CSS

External CSS means we will create seprate CSS file with .css extension and we will link the the html page where we want to apply to the css.

This is very best way to apply CSS to the web page because if we want to apply same design of this css then we can apply to the multiple page and we can handle design of very large page.

For Example: index.html

<html>

<head>

<title>This is title</title>

</head>

<body>