External CSS is CSS in its fullest form. The method requires creating a separate CSS file to put all your style declarations for your site. Even if your site has say, a hundred pages, all you need is a single file to apply revisions. The external CSS file is dictated by only one line of HTML code.
In our previous example, let us apply external CSS coding:
<html>
<head>
<title>CJ’s Fun CSS Tutorial</title>
<link type=”text/css” rel=”stylesheet” href=”styles.css”>
</head>
<body>
<p class=”pageCopy”> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
</body>
</html>
As you may have already observed, the HTML document does not mention the .pageCopy class or other formatting. The reason is because it is all contained in the external file, “styles.css.” Create a CSS file by opening a text editor of any kind then save it with a .css extesion. Let us refer to the file as “styles.css” in this tutorial.
The “styles.css” document should appear like this:
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
Think about what an external CSS file enables us to do. We can format a thousand pages using only a single style sheet. If ever we decide to switch to Verdana font, for example, and turn it to boldface, all it takes is opening the “styles.css” file and put our edits there. The formatting will automatically be applied to every single web page on the website.
In addition, the web pages are easily downloadable because the CSS document is cached on the user’s computer the first time he or she came across the website. Starting from there, the web browser renders the CSS file from that user’s own machine and not on the web browser. Better code, greater flexibility, and quicker downloading – what more could you ask for from CSS?
Aside from formatting, what other functions can CSS perform?
I deliberately used text formatting as an example for this article because it is the easiest way to grasp CSS. However, CSS is far from basic. It can style entire pages, brushing aside the need for
(1 votes, average: 4 out of 5)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply