Types of CSS Codes

In this chapter you will learn:
How to use CSS codes?
Types of CSS codes
Inline CSS
Internal CSS
External CSS

You can use CSS codes in three ways which are given below-

i) Inline CSS
ii) Internal CSS
iii)External CSS

i) Inline CSS:-

If you write the CSS codes within HTML tag then it is called inline CSS.

Example- 
<p style="color:red; font-size:25px; font-weight:bold"> This is example of Inline CSS </p>

ii) Internal CSS:-

If you write the CSS codes within HTML tag then it is called inline CSS.

Example- 
<html>
<head>
<style>
h1
{
      color:Green;
      font-family:Algerian;
      font-style:normal;
      font-size:large;
      font-weight:bold;
}
 </style>
</head>
<body>
<h1>Example ofinternal CSS</h1>
</body>
</html>


Output
example of internal css Limitation:-

If you want to apply the given CSS for other HTML web page then you can’t use it because it is specific to the page in which it is written.

iii) External CSS:-

If you write the CSS code in a separate page and the html code in a different page then it is called external CSS. It overcomes the limitation of inline CSS because you can access this CSS for all the pages of html but to do this you have to give the reference of the external CSS within the page you want to apply.

Note:- Write the code of CSS in notepad or dream viewer or other editor and save with extension .css and use the given syntax for the html page in which you want to include it.


<linkrel="stylesheet" type="text/css" href="nameofcsspage.css" />

Guide to use external CSS:-
  1. Open the editor like notepad or dream viewer
  2. Write the code of CSS
  3. Save with extension .css
  4. Again open notepad or dream viewer
  5. Write the code for a web page (HTML)
  6. Link with external CSS with the help of given syntax and it must be within a head tag or body tag unless it can’t work
  7. Save the web page code with any name but an extension with .html or .php, according to your web page.
  8. Open the saved web page with the double click
Note:-

It is better to save both pages (external CSS and web page) in the same location because it this condition you have to not write the path of CSS. You can only give the name of CSS page for href.

Example:-

Write the given code in notepad or dream viewer and save with extension .css.


p
      {
      font-size:20px;
      color:Blue;
      font-family:Arial;
      font-style:normal;
      }

Write the given code in notepad or dream viewer and save with extension .html 
<html>
<head>
<linkrel="stylesheet" type="text/css"href="external.css">
</head>
<body>
<p>This is the example of external css.</p>
</body>
</html>

Now open the html page by doubl click on it. you will get that the defined properties of paragraph in external CSS has applied.
Output:
example of external CSS
Advantages of external CSS:-
i) It helps to separate the design and Content
ii) It is very easy to reuse the codes of CSS so we can use it to apply to multiple web pages
iii) You can make stream changes in your web pages with some little changes

Summary

In this chapter, you have learned that how to apply CSS with HTML tags/elements. CSS properties are given in next chapter so click on Next button to continue learning-

 

Share your thought