Take the FXDepot Quiz! Inserting CSS Externally - Tutorial 2 | FXDepot Productions

Our Pages

Sunday, May 15, 2011

Inserting CSS Externally - Tutorial 2

Posted on 7:17 AM by Ram Sidh

This article is the second part in the CSS Tutorial Series. To go to the first part of this series please click here.

In the previous part of this series, we learned how to write CSS and how to integrate it into the HTML document we were writing. I explained the internal style sheet option, and a explained on how to create inline styles specific to each tag. Creating an external style sheet is not that difficult, and here is an example on how it is done:

First, we write our CSS document without the HTML in a good source code editor, I would recommend Notepad++, which you can download by going to the Notepad++ website.

So here, I've written a simple CSS document. You'll find the explanation below the image:

Here I have added CSS as a separate document and saved it with a  ".css" extension
The image you see above may not be clear, so please click it to enlarge it and view it and try to understand the code written there. Here I have assigned all text within the <p> tags to be underlined, capitalized, blue in color, 32 pixels large, written in the Times New Roman font and should be aligned in the center of the page.

Then I have added that all text within the <h1> tags should be aligned to the left of the page, should be in the color black, should be 45 pixels large and must have a line over the text. Here is how it looks like in a browser:


So, how do we integrate this external style sheet into the HTML code we are writing?

It is simple, and we use the <link> tag to accomplish this.

Here is how the strip of code will look like:

<html>
<head>
<link rel="StyleSheet" href="style.css" type="text/css">
</head>
<body>
<p>this is a test website</p>
<h1>this is a test heading</h1>
</body>
</html>

Here we have inserted the <link> tags within the <head> tags. We have added three attributes:
  1. "rel" attribute
  2. "href" attribute
  3. "type" attribute
When we insert the "rel" attribute, we give the value of "StyleSheet", specifying that we are linking the HTML document to a Style Sheet. Then we use the "href" attribute to specify the actual location of the CSS file on the computer. I saved the CSS document that is shown at the beginning of this article as "style.css", so I inserted that name into the "href" attribute. Those who are familiar with HTML will be able to understand this concept. Then we used the "type" attribute to specify the type of document we have linked the HTML document. In this case, it is in plain text, and is written in the CSS language. 

So I hope you understood how to link CSS documents to any HTML document. These kinds of CSS documents are known as external style sheets. 

Designing & Styling Text using CSS

We can design text in several ways. Here are some of the popular ways used in CSS:

  1. Styling using "text-decoration" property
You can style text by using the "text-decoration" property and by adding its different values which are:
"underline", "overline", "line-through", "blink".

Here is an example of the code in CSS:

p {text-decoration:underline;}

    2.  Styling using "text-transform" property

You can style text using the "text-transform" property which literally transforms the text into the desired alteration. You can add different values like: "capitalize", "uppercase", "lowercase".

There are many ways of styling text using CSS, and you can find more information on it in the previous article!

Thank you for visiting us here!



No Response to "Inserting CSS Externally - Tutorial 2"

Leave A Reply

Subscribe to: Post Comments (Atom)