5 Replies Latest reply on Apr 7, 2012 2:14 PM by Nancy O.

    How do you change the font style & font colour?

    jinda55 Level 1

      Hi this is my website --> http://www.jinda.byethost32.com/

       

      As part of my college work I have to make a website based on a scenario.

       

      I was wondering how I would change the font style and font colour of the form on the left handside ONLY (form is located where it says "create a trip")

        • 1. Re: How do you change the font style & font colour?
          John Waller Adobe Community Professional & MVP

          By styling it with Cascading Style Sheets (CSS).

           

          Are you familiar with CSS?

          • 2. Re: How do you change the font style & font colour?
            jinda55 Level 1

            This is my style sheet code

             

             

            /* Reset Styles
            ***********************/
            html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
                      margin: 0;
                      padding: 0;
                      border: 0;
                      font-size: 100%;
                      font: inherit;
                      vertical-align: baseline;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
            body {line-height: 1;}
            ol, ul {list-style: none;}
            blockquote, q {quotes: none;}
            blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
            table {border-collapse: collapse; border-spacing: 0;}
            strong {font-weight: bold;}
            em {font-style: italic;}
            
            
            body {background: url(body.png) repeat left top; font-family: 'Georgia', 'Arial', sans-serif;}
            #container {width: 80%; max-width: 800px; margin: 0 auto;}
            
            
            h2 {padding: 20px 0 30px; font-size: 18px; line-height: 22px; font-style: italic;}
            h2 a {text-decoration: none; color: #427f9e;}
            h2 a:hover {border-bottom: 1px dotted #427f9e;}
            
            
            • 3. Re: How do you change the font style & font colour?
              John Waller Adobe Community Professional & MVP

              Where did you get that from? It's different to the styles on the website linked in your first post.

               

              Are you familiar with CSS and how to tweak it?

              • 4. Re: How do you change the font style & font colour?
                jinda55 Level 1

                A bit, I understand a CSS sheet can be used to choose font style and text of a particular heading

                 

                So you link the heading to the font style and colour, right?

                 

                I was wondering if you could choose to make the CSS sheet at the end and link it?

                 

                As I have already created my website, text is there but I currently don't like the font style and colour so surely its best to do it at the end


                Correct me if I am wrong

                • 5. Re: How do you change the font style & font colour?
                  Nancy O. Adobe Community Professional & MVP

                  Add this to the embedded CSS code in your HTML document.  Adjust values in red as required.

                   

                  form h3 {

                  font-size: 25px;

                  color:#FFF;

                  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

                  }

                   

                  FYI, you have some code errors that deserve attention.

                  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.jinda.byethost32.com%2F

                   

                   

                   

                  ()__()

                  (='.'=)

                  (")_(")

                   

                  Nancy O.

                  Alt-Web Design & Publishing

                  Web | Graphics | Print | Media  Specialists 

                  http://alt-web.com/