Inline Style Sheets

Related:
• Embedded Style Sheets
• External Style Sheets
• CSS Tutorial
• All CSS Properties

Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to. Actually, it's not really a style sheet as such, so a more accurate term would be inline styles.

Example

Normal HTML


<P>
   Using normal HTML (not using inline style sheets).
</p>

Using inline style sheets


<P style="font-size: x-large; color: #ff9900">
   Using inline style sheets - or is that inline styles?
</p>

Try it yourself!

Using inline styles is not as powerful as embedded style sheets, imported style sheets, or linking to an external style sheet. To specify style information for more than one element, you should embed a style sheet in the header of the HTML document. Better yet, you should define styles in an external style sheet, then link to that style sheet. You then can apply the style across mulitple HTML documents.

Enjoy this website?

Add this page to your Favorites

Link to this page (copy/paste into your own website or blog):

Link to Quackit using one of these banner ads.

Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

CSS Tutorial

CSS Codes

CSS Examples

CSS Reference

Inline Style Sheets

Example

Normal HTML

Using inline style sheets

Try it yourself!

Enjoy this website?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING

CSS Home CSS Tutorial Introduction CSS Advantages CSS Syntax Implementing CSS CSS Class CSS ID CSS Font CSS Text CSS Background Code CSS Border CSS Margin CSS Padding CSS Lists CSS Height & Width CSS Positioning CSS Float CSS Layers CSS Summary CSS Codes CSS Align CSS bgcolor CSS Cellpadding CSS Cellspacing CSS Floating Menu CSS Hyperlinks CSS Leading Inline Style Sheets Embedded Style Sheets External Style Sheets CSS Scrollbars CSS Table Width CSS Print Version CSS Table-layout CSS Examples CSS Examples CSS Table-layout Example CSS Reference CSS Mini Tutorial CSS Properties CSS Color Codes CSS Template CSS Media Types
	Inline Style Sheets Related: • Embedded Style Sheets • External Style Sheets • CSS Tutorial • All CSS Properties Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to. Actually, it's not really a style sheet as such, so a more accurate term would be inline styles. Example Normal HTML `<P> Using normal HTML (not using inline style sheets). </p>` Using inline style sheets `<P style="font-size: x-large; color: #ff9900"> Using inline style sheets - or is that inline styles? </p>` Try it yourself! <P style="font-size: x-large; color: #ff9900"> Using inline style sheets - or is that inline styles? </p> Using inline styles is not as powerful as embedded style sheets, imported style sheets, or linking to an external style sheet. To specify style information for more than one element, you should embed a style sheet in the header of the HTML document. Better yet, you should define styles in an external style sheet, then link to that style sheet. You then can apply the style across mulitple HTML documents. Enjoy this website? Share Add this page to your Favorites Link to this page (copy/paste into your own website or blog): <a href="http://www.quackit.com/css/inline_style_sheets.cfm">Inline Style Sheets</a> from Quackit.com Link to Quackit using one of these banner ads. Help support Quackit by making a donation Oh, and thank you for supporting Quackit!