The term CSS stands for cascading style sheet, which is a file that lets web designers separate a site’s HTML content from its style. Designers utilize HTML to assemble content, but it is CSS that controls the fonts, colors, backgrounds, borders, and formatting of that content. In a word, HTML governs the words on a webpage, but CSS controls its presentation to the world.
Designers can use CSS internally, externally, or inline. If it is used internally, the designer places the CSS code inside of the tags of each HTML file that will be effected by the CSS. Here is an example of internal CSS:
<style type="text/css">
CSS Content
</style>
External CSS is a bit more complicated. Designers create external CSS files with editors such as Notepad and Dreamweaver, and when completed as such contain absolutely no HTML code whatsoever. Creators save these files with the .css file extension and link to them on the exterior by placing specific links in the head section of the HTML file that the CSS will affect. There are multiple links used for this method, as illustrated below:
<link rel="stylesheet" type="text/css" href=" /path/to/saved/stylesheet.css">
Or, the "@import method":
@import url(Path to Saved Style Sheet)
Here is an example of actual implementation:
<link rel="stylesheet" type="text/css" href="style.css">
Although this method of using external CSS looks more complicated than the internal method, once users get familiarized with the pattern it is actually more popular. Designers who use the external method have all of their HTML files linking to one single CSS file affecting them. This comes in handy, especially if a designer wants to change one item on all of his or her pages; they only need to change the single CSS file in order to make the change affective on all linked pages. This allows easier maintenance, smaller file and bandwidth size, along with enhanced flexibility.
Inlining styles is a bit contradictory to the other two utilization methods because the author uses the CSS formatting directly in the HTML file it will act upon and prohibits the author from altering styles or texts. For instance, if the author wants to make a certain line of text red, the code would appear:
<p style="color:red">Some red text</p>
At this point, the natural question is which of the three methods is better. The answer is not straightforward, as it truly depends on what the designer is attempting to accomplish because designers use all three methods when creating their pages. Authors who want a single file influenced by a specific CSS will find that the internal method is suitable. For example, on a small business website perhaps the author wants a different background color than the rest of the pages; he or she would use the internal method for this. Authors who want multiple HTML files influenced by the same CSS file will use external linking. In keeping with the small business website example, the method used to write the CSS for the background colors of the remaining four pages would be external because one change to the code would immediately take effect on all four pages linked instantly, cutting down on time and effort on the author’s part. As to choosing an external linking method—link related or @import—it is really up to the author’s preference and comfort level. Moreover, the website creator could use the inline method to influence specific lines of text within specific pages of the site; for instance, placing the name of the company on the homepage in italics.
CSS is an important part of designing and creating alluring and engaging web pages. Becoming familiar with all three methods of implementing CSS files into HTML pages is the best way to guarantee each method’s ease of use and the continuation of building page-designing skills.
