SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Help with CSS

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS

    Hi i was looking at some .css files and there some css lines as follows:

    .a { some css definitions here

    a { some css defs here

    #a { some css defs here

    what do the . # imply? some tips would be useful. thx!

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .a{} relates to Class="a" (e.g. <div class="a"></div>)
    a{} relates to the specific tag <a href> (e.g. div{} would define <div></div>)
    #a{} relates to id="a" (e.g. <div id="a"></div>)

    Any particular id should only be used once per page. If you need to call the same style by multiple objects on a page use class.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the . means a class and the # means an id.

    Lets say you wish to have certain paragraphs italicized or a different color or really any formatting to emphasize a bit more and you can possibly have multiple instances of this type of rule. You will want to use a class where the difference with the ID is that you can only have ONE instance of an ID per page. Most common use for ID's are form fields and I like to ID my divs based on their function such as <div#header><div#body> etc.

    <p class="emphasize">
    This paragraph will be different from normal paragraphs
    </p>
    <p>
    This is a normal paragraph
    </p>
    <p class="emphasize">
    This is another instance of a paragraph displaying differently.
    </p>
    <p id="slogan">
    This is my rifle...this is my gun...blah blah
    </p>

    The css would be

    .emphasize
    {
    color : #ff0;
    font-style : italic;
    }

    #slogan
    {
    font-size : 2.5em;
    color : #f00;
    text-align : center;
    }

    Now the ID slogan can ONLY be used once per page to be valid.

    I hope that makes a bit of sense since it is a short and inadequate explaination of the differences. You can try a google and find more relevant information on the subject.

    HTH,

    Michael

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are great! thanks!

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW is it compulsory to define each (class, id, specific tag) in the .css file? thx again.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I follow you exactly on that question but you have to define your classes and ids within the .css file in order for them to pick up whatever rule or style you wish for them to inherit.

    Michael

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that's why I love these forums... thx for ur help.

  8. #8
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by u2fan
    BTW is it compulsory to define each (class, id, specific tag) in the .css file? thx again.
    NN4 had a habit of crashing if a class wasn't defined, but hardly anybody uses it anymore. You can define the same class, id or tag in multiple stylesheets if you like, just remember that the last stylesheet instruction loaded overrides the previous entries. This is really useful for creating a generic lowest common denominator stylesheet for all media types and then defining specific stylesheets for say screen display or printing.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  9. #9
    SitePoint Addict markchivs's Avatar
    Join Date
    Oct 2004
    Location
    Malvern Hills, UK
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    ....just remember that the last stylesheet instruction loaded overrides the previous entries. This is really useful for creating a generic lowest common denominator stylesheet for all media types and then defining specific stylesheets for say screen display or printing.
    Yeah here's a really really simple example:

    style1.css
    Code:
    h4 {text-align:right;
    color:red;}
    style2.css
    Code:
    h4 {color:blue;}
    In my web page I have links to these stylesheets in the following order:
    Code:
    <link rel='stylesheet' media='screen' type='text/css' href='style1.css'></link>
    <link rel='stylesheet' media='screen' type='text/css' href='style2.css'></link>
    So everything within a <h4> tag on my web page is displayed aligned to the right and blue, because the color:blue in style2.css overrides the color:red in style1.css. However the align-text:right in style1.css has not been altered in any of the cascading styles below it, hence it still displays to the right. Hope that both helps as something to watch out for and also highlights the flexibility of css




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •