 |
| Add captionHTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 21.
In our previous lesson we saw what is CSS. We also saw how to use external CSS in HTML.
Today we will learn internal CSS and inline CSS.
Internal CSS and Inline CSS
Internal CSS is used to apply styles to elements in a web page. For this we specify style in the head section of HTML. Once declared in the head, we can use it at several places in body. Inline CSS is used to apply style to a specific element in the web page. We specify this in the opening tag of the element.
So we will learn these two methods today.
Internal CSS
We will write a script for internal CSS and understand the concept. Open a new Notpad file. In this file copy all code from lesson-20.
In this code, just below <head> write a comment:
<! Example of Internal CSS>
In lesson-20 we have used "link" to link external CSS sheet to HTML. Delete that line. Now write style for h1. It will be as follow:
<style>
This is used to write internal style. We can apply style written in this to the elements. Let us write style for h1 and body.
h1 {
color: red;
text-align:center
}
body {
color:blue;
}
We have written same style in our lesson-20. The difference is we created there a separate style sheet, here we have declared style in the HTML script itself. Therefore this is called internal CSS. Now close style, i.e.
</style>
Save this file as "Lesson-21-1" and "Lesson-21-1.html". See the figure displayed below. Click on this figure for PDF file of source code.
 |
| Figure 21-1. Internal CSS, CSS style |
Go in Windows explorer and double click on HTML document. See the output.
 |
| आकृति २१-२ Output of internal CSS |
This output is similar to that of Lesson-20. We have written same style using different method.
Inline CSS
Now let us learn inline CSS. Close lesson-21-1.
Open a new Notepad file. Copy all code from "Lesson-08" in this file. This is shown in the figure 21-3 below. Just below <head> write a comment:
<! Example of inline CSS>
 |
| Figure 21-3. Inline CSS in English |
We need not change anything in this script. Simply understand the concept. We have used inline CSS at two places in this code.
<h1 style="color:Blue;">
and
<p style="background-color:red;">
We have mentioned style in the opening tags of elements. Therefore, these are inline CSS.
Save this file as "Lesson-21-2" and "Lesson-21-2.html". Click on figure 21-3 for PDF file of source code. Double click on HTML document. See the output.
 |
| आकृति २१-४ Output of inline CSS |
Once again we have achieved same output, but using third method namely inline CSS.
Important Points:
1. Internal CSS style is written in head section. We can then refer this in body as required. Then if we need to change style of any element then only change in style declared and this will be applied to the elements. For instance if we wish to change color of elements then we will need to change this only once in head.
2. To write inline CSS we give style in the opening tags of elements. This style is applied to the element only where this style is written.
Lesson-20 Lesson-22
