List of Topics

SfC Home > Web Design > CSS >

 

Placement of Cascading Style Sheet (CSS) Rules

by Ron Kurtus (6 May 2014)

You can place your Cascading Style Sheet (CSS) rules or code internal to a web page or as an external file.

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.

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:

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. The 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>

Since embedded styles only apply to the specific page and have to be included in each page you use, it is often better to put the code in an external style sheet. 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

Ron Kurtus' Credentials

Websites

Linking CSS to a Web Document - Sitepoint reference

Web Design Resources

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

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.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Placement of Cascading Style Sheet (CSS) Rules




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.