- Web Design Tutorials, Tips, Top Resources

Converting Existing Content to CSS, Step 2

CSS Style Blocks

by Shirley E. Kaiser, M.A., SKDesigns

Copyright © 2001-2021, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at with permission.

For Step 2 of this tutorial we'll set up a style block within the sample Web page using the style element between the head element tags of the document. This will define the styles for your sample page. Later in this tutorial are instructions for using an external style sheet, too.

To add a style block to your Web page, you'll use the style element tags placed between the head element tags of your Web page, as highlighted below:


<style type="text/css">



Your markup should now look like this (the new style block markup is shown in bold and the color red:

Markup with style block added. (A separate window will open.)

Now we're ready to start adding elements to your style block.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with 

Our Other Sites


Effective, accessible, standards-based Web site design since 1996

SKDesigns -

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves

Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation