Scribd
Upload
76 views

Module 9: Using External CSS Module 9: Using External CSS

Using External CSS allows you to change the styling of an entire website by modifying a single CSS file. Each page must include a <link> tag in the <head> section to reference the external CSS file. An external CSS file does not contain any HTML tags and is saved with a .css extension. The document then provides instructions on how to move styles from an existing HTML file into an external CSS file and link the HTML pages to that new external CSS file.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
76 views

Module 9: Using External CSS Module 9: Using External CSS

Using External CSS allows you to change the styling of an entire website by modifying a single CSS file. Each page must include a <link> tag in the <head> section to reference the external CSS file. An external CSS file does not contain any HTML tags and is saved with a .css extension. The document then provides instructions on how to move styles from an existing HTML file into an external CSS file and link the HTML pages to that new external CSS file.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Module 9: Using External

CSS
External CSS
• With External CSS, you can change the look of an
entire website by changing just one file.
• Each page must include a reference to the external
style sheet file inside the <link> element.
• The <link> element goes inside the <head> section.
• An External CSS file can be written in any text
editor. The file should not contain any HTML tags
and must be saved with a .css extension.
Activity 41
Activity 42
Laboratory
Exercise 16
Using External CSS
Instructions
• Create a new CSS file named lab16.css
• Open laboratory11.html
• Save it as laboratory16.html
• Change the title to Laboratory 16
• Transfer all styles to the lab16.css file
• Put the heading style in an ID named #mainheading
• Put the image styles in a class name .logosmall
• Create a link to connect to lab16.css
Instructions
• Open all 6 link files (ex. laboratory11-chrome.html) and
save them as new files (laboratory16-chrome.html)
• Transfer all styles to the lab16.css file
• Put the h1 heading style in an ID named #linkheading
• Put the image style in a class named .logolarge
• Put the paragraph style using element selector
• Put the h4 heading style in a class named .center
• Create a link to lab16.css on all 6 link files

You might also like