Tutorials - CSS - Internal, External and Inline

Now that we've seen an example of how Cascading Style Sheets are created, we are going to look at the three different ways you can load style sheets to apply to your page elements. The first method is "internal" loading, where you place the content of the style sheet between the <head> and </head> tags in your HTML page, by placing the CSS code in a <style> element:

<html>
    <head>
        <style type="text/css">
           <!-- Your CSS goes here -->
        </style>
        <!-- Other <head> code -->
    </head>
</html>

External loading is very similar to internal loading, but you place your CSS in a separate file. Create a file in the root directory of your website, with the name 'test.css' which contains your CSS code. To load this file, use the <link> element:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test/css" />
        <!-- Other <head> code -->
    </head>
</html>

External CSS loading can be very useful when you want to have one style sheet which contains all of the styles for your website. Instead of the full style sheet being downloaded every time a user loads downloads a page, the browser will be able to cache the style sheet. It also saves you a huge amount of space in your documents, letting you make changes much quicker.

The final way to load CSS is inline loading. This uses the style="" attribute in the HTML tag itself - and is given higher priority than the elements in your internal or external style sheets - meaning that it can be used to override pre-defined properties for single elements. Thorough our tutorials we'll be demonstrating most of the attributes using inline styles because we will be overriding the styles which have been set out in our own style sheet. Here's an example of inline styles:

<htmltag style="cssproperty: value; cssproperty: value;">Content</htmltag>

As you can see, we are still using the "selector { property: value; }" triplet we described earlier, however the selector is being defined by the tag we are using the style attribute within.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.