CSS Interview Questions and Answers Part-III

Can CSS be used with other than HTML documents?
Yes. CSS can be used with any ny structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.

Can Style Sheets and HTML stylistic elements be used in the same document?
Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

What are pseudo-classes?
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>

How do I design for backward compatibility using Style Sheets?
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.

As a reader, how can I make my browser recognize my own style sheet?
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.

How do I get rid of the gap under my image?
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" alt="wine" width="50" height="50" />

What is CLASS selector?
Class selector is a “stand alone” class to which a specific style is declared. Using the CLASS attribute the declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class’s 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).It is a good practice to name classes according to their function than their appearance.

.footnote {font: 70%} /* class as selector */

<ADDRESS CLASS=footnote/>This element is associated with the CLASS footnote</ADDRESS>
<P CLASS=footnote>And so is this</P>

What is CSS declaration?
CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute,
e.g. text-indent:
and value which is equivalent of HTML value,
e.g. 10pt.
NOTE: properties are always ended with a colon.

What is ‘important’ declaration?
Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader’s and author’s style sheet contain statements with important declarations the author’s declaration will override the reader’s.

BODY {background: white ! important; color: black}

In the example above the background property has increased weight while the color property has normal.

What is cascade?
Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.

Declarations with increased weight take precedence over declaration with normal weight:

P {color: white ! important} /* increased weight */
P (color: black} /* normal weight */

Are Style Sheets case sensitive?
No. Style sheets are case insensitive. Whatever is case insensitive in HTML is also case insensitive in CSS. However, parts that are not under control of CSS like font family names and URLs can be case sensitive – IMAGE.gif and image.gif is not the same file.

How do I have a non-tiling (non-repeating) background image?
With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example:

body {
background: white url(example.gif) no-repeat ;
color: black ;
}

Styles not showing?
There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

  • inline (internal) (Deprecated for XHTML)
  • embedded (internal)
  • linked (external) and
  • @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS “Child” selector!).

How do I quote font names in quoted values of the style attribute?
The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa:

<P STYLE="font-family: 'New Times Roman'; font-size: 90%">
<P STYLE='font-family: "New Times Roman"; font-size: 90%'>

It’s been reported the latter method doesn’t work very well in some browsers, therefore the first one should be used.

What is property?
Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponding value or values set to each property,

e.g. font: bold or font: bold san-serif.

Can I include comments in my Style Sheet?
Yes. Comments can be written anywhere where whitespace is allowed and are treated as white space themselves. Anything written between /* and */ is treated as a comment (white space).
NOTE: Comments cannot be nested.

What is the difference between ID and CLASS?
ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements. By singling out one occurrence of an element the unique value can be declared to said element.

CSS

#eva1 {background: red; color: white}
.eva2 {background: red; color: white}

HTML – ID

<P ID=eva1>Paragraph 1 - ONLY THIS occurrence of the element P (or single occurrence of some other element) can be identified as eva1</P>
<P ID=eva1>Paragraph 2 - This occurrence of the element P CANNOT be identified as eva1</P>

HTML – CLASS

<P class=eva2>Paragraph 1 - This occurrence of the element P can be classified as eva2</P>
<P class=eva2>Paragraph 2 - And so can this, as well as occurrences of any other element, </P>

How do you make a tool tip that appears on hover?
The most simple way is to use the ‘title’ attribute like this…

HTML
<span title=”Example of the title attribute in use”>like this</span>

CSS

a.tooltip {
position:relative;
cursor:help;
}
a.tooltip span {
display: none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;
}
a.tooltip:hover {
display:inline;
}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;
}

HTML

<a class="tooltip" href="#n">Karl Marx<span>-info goes here-</span></a>

Without this part… a.tooltip:hover {
display:inline;
}

..it won’t work in IE.

The “#n” in the link is to prevent the page from jumping to the top if the link is clicked. The “href” part is necessary as it won’t work in IE without it.

What is cascading order?
Cascading order is a sorting system consisting of rules by which declarations are sorted out so that there are not conflicts as to which declaration is to influence the presentation. The sorting begins with rule no 1. If a match is found the search is over. If there is no match under rule no 1 the search continues under rule no 2 and so on.

