3 Replies Latest reply on Dec 6, 2010 9:50 AM by MurraySummers

    New CSS Rule + Compound

    Teresa Hurtig Level 1

      I have set up my page properties for a new page with the "a" tags being font size of small and font choices of Times New Roman, etc.

      But part of this assignment asks me to do the following:  "The following link attributes should be created by selecting the Compound option from the New CSS Style Screen and then choosing the desired link variation".  Since a compound rule can affect two or more tags, classes, or ID simultaneously, how do I set this up in the New CSS Rule dialog box?  For Selector Type:  I choose Compound, but for Selector Name: what do I choose?  I need to add some styles to a: active, a:visited and a:hover.  Do I put all three of them in the Selector Name box or just one at a time (which doesn't make sense because this is a compount rule).  a:active has to have a color of #a56b00, a:visited has a color of #003900 and a:hover has a color of Maroon oblique and bolder.

       

      Teresa

        • 1. Re: New CSS Rule + Compound
          Nancy OShea Adobe Community Professional & MVP

          CSS Pseudo-classes - Link States

          ----------------------------------------------

          You need to define a set of link states (link, visited, hover, active, focus) for each ID or class name required. Let's say you want to have red links in your #header and white links in your #footer.  You could set up your styles like so:

           

          CSS:

           

          #header a {text-decoration:none}
          #header a:link {color:red}     /**unvisited**/
          #header a:visited {color:gray} /**visited**/
          #header a:hover,               /**on mouse over**/
          #header a:active,              /**on click**/
          #header a:focus                /**on tab key**/
              {text-decoration:underline}

           


          #footer a {text-decoration:none}
          #footer a:link {color:white}
          #footer a:visited {color:yellow}
          #footer a:hover,
          #footer a:active,
          #footer a:focus 
              {text-decoration:underline}

           

          HTML will look like this:

           

          <div id="header">
          <a href="some-link.html">Link in the header</a> |
          <a href="some-link.html">Link in the header</a> |
          <a href="some-link.html">Link in the header</a> |
          </div>

           

          <div  id="footer">
          <a href="some-link.html">Footer link</a> |
          <a href="some-link.html">Footer link</a> |
          <a href="some-link.html">Footer link</a> |
          </div>

           

          For more on CSS pseudo classes:
          http://www.w3schools.com/css/css_pseudo_classes.asp

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb

          1 person found this helpful
          • 2. Re: New CSS Rule + Compound
            Teresa Hurtig Level 1

            Nancy,

             

            Thanks for your reply.  However, I was looking for some information on how to use the Dreamweaver app, not how to code.  While your

            answer probably works, for a "newbie", I wanted something like this:   Choose New from the CSS Styles Panel menu to create a new rule.  When the dialog box opens up, choose Selector Type of "Compound (based on your selection)".  In Selector Name, click to open the drop down menu and select a:link, select

            how you want to save this new rule and click OK. In the CSS Rule Definition dialog box, make your changes to a:link under Category: Type.  Do the same thing for a:hover and a: visited.

             

            I found these instructions in a book called Adobe Creative Suite 4 Design Premium Digital Classroom.

             

            Teresa

            • 3. Re: New CSS Rule + Compound
              MurraySummers Level 8

              Nancy shows you how to enter the selector names for the compound selector definition.  Just read it again, and use those selectors that she shows in the CSS dialog within DW.