Internal and External CSS

Internal and External CSS

by

Internal and External CSS

In this article , we will be looking about , on how to add Styling internally into our HTML File or Externally by creating a new ” .CSS” File

Internal CSS.

Refer the Code below below to check out how to add Internal CSS to our HTML file.

  1. First I have created a Style tag between the Head tag
  2. Then I target the Html body, H1 and P to input the style content.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I am HTML</title>
<meta name="description" content="">
 
<style>
 
body{
    font-size: 100px;
    background: blue;
 
       }
 
h1{
     
      font-weight: bold;
      font-size: 100px;
       }
 
 
p.italic {
    font-style: italic;
    font-size: 40px;
}
 
 
</style>
 
 
</head>
<body>
<h1>Create Un Order List</h1>
 
<ul>
<li><a href="http">About Brian</a></li>
<li><a href="http">Where Brian From</a></li>
<li> <ahref = "http">Contact Brian</a></li>
 
</ul>
<hr>
<p class="Italic"> Hi All my name is Brian</p>
</body>
</html>

External CSS.

 Create an External CSS Style SheetL

Below show how to create an external CSS Style Sheet

  • First create a new file and name it as “.CSS”
  • Then Put the CSS Link relation Reference between your head tag
  • The Rel Link should have a valid location or address where the HTML file can point the link to the CSS
  • Finally Style your CSS Content in the “.css” File you have just created
01
02
03
04
05
06
07
08
09
10
<!DOCTYPE html>
<html>
  
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>I am HTML</title>
<meta name="description" content="">
<link rel="stylesheet" href="main.css">
</head>

 Now you can add Styling into the “.CSS” File you have just created

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
body{
    font-size: 100px;
    background: blue;
 
       }
 
h1{
     
      font-weight: bold;
      font-size: 100px;
       }
 
 
p.italic {
    font-style: italic;
    font-size: 40px;
}

Check out the Sample over here

Check out how to create a Table in HTML

Leave a Comment

eight − 8 =