7 Replies Latest reply on Nov 28, 2008 7:37 AM by Comp. 792-YeIbLU

    CSS Website Test

    Comp. 792-YeIbLU Level 1
      Here's the site I am trying to fix: http://www3.telus.net/~jessum/#

      Question 1
      Do I create a CSS page first or do I do it after I open a regular HTML page and add "Div" tags and Rules?

      Question 2
      Do I create a "Div" tag for "everything" on my page including my menu and other items?

      Question 3
      Is it true, that if I create a HTML page (not CSS) that I can save the page as a CSS Style by using the "New CSS" button in the "Insert Div Tag" Window?
        • 1. Re: CSS Questions
          Level 7
          > Do I create a CSS page first or do I do it after I open a regular HTML
          > page
          > and add "Div" tags and Rules?

          Doesn't matter.

          > Question 2
          > Do I create a "Div" tag for "everything" on my page including my menu?

          No. You create 'containers' for blocks of content. For example, a page may
          be structured like this -

          * Masthead
          * Top Menu
          * Content
          * Sidebar left
          * Main content
          * Sidebar right
          * Footer
          * Credits

          Each of those *could* be a <div> tag, but it's not necessarily so (for
          example, the Top Menu container could just be a <ul> tag, as it often is).

          In addition, you may want to create a div container for specialty use, for
          example, to hold a thumbnail image and its caption as a unit in a set of
          thumbnails on the page.

          > Is it true, that if I create a HTML page (not CSS) that I can save the
          > page as
          > a CSS Style by using the "New CSS" button in the "Insert Div Tag"
          > Window?

          You seem confused by the difference between HTML and CSS. You cannot save
          an HTML page as a CSS style. You can create an HTML page, and then insert a
          <div> on that page. When you do that, you can elect to create a new CSS
          rule at the same time that will have a selector as you specified during the
          insertion of the <div>. That rule can be a) embedded within the page, or b)
          saved to an external stylesheet.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "Comp. 792" <webforumsuser@macromedia.com> wrote in message
          news:ggkcam$km6$1@forums.macromedia.com...
          > Question 1
          > Do I create a CSS page first or do I do it after I open a regular HTML
          > page
          > and add "Div" tags and Rules?
          >
          > Question 2
          > Do I create a "Div" tag for "everything" on my page including my menu?
          >
          > Question 3
          > Is it true, that if I create a HTML page (not CSS) that I can save the
          > page as
          > a CSS Style by using the "New CSS" button in the "Insert Div Tag"
          > Window? Question 2 Question 2 Text Question
          > 1
          Question 3
          >

          • 2. Re: CSS Questions
            Comp. 792-YeIbLU Level 1
            Thanks Murray. That clears a lot up. I have a few more questions and them I am going to post my results so please bear with me. :)

            Question 1
            When I create a New CSS Rule, under "Selector Type", do I select: (Class, ID , Tag, or Compound) In the tutorial I was reading they always chose "Compound". Where can I find out the differences between them?

            Question 2
            In the CSS Rule Definitions window, when I select a color it sometimes applies the color to the box and sometimes it doesn't apply the color to the box, why is this?

            Question 3
            In the CSS Rule Definitions window, when I select a color or a box size etc., do I choose the
            "Apply" button or the "OK"" button and what is the difference?

            Question 4
            I inserted a "Div" tag on the page and then create a style named ".header". I then deleted the "Div" container from the page but the ".header" style still remained in the CSS Rules. Shouldn't it delete the style named ".header" too?

            Thanks
            • 3. Re: CSS Questions
              Level 7
              > Question 1
              > When I create a New CSS Rule, under "Selector Type", do I select: (Class,
              > ID ,
              > Tag, or Compound) In the tutorial I was reading they always chose
              > "Compound".
              > Where can I find out the differences between them?

              Here's is where you learn what "CSS" means. :) *Cascading* Style Sheets...
              the idea of a cascade has to do with levels of importance and uniqueness.
              They go in this order:

              ID
              class
              tag

              You can only have one instance of an ID on a page, and it takes precedence
              over the lower items in the cascade. Thus, if you specify
              font-family:sans-serif in your body tag, but specify font-family:serif in a
              container with an ID of #bob, that container will have serif fonts. This
              will even be the case if #bob appears in a larger container with the class
              .weave, even though .weave also has font-family:sans-serif specified. ID
              takes precedence over both class and tag.

              You will use an ID for items that only appear once (or to control items that
              will all appear inside that one container - these are descendant selectors).
              Thus:

              #bob {
              font-family:serif;
              }

              but also #bob h2 { font-family:sans-serif; } This is still more specific
              than the simple #bob rule, and will cause your h2s inside #bob to revert to
              sans-serif, even though all the other text in #bob is serif.

              If you have several places on a page that something needs to happen, but not
              universally as far as tags go, then you need to use classes. For instance,
              let's say you want to have two different link styles on your page, but they
              each appear in multiple containers. (Note: If one style only appears in
              #bob, then you don't need a class, you can just style the a (link) tag for
              the other links and use descendant selectors for the links appearing in
              #bob: #bob a, #bob a:visited, #bob a:hover, #bob a:active)

              So anyway, for the sake of simplicity: you've got two boxes with black
              backgrounds and you want white links, while the other links appear on white
              backgrounds and you want black links.

              First, don't name your class according to colour (.blackbg or something) -
              name it semantically (there is some reason you are visually linking those
              two boxes - what is it?). That way, your naming convention will still make
              sense if you change the colours later, and your HTML will actually
              communicate something to boot.

              So we'll say this is a realtor site, and the black boxes are offering
              details about particular houses. The white background boxes appear in a
              couple of other areas of regular content. In that case, I would likely style
              the a tag with the black text (white bg), and create a class for the black
              boxes:

              .housedetail { background-color:#000; }
              .housedetail a { color:#fff; }

              ... and of course further specifications for visited and hover states (and
              if I'm ambitious, active, as well). :)

              So when do you use tags? Either as a default, which can be changed for more
              specific instances (as I've done above), or where you always want that tag
              to behave the same way. For instance, if you always want your paragraph tags
              to have a line-height of 1.4 (quite generous), you would specify:

              p { line-height:1.4; }

              > Question 4
              > I inserted a "Div" tag on the page and then create a style named
              > ".header". I
              > then deleted the "Div" container from the page but the ".header" style
              > still
              > remained in the CSS Rules. Shouldn't it delete the style named ".header"
              > too?

              No, not really, since then if you were planning creating .header somewhere
              else in the page, you would have to recreate all your CSS rules for it,
              which you may not want to do.

              It would be nice to get to the end and hit a button to clean up all unused
              CSS... maybe this function exists in CS4 (which I don't have), but I don't
              think it does in CS3. Murray?
              --
              Tim G.
              http://www.pactumweb.com
              http://www.shortordersite.com


              • 4. Re: CSS Questions
                Level 7
                > It would be nice to get to the end and hit a button to clean up all unused
                > CSS... maybe this function exists in CS4 (which I don't have), but I don't
                > think it does in CS3. Murray?

                Nope. It would be dangerous.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                • 5. CSS Questions
                  Comp. 792-YeIbLU Level 1
                  Thanks Tim for the lengthy response. :)

                  quote:

                  Originally posted by: Newsgroup User
                  > Question 1
                  > When I create a New CSS Rule, under "Selector Type", do I select: (Class, ID , Tag, or Compound) In the tutorial I was reading they always chose "Compound". Where can I find out the differences between them?

                  Here's is where you learn what "CSS" means. :) *Cascading* Style Sheets...
                  the idea of a cascade has to do with levels of importance and uniqueness.
                  They go in this order:

                  ID
                  class
                  tag


                  What about "Compound", what is that used for?



                  quote:

                  First, don't name your class according to colour (.blackbg or something) -
                  name it semantically (there is some reason you are visually linking those
                  two boxes - what is it?). That way, your naming convention will still make
                  sense if you change the colours later, and your HTML will actually
                  communicate something to boot.

                  So we'll say this is a realtor site, and the black boxes are offering
                  details about particular houses. The white background boxes appear in a
                  couple of other areas of regular content. In that case, I would likely style
                  the a tag with the black text (white bg), and create a class for the black
                  boxes:

                  .housedetail { background-color:#000; }
                  .housedetail a { color:#fff; }
                  --
                  Tim G.


                  Fair enough, I was just coloring the boxes so I could visually see them and how they are structured on the page and was planning to remove the color after I added the content to each "Div". This is how they did it in the tutorial and it made sense to me.
                  I am just trying to get to grips with using CSS for the layout for now and will deal with the CSS for the type later. Does this make sense or am I totally out to lunch with this? :)
                  • 6. Re: CSS Questions
                    Level 7
                    > What about "Compound", what is that used for?

                    That's for use with what's usually called a descendent selector, or also
                    with multiple, ganged-up selectors. Here are examples of each:

                    DESCENDENT SELECTOR
                    #content #rightSide .head { color:red; }

                    (find an element with a class of 'head' that is a descendent of a container
                    with an id of 'rightSide' that is also a descendent of a container with an
                    id of 'content')

                    MULTIPLE SELECTOR
                    h1, h2, h3, h4, h5, h6 { font-family: calibri,arial,helvetica, sans-serif; }

                    (each of those type selectors (tags) should be styled with the stated
                    font-family)

                    Like that....

                    When it comes to deciphering selectors, you may find this useful -

                    http://gallery.theopalgroup.com/selectoracle/

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    ==================


                    "Comp. 792" <webforumsuser@macromedia.com> wrote in message
                    news:ggmba9$6ob$1@forums.macromedia.com...
                    > Thanks Tim for the lengthy response. :)
                    >
                    >
                    quote:

                    Originally posted by: Newsgroup User
                    > > Question 1
                    > > When I create a New CSS Rule, under "Selector Type", do I select:
                    > > (Class, ID
                    > , Tag, or Compound) In the tutorial I was reading they always chose
                    > "Compound".
                    > Where can I find out the differences between them?
                    >
                    > Here's is where you learn what "CSS" means. :) *Cascading* Style Sheets...
                    > the idea of a cascade has to do with levels of importance and uniqueness.
                    > They go in this order:
                    >
                    > ID
                    > class
                    > tag
                    >

                    >
                    > What about "Compound", what is that used for?
                    >
                    >
                    quote:

                    First, don't name your class according to colour (.blackbg or
                    > something) -
                    > name it semantically (there is some reason you are visually linking those
                    > two boxes - what is it?). That way, your naming convention will still make
                    > sense if you change the colours later, and your HTML will actually
                    > communicate something to boot.
                    >
                    > So we'll say this is a realtor site, and the black boxes are offering
                    > details about particular houses. The white background boxes appear in a
                    > couple of other areas of regular content. In that case, I would likely
                    > style
                    > the a tag with the black text (white bg), and create a class for the black
                    > boxes:
                    >
                    > .housedetail { background-color:#000; }
                    > .housedetail a { color:#fff; }
                    > --
                    > Tim G.
                    >

                    >
                    > Fair enough, I was just coloring the boxes so I could visually see them
                    > and
                    > how they are structured on the page and was planning to remove the color
                    > after
                    > I added the content to each "Div". This is how they did it in the tutorial
                    > and
                    > it made sense to me.
                    > I am just trying to get to grips with using CSS for the layout for now and
                    > will deal with the CSS for the type later. Does this make sense or am I
                    > totally
                    > out to lunch with this? :)
                    >
                    >
                    >

                    • 7. CSS Website Test
                      Comp. 792-YeIbLU Level 1
                      Thanks