Create another new text file and write the following codes. A White Header This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! Save this file with name MyExternalCSSdemo.html (Run and see the effect.) Create a new folder name – Tutorial -5 Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and ExternalCSS.txt for CSS file Open Tutorial -5.txt as a sublime text (by right click on it) Following tasks to be completed to develop a web page using external CSS. 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’ 2. Web page should have heading “Tutorial Five Demonstration” 3. Write a paragraph (use tag) in 5-6 lines which should contain your Name and your first experience with External CSS 4. Use individual margin properties. Add following into your .css file (Run and see the effect.) p { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } 5. a) Paste your codes and output in a word document. b) Write a comment on the output explaining how External CSS
Create another new text file and write the following codes.
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
Save this file with name MyExternalCSSdemo.html (Run and see the effect.)
Create a new folder name – Tutorial -5
Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and
ExternalCSS.txt for CSS file
Open Tutorial -5.txt as a sublime text (by right click on it)
Following tasks to be completed to develop a web page using external CSS.
- 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’
- 2. Web page should have heading “Tutorial Five Demonstration”
- 3. Write a paragraph (use <p> tag) in 5-6 lines which should contain your Name and your first experience with External CSS
- 4. Use individual margin properties.
Add following into your .css file (Run and see the effect.)
p {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
- 5. a) Paste your codes and output in a word document.
- b) Write a comment on the output explaining how External CSS

Step by step
Solved in 3 steps with 3 images









