CSS Generator



Once you've created the code you put that code into a webpage and name it
whatever.css then add the code below in between the head tags
on the page you want to use the code. Don't add the * in the code
since I use that so it will show up here for you to see. Remove the *
<*link rel="STYLESHEET" type="text/css" href="whatever.css">

Step 1

Create your Body Style


Choose a background color for your webpage.

 

Use a graphic for your webpage background.
(ie: "myimage.jpg" )

 

 

Choose the font type, color and size for the text on your webpage.

 

 
Use a background image?
Enter image file name
Choose a font type
Choose a font color
Choose a font size

Step 2

Create your Link Styles



Choose the font type and text color for your webpage links.

 

Choose the text color for your link mouseover.
note: IE4+ and NS6 only


Choose the font size and bold text for your webpage links.

 

Underline all links or underline only on mouseover.
note: IE4+ and NS6 only


Choose text color background on mouseover. Be sure to use a contrasting mouseover text color if using this option
note: IE4+ only
Pick a font type
Pick a link color
Pick a mouseover text link color
Pick a font size
Bold link font?
 No  Yes
Underline Link?
 No  Yes
Underline link on mouseover?
 No  Yes
Color background on mouseover?
 No  Yes
Pick a mouseover background color

Step 3

Choose your Page Header Styles



Choose font type and text color for your <H1> header.

 


 



Choose font type and text color for your <H2> header.

 


 



Choose font type and text color for your <H3> header.
Pick a font type
Pick a header <H1> color
Header alignment
 Left    Center    right
Pick a font type
Pick a header <H2> color
Header alignment
 Left    Center    right
Pick a font type
Pick a header <H3> color
Header alignment
 Left    Center    right

Step 4

Choose your Text Positioning Styles




Choose font type and text color size and position for your <p> paragraphs

 

 

 

 

 

 

Choose font type and text color size and position for your <blockquote> blockquotes
Pick a font type
Choose text <p> color
Pick a font size
Text alignment
 Left    Right    Justify
Add margin?
 pixels
Pick a font type
Choose text <blockquote> color
Pick a font size
Text alignment
 Left    Right    Justify

You are now ready to generate your Cascading Style Sheet

     

Back to Top