1. Find all declarations that apply to a specific selector/property and Declare the specified style if the selector matches the element if there isn’t any Let the element inherit its parent property if there isn’t any Use initial value.
2. Sort by weight (! important) Increased weight take precedence over normal weight.
3. Sort by origin Rules with normal weight declared in author’s style sheet will override rules with normal weight declared in user’s personal style sheets Rules with increased weight declared in user’s personal style sheet will override rules with normal weight declared in author’s style sheet Rules with increased weight declared in author’s style sheet will override rules with increased weight declared in user’s personal style sheets Author’s and user’s rules will override UA’s default style sheet.
4. Sort by selector’s specificity More specific selector will override less specific one: ID-selector (most specific), followed by Classified contextual selectors (TABLE P EM.fot) Class selectors (EM.fot) Contextual selectors – the “lower down” the more weight, (TABLE P EM), (TABLE P EM STRONG) – STRONG has more weight than EM.
5. Sort by order specified If two rules have the same weight, the latter specified overrides ones specified earlier. Style sheets are sorted out as follows: The STYLE attribute (inline style) overrides all other styles The Style element (embedded style) overrides linked and imported sheets The LINK element (external style) overrides imported style The @import statement – imported style sheets also cascade with each other in the same order as they are imported.

How do you make a whole div into a link?
You can’t put ‘a’ tags around a div, but you can do this with javascript :

HTML

<div onclick="javascript:location='http://bonrouge.com'" id="mydiv">
... stuff goes here ...
</div>

If you want to use an empty div with a background image as a link instead of putting your image into the html, you can do something like this:

CSS
#empty {
background-image:url(wine.jpg);
width:50px;
height:50px;
margin:auto;
}
#empty a {
display:block;
height:50px;
}
* html #empty a {
display:inline-block;
}

HTML

<div id="empty"><a href="#n"></a></div>

What is shorthand property?
Shorthand property is a property made up of individual properties that have a common “addressee”. For example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:

H1 {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 160%;
font-family: serif}

can be all shorthanded to a space separated list:

H1 {font: bold italic small-caps 160% serif}

Note: To make things even simpler the line-height property can be specified together with the font-size property:

H1 {font: bold italic small-caps 160%/170% serif}

How To Style Forms?
Forms and form elements like SELECT, INPUT etc. can be styled with CSS – partially.
Check boxes and Radio buttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

Can I attach more than one declaration to a selector?
Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list,
e.g.;

Selector {declaration1; declaration2}
P {background: white; color: black}

How do you target a certain browser?
IE can be targeted by preceding your properties with ‘* html’. For example…

#nav {
position:fixed;
}
* html #nav { /* this will target IE */
position:absolute;
}

Another way to target IE is with conditional comments. Put this (below) in the head – just before the closing tag – and put anything you want to be directed only at IE in another stylesheet.

<!--[if IE]>
<link href="ieonly.css" rel="stylesheet" type="text/css">
<![endif]-->

If you need to target IE5x…

#wrap {
width:760px; /* for IE5x */
w\idth:780px; /* for all other major browsers */
}

What is the percentage value in ‘font-size’ relative to?
It is relative to the parent element’s font-size.
For example, if the style sheet says:

H1 {font-size: 20pt;}
SUP {font-size: 80%;}

…then a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.

Which style specification method should be used? Why?
The answer to this one is tricky. The short answer is: “it depends.” The long answer is, however, another story.

If you are planning on using more than one style specification method in your document, you must also worry about Cascading Order of Style methods. If you are going to use only one method, then some guidelines about the nature of each method need to be kept in mind. The answer to this question is also very much related to the advantages and disadvantages to using each of them.
Method 1: External Style Sheets (The LINK [–>Index DOT Html] element)
This method should be used if you want to apply the same style to multiple documents. Each document can reference the stand-alone style sheet and use the styles contained within. Using this method, the appearance of many documents can be controlled using a single or small number of style sheets. This can save a LOT of time for an author.
Method 2: Embedded Style Sheets (The Style [–>Index DOT Html] element)
The syntax used with Method 2 is the same as that for Method 1. This method is a happy medium between External Style Sheets and Inline Styles. It should be used in place of Method 1 if you only want to specify styles for a single document. This method should also be used when you want to specify a style for multiple tag types at once or the list of style definitions is of larger size. Method 3: Inline Styles (STYLE attribute to HTML elements)

If you only have to apply style to one or a few elements in a single document, your best bet will often be an Inline Style. This method attaches a style definition within the HTML element it is modifying.

Do URL’s have quotes or not?
Double or single quotes in URLs are optional. The tree following examples are equally valid:

BODY {background: url(pics/wave.png) blue}
BODY {background: url("pics/wave.png") blue}
BODY {background: url('pics/wave.png') blue}

How do you show which page you’re on (in a menu)?
If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your ‘a’ tags for the links.
Let’s say on page one you have this:
HTML

<body id="page1">
....
<a id="page1link" href="page1.htm">page one</a>
...
</body>

In your CSS, you can have something like this:
CSS

#page1 a#page1link {
color:purple;

Document Style Semantics and Specification Language (DSSSL)?
Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents,
for example XML.

What is Extensible Stylesheet Language (XSL)?
XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText



Leave a Reply

You must be logged in to post a comment.