Lab 09 HTML Styles -CSS
CINDY BEH XIN YI
AI200259
Lab #9:
HTML Styles - CSS
INFORMATION
CSS stands
for Cascading Style Sheets.
CSS saves a lot of
work. It can control the layout
of multiple web pages all at once.
CSS describes how HTML elements
are to be displayed on screen, paper, or in other media. CSS can be added to HTML elements in 3 ways:
·
Inline
- by using the style
attribute in HTML elements
·
Internal - by using a <style>
element in the <head> section
·
External - by using an external CSS file
INSTRUCTION
1. By using
Notepad, type the following text:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;} h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Save the file
as lab_8.html.
3. Upload your work into the blog.
QUESTIONS
1. Explain about the HTML code above.
<head>
This is to assign the words as heading.
<style>
body
{background-color: powderblue;} h1
{color: blue;}
p {color: red;}
</style>
This code is to put
background colour to the page and for the colour of words wish to display.
<link rel="stylesheet"
href="styles.css">
This line is to link
to an external style sheet which will make the style words same as the stylesheet.
2. What is the difference between Example 1 and Example 2?
There is no different between Example 1 and Example 2. The style of the words between two examples are the same as link rel, href is used to link external style sheet.
3. Make a report and
submit it to the Author.
4. Put your report
and answer to your blog also.
Comments
Post a Comment