TimKeesling.com
CSS Week 3 Review


  1. Please provide an example of a pseudo-class. When might they be used and when should they be avoided?

    •                     a:link {
                            font-weight: bold;
                            color: #ff0000;
                            background-color: #fff;
                            text-decoration: none;
                          }
    • Example: The code above will give the hyperlink to follow a bold red font with a background color of white. The hyperlink will not have the default underline either. http://www.timkeesling.com NOTE: If this page/link has already been cached by your browser you will see the normal underlined visited link style.


    • The main disadvantage with using pseudo classes is, that they may view differently across multiple browser platforms. You could use these pseudo classes if you know your viewing audience will be using an up to date browser. If you know your main audience is using an older browser you may want to avoid using these pseudo classes due to backward in-compatibility. I have actually tried pulling my 3rd week project assignment up in IE7, IE6, IE5.5 and everything worked well. Incompatabilty issues came along with IE5.1, IE4 and actually crashed the browsers. So I see this as a major issue if one must accomodate older browsers.


  2. Please provide an example of a pseudo-element. When might they be used and when should they be avoided?

    •                     span:before {
                            content: " Example results of the above code! ";
                            color: #000066;
                            font-style: italic;
                            font-weight: bold;
                            text-decoration: underline;
                            background: #fff;
                          }
                          
    •  


    • If you are using Firefox or Safari you should see some text listed above this paragraph, giving you an example of the above pseudo-element.


    • Pseudo Elements are great if you are targeting a certain browser and for print purposes but has limited or no compatibility across different browser platforms. Some of these pseudo elements can only be used on Block-level elements and have a restrictive set of style properties that can be used.