Most developers use external styles in CSS3 to reduce the amount of work required to maintain a site. A single .CSS file contains all of the styles for the site, which means that changing a style site-wide is as simple as changing that one file (rather than each page). Because the change occurs in just one place, there isn’t any chance of missing one or more changes on individual pages.
Creating and using an external style sheet isn’t much different from using an internal style sheet. The following example uses standard techniques to create an external style sheet:
Create a new HTML5 file with your text editor.
Type the code for the HTML page.
<!DOCTYPE html> <html> <head> <title>A Simple Page</title> </head> <body> <h1>A Simple Heading</h1> <p>Simple text to go with the heading.</p> </body> </html>
Make sure you type the code precisely. What you should end up with is the same plain page — one without any styles.
Type the following code immediately after the
tag.</p> <pre class="code"><link rel="stylesheet" href="ExternalCSS.CSS" /></pre> <p class="child-para">The <link> tag tells the browser to look for an external resource. In this case, the rel attribute says that it should look for a style sheet and the href attribute provides the name of that style sheet.</p> </li> <li><p class="first-para">Save the HTML5 file to disk.</p> </li> <li><p class="first-para">Create a new .CSS file with your text editor.</p> <p class="child-para">Your editor may not support .CSS files. Any text file will do.</p> </li> <li><p class="first-para">Type the following code in the .CSS file.</p> <pre class="code">p { font-family: cursive; font-size: large; color: #0000ff; background-color: #ffff00; } h1 { font-family: "Times New Roman",Georgia,serif; font-size: 40px; text-align: center; text-decoration: underline; color: #ff0000; background-color: #00ffff; }</pre> <p class="child-para">This may be the same code that you used to create your internal file. The only difference is that it now resides in an external file.</p> </li> <li><p class="first-para">Save the CSS file to disk as ExternalCSS.CSS.</p> <p class="child-para">It’s absolutely essential that the name of the file precisely match the name found in the href attribute. Some platforms are case sensitive, so you must use the same case for the filename. For example, externalcss.css might be viewed as a different file from ExternalCSS.CSS.</p> </li> <li><p class="first-para">Load the page in your browser.</p> <img loading="lazy" src="https://www.dummies.com/wp-content/uploads/414625.image0.jpg" width="460" height="169" alt="image0.jpg"/> </li> </ol>