8 Replies Latest reply on Feb 5, 2010 10:45 PM by AnohterDWUser

    CSS Question

    AnohterDWUser Level 1

      OK, I have been looking at the CSS tutorial information from w3schools.com, and it led me to a few questions so far; so, instead of specifying a condition for each tag, i.e., the back ground colior, font size, etc., you specify it in one CSS file and link to it to save lines and lines of code making the code cleaner; is this correct?

       

      This leads me to another question, what if I wanted to break free from the CSS file and change one section, i.e., the heading to H5, will the CSS link overwrite my change because it is linked to the CSS file, or will I have the fredom to change at will?

       

      Last question, the original CSS file that I create, it has to eb linked to for it to affect that page right?  So in essence, I may have 6 different CSS files on my site all doing a specific task?

        • 1. Re: CSS Question
          martcol Level 4

          AnohterDWUser wrote:

           

          OK, I have been looking at the CSS tutorial information from w3schools.com, and it led me to a few questions so far; so, instead of specifying a condition for each tag, i.e., the back ground colior, font size, etc., you specify it in one CSS file and link to it to save lines and lines of code making the code cleaner; is this correct?

           

          There are other benefits but yes.  It also helps you to think about your code in a more semantic way and the first idea behind CSS is to separate content (HTML) and style (CSS)

           

          AnohterDWUser wrote:

           

          This leads me to another question, what if I wanted to break free from the CSS file and change one section, i.e., the heading to H5, will the CSS link overwrite my change because it is linked to the CSS file, or will I have the fredom to change at will?

          You need to check out the cascade and specificity.  Also look up the use of selectors and using id and class.  If you give an element an id for example, <h5 id="special">  your can target just that h5 using the id.  Similar things happen with class.  It gets more complex after this but say you had your <h5> inside <div id="special">  you could targe that <h5> using a descendant selector #special h5 {rule:here;}

           

          AnohterDWUser wrote:

           

          Last question, the original CSS file that I create, it has to eb linked to for it to affect that page right?  So in essence, I may have 6 different CSS files on my site all doing a specific task?

          Yes and yes.  You might not need 6 style sheets.  You could but unless your site is really complex...  Sometimes, coders will seperate a style sheet using /* comments */ as headers.  So all the rules for navigation might go under /*navigation*/

           

          I hope that gets you started.   It's a bit more complex than that but not that much - until you start doing crazy things!

           

          Martin

           

          Sorry, but I just going to post this.  I'm being called for my meal.

          • 2. Re: CSS Question
            Rob Hecker2-uhQIgt Level 2

            Normally on a website you want to have visual consistency. You will want all your H1 tags formatted the same way, all your paragraph text formatted the same way, all your images handled consistently. Managing the rules in an external CSS file keeps you from having to make changes in a hundred different places if you decide to change something throughout the site. So you put all your general CSS in an external file, and yes, you can have more than one CSS file attached to a page. For instance, you may have a different set of rules for the three or four different page layouts you use, but also have a set of rules that are consistent everywhere.

             

            For those times when you need to have a rule defined for a particular page, and no other pages, then you can put that in the header of your page. It will have presidence over any rules in an external CSS file. Then, for those very rare instances when you want to provide a CSS definition for just a particular instance, you have the option to create an inline definition.

             

            An inline definition trumps a definition put in the header, both trump external CSS files. But there is more to the "cascade" than that, and you should lean a little more about the rules of the cascade.

             

            As I said in the first paragraph, you can have more than one CSS file attached to  a page, but even though you can, in theory, have six different files, I can't imagine a situation where you would need to go that far. The most I ever use is three: General definitions (mostly text), page layout specs (mostly DIV tags, and the CSS menu definitions.

            • 3. Re: CSS Question
              Nancy OShea Adobe Community Professional & MVP
              instead of specifying a condition for each tag, i.e., the back ground colior, font size, etc., you specify it in one CSS file and link to it to save lines and lines of code making the code cleaner; is this correct?

               

              Yes.  The whole idea is to keep Style (CSS) separate from Content (HTML).  One file styles your site.  When changes are needed, you edit one file instead of tediously editing every line of HTML code.  CSS is faster, more efficient and reduces HTML code.

               

              what if I wanted to break free from the CSS file and change one section.

               

              No need to break free from the CSS. Simply create a custom class in your style sheet.

               

              CSS:

              .custom {

              color: red;

              font-weight: bold

              }

               

              HTML:

              <h5 class="custom">Custom h5 heading</h5>

               

               

              The original CSS file that I create, it has to be linked to for it to affect that page right?  So in essence, I may have 6 different CSS files on my site all doing a specific task?

               

              Right.  But you don't need to use 6 different files.  You can put all your styles into one page. Use comments to remind yourself what the rules are for.

               

              CSS Comments:

              /**Menu**/

               

              /**Text Styles**/

               

              /**Links**/

               

              Also, take advantage of the Cascade.  Rules defined in Parent level elements  such as the body or html will always casdade down to lower level elements.  Done correctly, this saves you coding time and reduces repetition.

               

              Another good CSS Resource:

              http://westciv.com/style_master/house/index.html

               

               

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

              • 4. Re: CSS Question
                AnohterDWUser Level 1

                Hi Nancy, so, when you made this comment;

                 

                No need to break free from the CSS. Simply create a custom class in your style sheet.

                 

                CSS:

                .custom {

                color: red;

                font-weight: bold

                }

                 

                HTML:

                <h5 class="custom">Custom h5 heading</h5>

                 

                would it be easier to just select the individual text instead of remebering what I called the class in the .css file?

                • 5. Re: CSS Question
                  martcol Level 4

                  One of the good things about using a class is that you can use it again and again.

                   

                  If your <h5> element has a patricular style and all <h5> elements are the same then no problem with just targetting the <h5> element.

                   

                  Say you want one <h5> to be red text to warn people?  then you can name your <h5 id="warning">.  Always best to use a name the gives you an idea what the style is about.

                   

                  Now, what if you want lots of warnings on the page?   Some using <h5>, some wiht <p> and some with <li> elements.  In this scenario you add the class to each of those elements.

                   

                  If after that you want to change your mind abuot the color of your warning and use orange instead of red, you only have to change the color in the rule.

                   

                  If you need to see how an element in DW is styled.  You can alt-click it to show the rules that apply to that element.

                   

                  Martin

                  • 6. Re: CSS Question
                    AnohterDWUser Level 1

                    Per your comments;

                     

                    Now, what if you want lots of warnings on the page?   Some using <h5>, some wiht <p> and some with <li> elements.  In this scenario you add the class to each of those elements.

                     

                    Hi, thanks for the reply; can you give me an example of this please?

                    • 7. Re: CSS Question
                      martcol Level 4

                      Say you have a page that is mostly text.  To break the document up you give it sub-headings.  When you put that page in your HTML you might end up with 10 sub-headings.  You will have a series of <p> elements carying the paragraphs and a series of <h4> elements for the sub-headings.  Now let's say that 4 or five headings refer to your favourite football team and they play in an orange strip.  Out of a sense of loyalty for the team you decide that those <h4> subheadings could be the same orange color as your team.  Those <h4> elements can each have a class of <h4 class-"teamStrip">.  You have a class that you can see immediately what it means and you have that expressed several times in your HTML and your rule looks like this:

                       

                      .teamStrip {

                      color: orange;

                      }

                       

                      Now suppose one of your paragraphs of text is praising your favourite player in the team and you want that paragraph to pay homage to him or her by coloring the paragraph text the same orange color.

                       

                      One way to do that would be to give that paragraph that class:

                       

                      <h4 class="teamStrip"">My Favourite Team Player</h4>

                      <p class="teamStrip">A whole paragraph of text about my favourite player ever.  Because of the class it will all be the same color.</p>

                       

                      That's not the whole story but it is the principle.

                       

                      You need to research specificity and the whole class/id thing and the cascade.

                       

                      Martin

                       

                      And the beauty of CSS would be evident here.  If your team comes bottom of the league one year and you change your allegiance, your CSS rule changes to:

                       

                      .teamStrip {

                      color: blue;

                      }

                       

                      All the text styled with that rule will update.

                      • 8. Re: CSS Question
                        martcol Level 4

                        Just one thought here

                         

                        You don't have to have all your styles in the one rule.

                         

                        You could write a rule like this:

                         

                        h1, h2, h3, h4, li, p {


                             padding: 2px;

                             border: solid 1px #cccccc;

                             background-color: #eeeeee;

                        }

                         

                        That puts those styles on all those elements.  But say you wanted your <p> elements to not have the border?

                         

                        p {

                        border:; none;

                        }

                         

                        If you put that element in your style sheet it would need to come after the other rule and it would override the border on the other rule.

                         

                        Martin