Loading ...
Sorry, an error occurred while loading the content.

Using CSS change for limited entry

Expand Messages
  • Robin Chapple
    I have some text on a blue background where I changed the colour to yellow adjacent to the text with this: A:visited { color:#Yellow;
    Message 1 of 4 , Aug 15 6:48 PM
    • 0 Attachment
      I have some text on a blue background where I changed the colour to
      yellow adjacent to the text with this:

      <style type="text/css">
      A:visited {
      color:#Yellow;
      text-decoration: underline;
      font-weight: Normal;
      }
      </style>

      That changed the link to yellow but all links on the page were
      yellow. How do I limit the effect to the one line of text?

      Many thanks,

      Robin Chapple
    • Ken Robinson
      ... You need to make a class or id that would be in the tag a.yellow_link:visited { color:Yellow; text-decoration: underline; font-weight: Normal;
      Message 2 of 4 , Aug 15 7:00 PM
      • 0 Attachment
        At 09:48 PM 8/15/2011, Robin Chapple wrote:

        >I have some text on a blue background where I changed the colour to
        >yellow adjacent to the text with this:
        >
        ><style type="text/css">
        >A:visited {
        > color:#Yellow;
        > text-decoration: underline;
        > font-weight: Normal;
        > }
        ></style>
        >
        >That changed the link to yellow but all links on the page were
        >yellow. How do I limit the effect to the one line of text?

        You need to make a class or id that would be in the <a> tag

        <style>
        a.yellow_link:visited {
        color:Yellow;
        text-decoration: underline;
        font-weight: Normal;
        }
        </style>

        Then in the body:
        <a class="yellow_link" href="....">text</a>

        Ken
      • Robin Chapple
        ... Thanks and my apology for being inept. I needed the link to be yellow before it had been visited so, I added the class in my CSS file here: A{ font-weight:
        Message 3 of 4 , Aug 15 8:24 PM
        • 0 Attachment
          At 16/08/2011 12:00 PM, you wrote:
          >At 09:48 PM 8/15/2011, Robin Chapple wrote:
          >
          > >I have some text on a blue background where I changed the colour to
          > >yellow adjacent to the text with this:
          > >
          > ><style type="text/css">
          > >A:visited {
          > > color:#Yellow;
          > > text-decoration: underline;
          > > font-weight: Normal;
          > > }
          > ></style>
          > >
          > >That changed the link to yellow but all links on the page were
          > >yellow. How do I limit the effect to the one line of text?
          >
          >You need to make a class or id that would be in the <a> tag
          >
          ><style>
          >a.yellow_link:visited {
          > color:Yellow;
          > text-decoration: underline;
          > font-weight: Normal;
          > }
          ></style>
          >
          >Then in the body:
          ><a class="yellow_link" href="....">text</a>
          >
          >Ken

          Thanks and my apology for being inept. I needed the link to be yellow
          before it had been visited so,

          I added the class in my CSS file here:

          A{ font-weight: bold;
          text-decoration: underline;
          }
          A:link {
          color: #880000;
          text-decoration: underline;
          font-weight: Normal;
          }
          a:yellow_link {
          color:Yellow;
          text-decoration: underline;
          font-weight: Normal;
          }
          A:visited {
          color:#336600;
          text-decoration: underline;
          font-weight: Normal;
          }
          A:hover {
          color:Blue;
          text-decoration: underline;
          font-weight: Bold;
          }
          and made the page entry like this:

          <a class="yellow_link"
          href="http://www.rotary9790.org.au/members/forms/DataChange.asp">click
          here</a>

          but I failed.

          What have I missed?

          Many thanks,

          Robin Chapple
        • Bas van Hoorn
          Hi Robin, -- a:yellow_link {...} I failed. What have I missed? -- You used a colon : between the element name and class name, instead of a period . . To
          Message 4 of 4 , Aug 16 1:40 AM
          • 0 Attachment
            Hi Robin,

            --"a:yellow_link {...}
            I failed. What have I missed?"
            --

            You used a colon ":" between the element name and class name, instead of a
            period "." .

            To define a class, you should always use a period between element and class.

            A colon is used to define so-called pseudo-classes, which are built-in
            modifiers for specific situations (like "hover", "active", "visited" for
            links, "focus" for input fields, or "first-letter" for text paragraphs).
            You cannot define new pseudo-classes.

            The correct CSS in your case would be:
            a {color: #880000; text-decoration: underline; font-weight: normal}
            a . yellow_link {color: yellow; }
            a : visited {color: #336600; }
            a . yellow_link : visited {color: #888800; }
            a : hover {color: blue; font-weight: bold; }
            a . yellow_link : hover {color: yellow; }

            First, you speficy the default style for links, then you do the same, but
            only for links with a "yellow_link" class. Then you do the pseudo-classes
            for both.

            I left out the "a:link" declaration, since this is in effect just another
            way to specify the default link style. If you only need bold type when
            hovering over a link, use the bold in the :hover declaration only.
            (Personally, I don't link links to bolden on mouse-over, since bold text is
            wider than normal text, so hovering over such a link means that the layout
            of the document changes -- you sample page shows that very clearly. It's
            better to change to a brighter color, eg. #880000 (dark red) for normal
            links, and #FF0000 (bright red) for hovering, or change the
            "background-color" style for hovering.)

            Note: In the above example, I've inserted some spaces to make the difference
            between "." and ":" easier to spot. These spaces should /not/ be in the
            actual style declaration!

            BTW, Styles that are the same in normal and yellow links (like
            text-decoration and font-weight) don't need respecifying in the yellow_link
            class declaration; if omitted, they'll take the same value as for normal
            links.

            And keep in mind that the pseudo-classes will override the default class
            values, so in your case the yellow_link class links will still be blue and
            bold when the mouse hovers over them, unless you explicitly set the
            a.yellow_link:hover style. (Hence I did not re-specify the font-weight
            style, since this will be taken from the general a:hover declaration.

            Finally an observation: You intermix capital and undercase selectors for
            your link (sometimes "A", sometimes "a"). This works in most browsers,
            since officially CSS is not case-sensitive. However, XML is not, so for XML
            or XHTML documents, some browsers /do/ differentiate between "A" and "a".
            It is good practice to always use lowercase selectors, except for
            user-classes that use some kind of capitalization (like "a.yellowLink") --
            but in that, erm, case, the case in the CSS should match the case in the
            HTML tags exactly. The same goes for values: don't use "Normal", "Bold", or
            "Blue", but keep it all lowercase: "normal" , "bold", "blue".
          Your message has been successfully submitted and would be delivered to recipients shortly.