skip to content
.
logo picture logo text

Incorporating CSS

External CSS stylesheet | Internal CSS stylesheet | Inline CSS styling

External Style Sheets:

Most people use external style sheets because they can change the CSS in one page (the stylesheet - .css file) and change the style on all the HTML pages.

The index.html file

The templates from freecsstemplates.org come with an external style sheet as well as an HTML template. There is a link that's in the HTML template that tells the browser to look in that .css file to find the styles that are supposed to be used. Here's an example of an HTML page that has two links to two different .css files. One is a master file to counteract problems with different browsers. The other .css file (default.css) is the external file that came with the free css template:

linking to css file

Notice, there are no CSS style tags in the head section when you link to an external .css file.

The default.css or style.css file

This is what the beginning of the external file looks like. Notice, there still are no CSS style tags used. The comments at the beginning give credit to Free CSS Templates for the use of the template.
external css file

Internal Stylesheets:

I use internal CSS if I'm writing a one page HTML project. Some people might use internal stylesheets if they web site is very small. However, anytime you want to change anything in the css, you have to change it on every HTML page.

This is an example of nternal CSS. The CSS is written in between Style tags in the head of the document:

internal css

Any of you that was around in the old days when we "jazzed up" our profile pages in the history section will recognize the style tags:

The beginning style tag:   <style type="text/css">

The ending style tag:    </style>

The stylings themselves are not written differently. The following stylings for the body could be put in an internal style sheet or an external style sheet either one:

body {
margin: 20px 0;
padding: 0;
background: #FFFFFF url(images/img1.gif);
font: normal small Arial, Helvetica, sans-serif;
color: #666666;

Just remember:

Use style tags if you put the CSS in the head section of the document.

Do not use style tags if you link to an external css file from the head section of the document

Inline Stylings:

Generally, you don't use inline styles for styling web pages. If you are creating a web site, you would only use inline CSS for a very few things, if anything at all.

However, some forum sites, such as Eons, allow css in message posts. You can style various elements, such as divs, paragraphs, spans, hr, etc. by adding style="" after the name of the element. Put the stylings in between the quotation marks. Example:

<div style="font: normal small Arial, Helvetica, 
sans-serif; color: #000099;"> This div is only
styling the text. You could put the same thing in a paragraph or a span</div>

We play with snippets of code in The Studio because:

  1. It's fun. 
  2. We can't change the CSS external files for our profile pages, but we can add some style with CSS or HTML
  3. We learn about styling with CSS
  4. And it's fun

Related Tutorials or Help Files:

Create a Web Page with Pomodora Template
Creating a Web Page with the Connections Template