External CSS and How to Implement It
External CSS
Lesson Objectives
•
CSS How to (External CSS)
W3Schools - Click on CSS How To
REVIEW
: 3 Ways to Insert CSS in your HTML document
1.
INLINE
style – you have already done this in your previous exercises.
2.
INTERNAL
style sheet – in the <head> section of your HTML
document between
<style>
and
</style>
tags.
3.
EXTERNAL
style sheet
M
e
t
h
o
d
3
:
R
e
f
e
r
e
n
c
e
t
o
t
h
e
E
x
t
e
r
n
a
l
S
t
y
l
e
S
h
e
e
t
<link>
tag within
<head>
and
</head>
M
e
t
h
o
d
3
:
E
x
t
e
r
n
a
l
S
t
y
l
e
S
h
e
e
t
1.
Each page must include a reference to the external style sheet file inside the
<link>
element.
•
The
<link>
element goes inside the
<head>
section.
•
rel
– used to define the relationship.
•
text/css
– indicates that the style sheet is written in CSS.
•
href = “mystyle.css”
– filename of the style sheet.
H
e
r
e
i
s
h
o
w
t
h
e
“
f
i
l
e
.
h
t
m
l
"
r
e
f
e
r
e
n
c
e
s
t
h
e
e
x
t
e
r
n
a
l
.
c
s
s
f
i
l
e
:
<!DOCTYPE html>
<html>
<head>
<link rel =“stylesheet” type=“text/css” href=“mystyle.css”>
</head>
<body>
content of the web page
</body>
</html
Looks for
the .css
stylesheet
for all the
styling of
the .html file
H
e
r
e
i
s
h
o
w
t
h
e
"
m
y
s
t
y
l
e
.
c
s
s
"
f
i
l
e
l
o
o
k
s
:
body {background-color: linen;}h1 {color: maroon;
margin-left: 40px;
}
Open NOTEPAD:
1.
Enter the css code.
2.
No <style> tag.
3.
NO HTML <tags> in .css file
4.
Save with: .css file extension
5.
Save As Type: All files
6.
In same location as .html file
M
e
t
h
o
d
3
:
E
x
t
e
r
n
a
l
S
t
y
l
e
S
h
e
e
t
1.
With an external style sheet, you can change the look of an entire website by
changing just one file.
2.
An external style sheet can be written in any text editor, like Notepad.
3.
The file should
**NOT** contain any html <tags>
.
4.
The style sheet file must be saved with a
.css extension
.
•
In Notepad – Choose Save As Type: All files
Learn the different methods of inserting CSS into your HTML documents, including inline styles, internal style sheets, and external style sheets using the tag. Explore the benefits of using external style sheets to easily update the look of your entire website. Follow step-by-step instructions on creating external CSS files and linking them to your HTML. Embrace the power of CSS for styling your web pages efficiently.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Lesson Objectives CSS How to (External CSS)
W3Schools - Click on CSS How To REVIEW: 3 Ways to Insert CSS in your HTML document 1. INLINE style you have already done this in your previous exercises. 2. INTERNAL style sheet in the <head> section of your HTML document between <style> and </style> tags. 3. EXTERNAL style sheet
Method 3: Reference to the External External Style Sheet <link> tag within <head> and </head>
Method 3: External External Style Sheet 1. Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section. rel used to define the relationship. text/css indicates that the style sheet is written in CSS. href = mystyle.css filename of the style sheet.
Here is how the file.html file: <!DOCTYPE html> <html> <head> <link rel = stylesheet type= text/css href= mystyle.css > </head> <body> content of the web page </body> </html file.html" references the external .css Looks for the .css stylesheet for all the styling of the .html file
Here is how the "mystyle.css mystyle.css" file looks: Open NOTEPAD: 1. Enter the css code. 2. No <style> tag. 3. NO HTML <tags> in .css file 4. Save with: .css file extension 5. Save As Type: All files 6. In same location as .html file body {background-color: linen;} h1 { color: maroon; margin-left: 40px; }
Method 3: External External Style Sheet 1. With an external style sheet, you can change the look of an entire website by changing just one file. 2. An external style sheet can be written in any text editor, like Notepad. 3. The file should **NOT** contain any html <tags>. 4. The style sheet file must be saved with a .css extension. In Notepad Choose Save As Type: All files
