Web Analytics Made Easy -
StatCounter CSS <i> color change - CodingForum

Announcement

Collapse
No announcement yet.

CSS <i> color change

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS <i> color change

    <h4 align="center"><a

    href="http://www.creativeskateboardteam.com/brion.php">(MANAGER)

    Brion Draper</a> - <i><a href="videoclips.php">Video Clips</a></i>

    =====================================================

    Im trying to get video clips to change to a different color. I wish for it for be like a Red color and the other stays yellow. Does anyone know how to change a <i> or a <b> to another color?
    Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

  • #2
    I think that the <i> tag is deprecated now. <em> will do the same thing.

    Place in your CSS -

    em { color: #F00 }

    Again, you should use <strong> for bold text.

    strong { color: #F00 }
    markaylward.co.uk

    Comment


    • #3
      Bad advice.

      strong DOES NOT EQUAL bold
      em DOES NOT EQUAL italic

      strong IS EQUAL TO strong emphasis
      em IS EQUAL TO emphasis

      either of those *meanings* could be *visually represented* as bold, italic, both, none, or whatever you want.

      Opposite of Sequitur

      Comment


      • #4
        Originally posted by ]|V|[agnus
        Bad advice.
        not if <i> is depreciated unless its not, im too lazy to check, but i agree with you on strong not equaling bold

        Comment


        • #5
          First, the word is "deprecated."

          Second, even with the correct word in place, your comment makes no sense. You're saying that the advice to use <em /> for italics and <strong /> for bold is not bad advice if <i /> is not deprecated.

          That just makes absolutely no sense.

          If <i /> were not deprecated(but... it is), then it would make sense to use <i /> for italics because that was its intent. However, once <em /> and <strong /> were added to the language, regardless of whether or not <b /> and <i /> were not yet deprecated, they have always meant "emphasis" and "strong emphasis" which is not in any way tied to any particular visual presentation. The browsers default renderings equate to bold and italics because those are simple, common examples of a visual rendering of the ideas of emphasis and strong emphasis.

          But the whole point of <em /> and <strong /> is that they are not tied to a visual rendering. They are semantic. They describe information, not how it is presented. If you emphasize a part of speech, you do not say that you are italicizing your speech. You are emphasizing it.

          It was bad advice.

          Opposite of Sequitur

          Comment


          • #6
            You can use h1 if you are using this as a "page heading". h3 or h4 is often used because h1 is too large, but noone realizes they can set the font size of h1.

            I'm sure you could use h2, h3, or h4 though if this is not a page heading but a subheading. In fact, you can style each html element just like you would do with others.

            html:
            Code:
            <h1><a href="http://www.creativeskateboardteam.com/brion.php">(MANAGER) Brion Draper</a> - <i><a href="videoclips.php">Video Clips</a></i></h1>
            css:
            Code:
            <style type="text/css">
            h1 {
            color: red;
            text-align: center;
            font-size: 1.2em
            }
            
            h1 a {
            color: red
            }
            
            h1 i, h1 i a {
            color: yellow
            }
            </style>
            The em is a special size, setting it 1.2 means that h1 is 20% bigger then normal text. setting it to 120% gives you the same. Off course you could use px values, or pt values: 16px. But take caution for that as IE can't resize that, and that would interfere with accesibility.
            I've set the color for anchors inside it because the color doesn't cascade through.

            If you need any help understanding parts of this code, you can ask here
            CATdude about IE6: "All your box-model are belong to us"

            Comment


            • #7
              Originally posted by mrruben5
              The em is a special size, setting it 1.2 means that h1 is 20% bigger then normal text. setting it to 120% gives you the same.
              That is incorrect. They will be close, but they are not equivalent. See for yourself with the following markup:

              Code:
              <p style="font-size: 150%">TEST</p>
              <p style="font-size: 1.5em">TEST</p>
              I feel that somebody else once gave me a more detailed explanation of why they are not the same, but I cannot recall nor find a source. Proof is in the pudding, though.

              Opposite of Sequitur

              Comment


              • #8
                This is an explanation of em and the pitfalls of using it without care:

                http://www.bigbaer.com/css_tutorials/css_font_size.htm

                BaldEagle

                Comment


                • #9
                  I haven't been able to get it to work, the url is www.creativeskateboardteam.com/index2.php It comes up in Italics but it still does not change color, all I want is the color change, and the links are in the same h4 (i believe is the right one). tag.
                  Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

                  Comment


                  • #10
                    I see no em's or <i>'s in your script?

                    If you mean the strong text in h4, as it's a link, try this -

                    h4 strong a:link {
                    color: #F00
                    }
                    markaylward.co.uk

                    Comment


                    • #11
                      I want the (BRION DRAPER (MANAGER)) to stay the same color, and I want the (video clips and pictures) another color, all of them are links.
                      Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

                      Comment


                      • #12
                        Use a span class. I wanted different effects to highlight certain parts of headlines and text so go with something like this:

                        span.bold {
                        text-weight: bold;
                        text-style: italic;
                        }


                        then in your html say you had <h2>this is some bold text</h2>
                        make that
                        <h2>this is some <span class="bold">bold</span> text</h2>

                        Simple
                        Once I thought I was wrong but I was mistaken.

                        Comment


                        • #13
                          How would the color be changed in Span?
                          Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

                          Comment


                          • #14
                            span.bold {
                            text-weight: bold;
                            text-style: italic;
                            color: #F00;
                            }
                            markaylward.co.uk

                            Comment


                            • #15
                              Ill try that, thank you
                              Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

                              Comment

                              Working...
                              X