Web Design: Using External and Internal Style Sheets in CSS

Cascading Style Sheets (CSS) technology allows you to define a set of font styles, which you can use consistently throughout your website. For example, imagine that you’re designing a large website and you want a consistent look for all pages: All headings should be set in Arial Narrow Bold, 18-point (you can use real point sizes in CSS), and a dark red color. All captions should be Verdana Italic, 11-point, and steel blue.

The advantage of CSS is that it saves you time by allowing you to apply consistent settings quickly to all text elements throughout a website. Making a global style change to your website, therefore, is as easy as changing a single line of CSS code.

CSS comes in two flavors: external style sheets and internal style sheets.

External style sheets in web design

For external style sheets, you define a bunch of text styles in one CCS file like mystyles.css. Each style can have a custom name of your choosing like .BigHeadline, .SectionHeadline, and so on, as long as there are no spaces and the name is preceded by a period. A style like this is called a class in CSS terminology. After defining the class with a custom name, you open brackets and include a list of style properties such as font choice, color, and size, as in the following example:

.BigHeadline {     
    font-family: Arial, Helvetica, sans-serif;     
    font-size: 24px;     
    line-height: 30px;     
    font-weight: 800;     
    font-variant: small-caps;     
    color: #900;     
    Letter-spacing: 2px;     
    Text-shadow: 2px 2px 3px #999999; 
    }  
.SectionHeadline {     
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18px;     
    line-height: 22px;     
    font-weight: 600;     
    color: #333;     
    Text-transform: capitalize;
    } 

When using an external style sheet, each of your web pages references this single mystyles.css file for their font styling information. This is accomplished through placing a line of code in each web page that tells it where to find mystyles.css online. Then, any text elements on the web page that are assigned one of your custom style names (such as .BigHeadline) will render as you have coded.

This way, if you ever have the need to make a global font change — say, change the .BigHeadline color from dark red to blue — you make the change once to the class in the mystyles.css CSS file, and all web pages with text that use the BigHeadline style will update instantly.

These are two examples of custom CSS classes defined to govern how headlines and section headlines
These are two examples of custom CSS classes defined to govern how headlines and section headlines should look.

Internal style sheets in web design

Internal style sheets are CSS styles that you define for only one page — not for the whole website. Internal style sheets are convenient for small nuances found only on one page, although it’s not the best practice to use them. If all your CSS codes are scattered across different web pages, it poses a site-maintenance burden: you must dig to find where all the codes reside. It’s better to have all your CSS consolidated together in one easy-access file.

Internal style sheets, if you do decide to use them, are found inside the <head> tag and override external style sheets that the page may also be referencing. The class name and its property values go in the top <head> section of the HTML code, as shown in this example:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Example of internal CSS styles</title> 
<style type="text/css">  
.Headline {       
    font-family: “Arial Narrow Bold”, Arial;      
    font-size: 16pt;      
    font-weight: 800;     
    color: #990033     
    text-transform: capitalize;     
    }  
.Caption {       
    font-family: Verdana, Arial, Helvetica, sans-serif;    
    font-size: 11pt;      
    font-style: italic;      
    color: #333366     
    }  
</style> 
</head> 

In this code, you can see that the .Headline style is Arial Narrow Bold in 16-point. The #990033 number after color is a hexadecimal code that creates a dark red. As you add headings to your web page, you can quickly format them by applying the .Headline style that you defined for the page:

<h1 class=”headline”> Headlines are a cinch to format </h1>
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.