Different ways of accessing a CSS class

03 December, 2009 | Posted by Hardik Shah [Guru] at 3:04 PM | 0 comments | Labels: , , , ,

Share |
CSS(Cascading Style Sheets) in an asset to our web. Apart from being ubiquitous it's also indispensable for enterprise level web projects. No surprises, web designers and developers find themselves facing questions on it when they appear for an interview. Yeah, it's that important !!! If you've still not seen what CSS does then you go [Here]. Quite frankly, CSS 2.0 has evolved very well with a lot of new properties added to it along with new concepts like Pseudo classes, etc. A majority of 21st generation browsers like IE 7, Firefox 2.0, Chrome 2.0(stable), Safari, Opera 8.0 and above have inherent support of CSS 2.0 and some even support v2.1. The only exception to the rule is IE 6 which I don't believe stands in the league but if you still feel otherwise then you seriously need a dose of Mozilla Firefox !!!

I've seen numerous examples of internal and external CSS being explained over forums and across many websites but rarely does any of them explain the different ways by which you can access a CSS class. So I'll explain it here...


Option 1 : You can define a class named after the type of the HTML [container] element

Result : The style will be applied to all the elements of the same type

Example : The DIV and SPAN tags

CODE Snippet :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <style type="text/css">
  6. span
  7. {
  8. font-family: Calibri;
  9. background: Aqua;
  10. text-align: center;
  11. }
  12. </style>
  13. </head>

  15. <body>

  17. <span>Example 1</span>

  19. <br />

  21. <span>All SPAN tags will have the same attributes</span>

  23. </body>
  24. </html>



Option 2 : You can define a class using an identifier prefixed with a '.' operator. Do not include spaces in the identifier and keep it unique. You can then access it using the 'class' attribute of the element to whom you want to apply this style to.

Result : The style will be applied only to those elements which [reference] this identifier

CODE Snippet :

  1. CSS :

  3. .style1
  4. {
  5. background: Aqua;
  6. text-align: center;
  7. }

  9. HTML :

  11. <span class="style1">This is Example 2</span>



Option 3 : You can define a class using an identifier as above but prefix it with a '#' operator. You can then access it using the 'id' attribute of the element to whom you want to apply this style to.

Result : The style will be applied only to those elements which [has] this identifier

CODE Snippet :

  1. CSS :

  3. #style1
  4. {
  5. background: Aqua;
  6. text-align: center;
  7. }

HTML :

  1. <span id="style1">This is Example 2</span>


Now having learnt the above three methods of accessing a CSS class, its time to apply multiple classes at the same time.

Option 4 : You can define multiple classes with unique identifiers as in Example 2 and then apply the classes to the elements in their 'class' attribute seperated by a space.

CODE Snippet :

  1. CSS :

  3. .style1
  4. {
  5. background: Aqua;
  6. text-align: center;
  7. }

  9. .style2
  10. {
  11. font-family:Calibri;
  12. }

HTML :

  1. <span id="style1 style2">This is Example 2</span>

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)