How to Create an In-line Style Using Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) instructions are applied to HTML coding in web pages to format style.

One method of applying CSS to web pages is by using in-line style declarations.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• A basic knowledge of HTML coding

1. 
   Example of a basic HTML page

   Create a basic web page. A basic web page includes HTML, HEAD, TITLE, BODY tags. These tags need ending tags. See example in attached image file.

2. 

   Add content to your basic web page. In our example we will be using a paragraph tag to add content. The paragraph tag is used to provide a block of text on a web page. Space is provided between each block of text formatted by paragraph tags.

3. 

   Assign 'red' color to one of the words in the sample paragraph. An in-line style declaration can change the color of text within a document. The SPAN tag is used to provide font formatting attributes from CSS instructions. The SPAN tag has been applied to the word 'example'. Only this text will appear 'red' in color. The SPAN tag also has an ending tag.

Tips & Warnings

• Other in-line style font declarations also include font-size, font-weight, font-style, and text-decoration. To find out about these and other aspects of CSS styling, review tutorials provided through http://www.w3.org/Style/CSS/.
• Using CSS is a powerful method to transform the appearance of text and objects on web pages. Web page display may vary depending on which web browser is used to display the results of CSS instructions.
• This document only provides information regarding one aspect of CSS using a specific example. Begin experimenting with different CSS instructions by using examples provided by tutorials.
• In-line styles should be used sparingly since the use of them defeats one of the major benefits of using CSS; an ability to control style across many web pages.
• Using in-line styles is good in circumstances where a web page designer needs to test the result of particular CSS style instructions. When testing is complete, in-line styles should be transformed into embedded or external styles.

[SunnyStars]

on 2/6/2009 Great article, Thank you! 5*Stars!