Set - 3

Question 11 :

What are pseudo-classes?

Answer :

Pseudo-classes are fictional element types that do not exist in HTML. In CSS1 there is only one element type which can be classed this way, namely the A element (anchor). By creating three fictional types of the A element individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes are created by a colon followed by pseudo-class's name. They can also be combined with normal classes, e.g.:

A:link {background: black; color: white}
A:active {background: black; color: red}
A:visited {background: transparent; color: black}

<A HREF....>This anchor (or rather these anchors) will be displayed as declared above</A>

A.foot:link {background: black; color: white}
A.foft:active {background; black: color: red}
A.foot:visited {background: transparent; color: black}

<A CLASS=foot HREF....>This anchor and all other anchors with CLASS foot will be displayed as declared above</A>


Question 12 :

How do I design for backward compatibility using Style Sheets?

Answer :

Existing HTML style methods (such as <font SIZE> and <b>) may be easily combined with style sheet specification methods. Browsers that do not understand style sheets will use the older HTML formatting methods, and style sheets specifications can control the appearance of these elements in browsers that support CSS1.


Question 13 :

As a reader, how can I make my browser recognize my own style sheet? 

Answer :

Netscape
It is not possible to do this in Netscape yet (as of version 4.0.) 
Internet Explorer 3.0 (Win95/NT)
[It is possible to do this at least in Windows95/NT, but no user interface is provided. Unknown how this might be accomplished on other operating systems.]

1. Open the Registry editor (Start..Run..regedit..ENTER)
2. Under the 'HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles' key, Edit..New..String Value
3. The new value should be called 'StyleSheet Pathname'
4. For the value, type in the full directory path of your .css style sheet. 

Internet Explorer 4.0 (Win95/NT)
1. Under the View menu, select 'Internet Options'.
2. Under the 'General' tab, choose the 'Accessibility' button.
3. Choose the 'Format documents using my style sheet' check box and 'Browse...' to the location of your .css style sheet.


Question 14 :

How do I get rid of the gap under my image?

Answer :

Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centred. What many people don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :

CSS

img {display:block;}

One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this :

CSS

ul, li {
    list-style-type:none;
    padding:0;
    margin:0 auto;
}
ul {
    width:150px;
}
li {
    float:left;
} 

HTML

<ul>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
</ul>


Question 15 :

What is selector?

Answer :

CSS selector is equivalent of HTML element(s). It is a string identifying to which element(s) the corresponding declaration(s) will apply and as such the link between the HTML document and the style sheet. 
For example in P {text-indent: 10pt} the selector is P and is called type selector as it matches all instances of this element type in the document. 
in P, UL {text-indent: 10pt} the selector is P and UL (see grouping); in .class {text-indent: 10pt} the selector is .class (see class selector).