CSS Tips

Discussion in 'CSS' started by pabin2009, Sep 3, 2009.

  1. #1
    What is class?

    Class is a group of 1) instances of the same element to which an unique style can be attached or 2) instances of different elements to which the same style can be attached.

    1) The rule P {color: red} will display red text in all paragraphs. By classifying the selector P different style can be attached to each class allowing the display of some paragraphs in one style and some other paragraphs in another style.

    2) A class can also be specified without associating a specific element to it and then attached to any element which is to be styled in accordance with it's declaration. All elements to which a specific class is attached will have the same style.

    To classify an element add a period to the selector followed by an unique name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters). (Note: text between /* and */ are my comments).

    CSS
    P.name1 {color: red} /* one class of P selector */
    P.name2 {color: blue} /* another class of P selector */
    .name3 {color: green} /* can be attached to any element */

    HTML
    <P class=name1>This paragraph will be red</P>
    <P class=name2>This paragraph will be blue</P>
    <P class=name3>This paragraph will be green</P>
    <LI class=name3>This list item will be green</LI>

    It is a good practice to name classes according to their function than their appearance; e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2 allows attaching more classes, e.g.:

    P.name1.name2.name3 {declaration} <P class="name1 name2 name2">This paragraph has three classes attached</P>


    thank you
     
    pabin2009, Sep 3, 2009 IP
  2. spbx

    spbx Peon

    Messages:
    359
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Good post, this will help a lot of people.

    Thanks!
     
    spbx, Sep 3, 2009 IP
  3. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #3
    The content you posted can be found here.

    Is that your site? :D
     
    ads2help, Sep 3, 2009 IP
  4. shopon

    shopon Member

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    Good post, this will help a lot of people.

    Thanks!
     
    shopon, Sep 4, 2009 IP