LabSheet9 - CSS
The HTML code of Lab_09.html
Example 1
<!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>
The CSS code of styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Figure 1.1 shows the output of the
HTML code and CSS
QUESTIONS
1. Explain about the HTML code above.
Example
1
body {background-color: powderblue;}
This
code changes the background color to light blue. We can also changes the background
color to pink by modifying the code to body { background-color: pink;}
h1 { color: blue; }
This code will changes the color of the font
in between <h1> </h1> tags become blue. We can also changes the
color of the heading to pink by modifying the code to h1 { color:pink; }
p { color: red; }
This code will changes the color of the font
between the paragraphs <p></p> tags to red. We can also changes the
color of the paragraph to yellow by modifying the code to p { color:yellow }
Example 2
<link rel="stylesheet" href="styles.css">
The <link> tag
defines the relationship between the current document and an external resource.
The <link> tag
is most often used to link to external style sheets.
The <link> element
is an empty element, it contains attributes only.
The “href” attribute
is to specify the location of the linked document.
The “rel”
attribute is used to specifies the relationship between the current document
and the linked document.
In this case, it will link the
lab_09.html to an external style sheets which is named “style.css.” There is
one catch that is both of the file must under the same directory .
Figure
1.2 shows the files which is under the same directory
<h1> This is a heading </h1>
The text between the <h1></h1>
will become the heading. In this case, the heading is “This is a heading”
<p>This is a
paragraph.</p>
The <p> tag
defines a paragraph. In this case, the text in the paragraph is “This is a
paragraph.”
2. What is the difference between Example 1 and Example 2?
|
Example 1 |
Difference |
Example 2 |
|
Internal ·
The CSS is added to HTML using a <style> element in HTML
elements
|
Way
to link to CSS |
External ·
The CSS is added by using a external CSS file |
|
<style> body {background-color: powderblue;} h1 {color:
blue;} p{color: red;} </style> |
Code |
<link rel="stylesheet" href="styles.css">
|
|
The
<style> tag is nested inside the
<body> tag
|
Position of the CSS code |
The
<link> tag is nested inside the <head> tag |
Figure 1.3 shows the CSS code in styles.css
Comments
Post a Comment