SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS Forms

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Brampton, Ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Forms

    wassup guys,

    I'm new to css, so bare bare with me here:

    I noticed the forms on this website: www.hnc.com looks a little different from the standard html forms I usually see... so I'm assuming it's css...

    I was wondering how do I go about doing this??? a simple example of the code would be nice, so I can get a general I dea of this.... also, where do I place the code, in the head tags, or anywhere within the body...

    thanks a mil...

    peace.

  2. #2
    SitePoint Enthusiast ptolemy's Avatar
    Join Date
    Feb 2002
    Location
    Geneva, Switzerland
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea is to have a seperate file or embedded code within the <HEAD> portion of your HTML file. To embed a CSS file, my method of choice, insert the following code in your <HEAD>:

    Code:
    <link rel="stylesheet" type="text/css" href="locationofcssfile.css" />
    To make give an element on your page the appearance defined by a CSS class, simply enter the class attribute in any HTML tag.

    For example, if you had in you CSS file:

    Code:
    ...
    span.header {
      font-family: arial;
      color: #ff0000;
    }
    ...
    you would give an element these attributes like this:

    Code:
    <span class="header">Text goes here</span>
    Got it?

    i've taken the time to get the stylesheet from the site you mentionned. You may find it quite interesting . The part that deals with changing the appearance of form elements has been highlited in red.

    Enjoy

    Code:
    /* ##### */
    /* #####  UNIVERSAL CSS CLASSES - These style specs are used in multiple elements. ### */
    /* ##### */
    
    /* U=Universal */
    .Ubody				{
    					 background-color: #FFFFFF;
    					 scrollbar-arrow-color: #FFFFFF;
    					 scrollbar-base-color: #FFFFFF;
    					 scrollbar-shadow-color: #003C6A;
    					 scrollbar-face-color: #679FCC;
    					 scrollbar-highlight-color: #003C6A;
    					 scrollbar-darkshadow-color: #CCCCCC;
    					 scrollbar-3dlight-color: #FFFFFF; 
    					}
    .Utxt				{color:#003C6A; font-size:70%; font-family:arial; line-height:14px;}
    .Utxt a				{color:#003C6A; font-weight: bold}
    .Utxt a:visited		{color:#003C6A; font-weight: bold}
    .Utxt a:hover		{color:#E50009; font-weight: bold}
    .UtxtBld			{color:#003C6A; font-size:70%; font-family:arial; line-height:14px; font-weight: bold}
    .Utxtwht			{color:#FFFFFF; font-size:70%; font-family:arial; line-height:14px;}
    .Utxtwht a				{color:#FFFFFF; font-weight: bold}
    .Utxtwht a:visited		{color:#FFFFFF; font-weight: bold}
    .Utxtwht a:hover		{color:#E50009; font-weight: bold}
    .Uhdr				{color:#FFFFFF; font-size:70%; font-family:Geneva, Arial, Helvetica, san-serif; text-transform: uppercase; font-weight: bold}
    .Utxt2				{color:#003C6A; font-size:60%; font-family:arial; line-height:14px;}
    .Uinput				{
    					 BORDER: #003C6A 1px solid;
    					 BACKGROUND-COLOR: white;
    					 FONT-FAMILY: Arial;
    					 FONT-SIZE: 60%;    
    					 COLOR: #003C6A;   
    					 TEXT-DECORATION: none
    					}
    /* UB=Universal Body */
    .UBtxt					{color:#003C6A; font-size:70%; font-family:arial; line-height:12px;}
    .UBtxt a				{color:#003C6A;}
    .UBtxt a:visited	    {color:#003C6A;}
    .UBtxt a:hover			{color:#E50009;}
    .UBhdr					{color:#003C6A; font-size:70%; font-family:arial; line-height:14px;}
    .UBhdr a				{color:#003C6A}
    .UBhdr a:visited		{color:#003C6A;}
    .UBhdr a:hover			{color:#E50009;}
    
    
    /* ##### */
    /* #####  ELEMENT CSS CLASSES - These style specs are specific to their corresponding elements. ### */
    /* ##### */
    
    /* ele_Contact (CT=Contact) */
    .CThdr					{color:#FFFFFF; font-size:70%; font-family:arial; line-height:14px;}
    .CTtxt					{color:#003C6A; font-size:70%; font-family:arial; line-height:14px;}
    .CTtxt a				{color:#003C6A;}
    .CTtxt a:visited	    {color:#003C6A}
    .CTtxt a:hover			{color:#E50009;}
    
    /* ele_Innovation (IN=Innovation) */
    .INtxt					{color:#003C6A; font-size:60%; font-family:arial; line-height:14px;}
    .INtxt2					{color:#FFFFFF; font-size:70%; font-family:arial; line-height:14px;}
    .INtxt a				{color:#003C6A}
    .INtxt a:visited	    {color:#003C6A;}
    .INtxt a:hover			{color:#E50009;}
    
    
    /* ele_InputForm (IF=Input Form) */
    .IFhdr					{color:#FFFFFF; font-size:70%; font-family:arial; line-height:12px;}
    .IFtxt					{color:#003C6A; font-size:60%; font-family:arial; line-height:12px;}
    .IFhdr2					{color:#FFFFFF; font-size:60%; font-family:arial; line-height:12px;}
    
    
    .UCol                   {color:#003C6A; font-size:60%; font-family:Arial, Helvetica, sans-serif; line-height:14px;}

    - ptolemy
    Last edited by ptolemy; Jul 4, 2002 at 08:45.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Brampton, Ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking wow

    Thanks so much for all your help...

    I really appreciate it

    I'll display my finished project, so you guys can see how all your input helped me out.

    -- RONIN


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •