How to Create an Embedded 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 embedded style declarations.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• A basic knowledge of HTML coding

1. 
   Basic web page

   Create a basic web page. A basic web page includes HTML, HEAD, TITLE, BODY tags. These tags need ending tags. (Unfortunately, the image for step 1 does not open. Refer to the image in step 2 for information regarding this step)

2. 
   Basic web page with content

   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. 
   Basic web page with STYLE declaration

   Add a STYLE tag set to the HEAD section of your web page. A start and ending tag are required and a text/css type is assigned.

4. 
   style declaration added to STYLE

   Create a class declaration named 'mycolor' which assigns a blue color. A dot is placed in front of the class declaration name to activate the class. A class declaration permits style to be assigned to one or more text element. Assign class names that are meaningful to use but do not use underscores (e.g., my_color).

5. 
   Results page

   Assign the mycolor class to one of the words in the sample paragraph using the SPAN tag. The color change will be applied to the word 'example'. The word 'example' in the RESULTS area would appear to be 'blue' in color.

Tips & Warnings

• 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 'blue' in color. The SPAN tag also has an ending tag.
• Other font style 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/.
• 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.
• Embedded 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. Embedded styles only affect web pages where they are located.
• 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.