Where To Specify Your CSS Styles

CSS styles are used to control the layout and visual appearance of your website, but once you have learned how to apply CSS to HTML, where do you specify your CSS styles?

There are three methods for specifying CSS styles: an External Stylesheet, an Internal Stylesheet in the head section of your html file, or using an Inline Style.

Reference an External Stylesheet from Your Head Section

An external stylesheet is a separate .css file which you reference from your html page. It facilitates style management because it means all your styles are kept in one place.

Here's an example template for a new CSS stylesheet file.

Using a text editor like Notepad or similar, copy the template and save it as a CSS file, e.g. custom.css. You can add all the custom CSS styles you need to this file.

You then need to reference the CSS stylesheet from your html page.

This technique allows you to specify site-wide styles, as all the site's pages can be linked to the same stylesheet file.

Import an Additional CSS File from Within your External Stylesheet

Your external stylesheet can contain calls to any number of additional style sheets by using the import statement. This allows your website to make use of multiple stylesheets.

can also pull in additional stylesheets for your web site to use by using the import statement in your external style sheet.

@import "more-styles.css";

Your imports must appear before everything else in the stylesheet to work properly.

Add an Internal Style Sheet using the <style> Tag in the Head Section of the HTML Page

You can create an Internal Style Sheet on your page by adding a <style> section to the <head> section of the page. You add the styles into this <style> section just as you would add them into an external style sheet.

This is suitable for adding styles to a specific page, at a page level.

/* Define styles here */

h1 {
    font-size: 2em;
    color: #00ABED;
    padding-top: 6px;
}

</style>
</head>

Add an Inline Style to an HTML Tag

You can add a style directly to a particular HTML tag by using an inline style. Here the style information is added within the HTML tag, for example:

<h1 style="font-size: 2em; color: #00ABED; padding-top: 6px;">How To Use an Inline Style</h1>

Useful Links

Using the CSS @import Rule by CSS Newbie

Visit LowPrices.co.uk for Your UK Shopping

Compare Prices
at LowPrices.co.uk