Simple web design, web development, information technology, & technical communication
Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.
Using basic CSS in Web pages
In a previous article, I answered the question of, "What is Cascading Style Sheets (CSS) and why should you use it?" In this article, I’ll show how to use basic CSS in your Web pages.
Weeding out the dedicated Web nerds from the slackers
Since CSS is interpreted by a Web browser, using it requires no special features from your Web server. Further, there are no downloads or plugins needed. This should eliminate any excuses as to why you’d skip this tutorial.
Different ways to implement CSS
There are 3 different ways to use CSS in your Web pages: inline CSS, embedded CSS, and external CSS. They all provide advantages over plain HTML. As you’ll see in this tutorial, one method is preferred when doing professional Web design.
Inline CSS
Inline CSS is the easiest to grasp. Let’s say you have a paragraph of text. In the archaic days of old school HTML, you might format a paragraph like this:
<p><font face="Arial" color="#000000" size="3">Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</font></p>
Using inline CSS, this same paragraph could be coded like this:
<p style="font-family:Arial; color:#000000; font-size:12px;"> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
CSS offers Web designers more precise control over the look of their pages. With inline CSS, we can specify the exact pixel size of a font. In comparison, <font> tags limit us to numbers (-7,-6,-5,-4-3,-2,-1, 1,2,3,4,5,6… ). These numbers correspond to the font settings in the user’s browser, and thus eliminate the control you have over the final size of a font.
Aside from this small improvement in the control of our font size, we can see that inline CSS does not really reduce the amount of code needed to format text. It just accomplishes a similar result in a different way. This leads us to a slightly better method of CSS implementation…
Embedded CSS
Embedded CSS allows us to separate all formatting from page content. The advantage of this method is that it’s far easier to find and edit text when it’s not surrounded by lots of confusing HTML. Consider our inline CSS example from earlier:
<p style="font-family:Arial; color:#000000; font-size:12px;"> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
By using embedded CSS, we can accomplish the same text formatting with the following:
<p class="pageCopy"> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
In the <head> tag of our HTML document, we would then add the following code:
<style type="text/css">
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
</style>
The full HTML code for this example would be:
<html>
<head>
<title>CJ’s Fun CSS Tutorial</title>
<style type="text/css">
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
</style>
</head>
<body>
<p class="pageCopy"> Boy do I love Saturdays. Nothing like sleeping ‘til 10 and not waking up for work.</p>
</body>
</html>
Embedded CSS cleans up an HTML document quite nicely. Unfortunately, it has one major drawback: scalability. What if we wanted to change the .pageCopy attributes across an entire site? Since each page has a <style> tag with this information, we’d be forced to make the update on each individual page that uses our embedded CSS code. Luckily, there’s one last method of implementing CSS.
External CSS
The full power of CSS comes through the use of external style sheets. In this method, we create a separate CSS file. The CSS file contains all of the style declarations that we’ll be using on our site. Then, even when our site grows to hundreds of pages, we can update the look of certain elements throughout the entire site by editing a single file. The external CSS file is "called" by single line of HTML code.
Using external CSS, we can update our previous example to call an external file:
<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>
You’ve probably noticed that our HTML document contains no mention of the .pageCopy class or any other formatting. That’s because it is all sitting in an external file called "styles.css." To create a CSS file, simply open any text editor and save the file with a ".css" extension. For this tutorial, we’ll call it "styles.css."
Our "styles.css" file should contain the following code:
.pageCopy {
font-family:Arial;
color:#000000;
font-size:12px;
}
Consider what external CSS allows us to do. We can have a thousand Web pages that all use the same style sheet. One day, maybe we decide to change our font to Verdana and make the text bold. All we’d have to do is open "styles.css" and modify the code—one time! Every page in the site would then be updated with the new look. Further, your Web pages will load more quickly. This is because the CSS file is cached on the user’s computer the first time it’s encountered. From that point on, the Web browser reads the CSS file from the user’s local machine instead of your Web server. Better code, more flexibility, and faster download speeds for your users. In CSS great or what?
Is it possible to use all 3 methods of CSS implementation in the same HTML file?
Yes. Throughout this article, you might have been wondering, "what the heck does the ‘Cascading’ in ‘Cascading Style Sheets’ mean?" It refers to "cascading order," or the order in which a browser determines which code to use in the event the same HTML element is formatted differently in different places. The stacking order is as follows:
- Inline CSS (highest priority)
- Embedded CSS
- External CSS (lowest priority)
This means that you can declare the look of your <h1> tag in an external style sheet, but override that code with embedded CSS or inline CSS.
What else can CSS do besides text formatting?
I intentionally used text formatting as the basis for this tutorial since it’s the easiest way to learn CSS. By no means, however, is CSS a basic tool. It can be used to produce entire pages, effectively replacing the need to use <table> tags for Web design. It allows you the option of serving different designs to users on different platforms (for example, with some clever coding you could show Mac users one version of your site and PC users something entirely different). With some advanced usage, CSS also gives you the ability to effectively serve users on desktops, laptops, cell phones, PDAs, and other Web browsing devices with only one version of your site.
Check christopherjason.com for more advanced CSS tutorials. In the meantime, you might like to visit the following websites from additional information on using CSS.
Further Reading
- Introduction to CSS
http://www.w3schools.com/css/css_intro.asp - Things You Can Do With CSS
http://www.w3schools.com/css/css_examples.asp
Add a Comment
You must be logged in to post a comment.
