SfC Home > Web Design > CSS >
Placement of Cascading Style Sheet (CSS) Rules
by Ron Kurtus (revised 11 May 2017)
You can place your Cascading Style Sheet (CSS) rules internal to a web page or as an external file.
Internal styles can be either inline or embedded. Inline styles only apply to the given element or line of HTML code. Embedding styles are placed within the <head> section of a page and apply to the whole web page. External style sheets can apply to any web page that links to that file.
Separate style sheets—both external and internal—can be targeted to one or more output media. External style sheets can be specified as alternative, which means that they’re not applied by default, but can be enabled by users in browsers that support alternative style sheets.
The preferred way to style a page is to refer to an external CSS file. Using one or more external style sheets is generally considered to be the best practice, as it enforces the desirable separation between content and presentation.
Questions you may have include:
- How are inline styles used?
- How are embedded styles used?
- How are external styles used?
This lesson will answer those questions.
Inline styles
An inline CSS style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. This style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue; margin-left:20px;">This is a paragraph.</p>
Since the definition of this style is closest to the content of the page, it takes precedence over other defined styles.
Embedded styles
Embedded styles are placed within the <head> section of your web page. Embedded styles are defined using the <style> tag, like this:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style></head>
Embedded styles only apply to the specific page. If those styles apply to many web pages, it is often better to put the code in an external style sheet. However, embedded styles can be used for testing purposes.
External style sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The external style sheet lists all the styles to be used in your website.
Summary
Internal styles can be inline or embedded. Inline styles only apply to the given element or line of HTML code. Embedding styles are placed within the <head> section of a page and apply to the whole web page.
External style sheets can apply to any web page that links to that file. The preferred way to style a page is to refer to an external CSS file.
Always do your best
Resources and references
Websites
Linking CSS to a Web Document - Sitepoint reference
Books
Top-rated books on Website Design
Questions and comments
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.
Share this page
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
Students and researchers
The Web address of this page is:
www.school-for-champions.com/web/
css_rules_placement.htm
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
Placement of Cascading Style Sheet (CSS) Rules