Page 124 - DCAP408_WEB_PROGRAMMING
P. 124
Web Programming
Notes 3. Naming your stylesheet: It’s an unofficial naming convention that the main stylesheet is
called style.css. It can’t hurt adopting this yourself.
4. Use F5 to display recent changes: When you’re making changes to your stylesheets you
have to press the F5 key to force the web browser to load the newest version instead of
using the cached one.
Creation of .css File
Let us get started by making that external CSS file. Open up notepad.exe or any other plain text
editor and type the following CSS code.
CSS Code: (test.css)
body{background-color: gray}
p {color: blue;}
h3{color: white;}
Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as
notepad likes to do by default. Name the file “test.css” (without the quotes). Now create a new
HTML file and fill it with the following code.
HTML Code: (index.htm)
<html>
<head>
<link rel=”stylesheet” media=”all” 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>
Task What is the major difference between the Inline CSS and Embedded CSS?
Save this file as “index.htm” (without the quotes) in the same directory as your CSS file. Now
open your HTML file in your web browser and it should look something like…
Display:
[See complex HTML example using External Style Sheets]
External File: ‘example.css’
body {
background: black;
color: #80c0c0}
a:link {color: #ff8080}
118 LOVELY PROFESSIONAL UNIVERSITY
