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

    How do you change the font style & font colour?

    jinda55 Community Member

      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 CommunityMVP

          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 Community Member

            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 CommunityMVP

              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 Community Member

                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. CommunityMVP

                  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/