css interview questions(121-130)

Colored Horizontal Rule?

You can apply styles to Horizontal Rules

 <HR> in IE without problems, but NN4.xx can only render the silvery HR. 
But there is a way around it:
.rule {border-top-width: 1px;
border-top-style: solid;
border-color: #FF0000;
margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

CSSharky Logo
On this page is an Example of a coloured 'Horizontal Rule'.
Thanks to Matt Del Vecchio here is an improved format for the Horizontal Rule:
hr { height:0px;
border-top:1px solid #ff1493; }
....this works in both IE and Netscape. 
It tells the browser to not render the hr rule itself, and
 then sets a 1px border, which looks just how most 
folks want to render the hr rule. It uses the <hr> element a
nd that is better than writing your own 
class as all devices will know what to do with an <hr> tag.

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}

To what are partial URLs relative?

Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence.
If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept.
If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded.
Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.
What’s the difference between ‘class’ and ‘id’?

As a person, you may have an ID card – a passport, a driving license or whatever – which identifies you as a unique individual. It’s the same with CSS. If you want to apply style to one element use ‘id’ (e.g.

). In the stylesheet, you identify an ‘id’ with a ‘#’ ie. ‘#myid’…
As a person, if you are in a class, you are one of many. It’s the same with CSS. If you want to apply the same style to more than one element, use ‘class’ (e.g.
). In the stylesheet, you identify a ‘class’ with a ‘.’ ie. ‘.myclass’…
If id’s are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it’s simply wrong. You don’t put headings in ‘p’ tags – you use ‘h1’, ‘h2’, etc. You don’t (or shouldn’t) make a list by writing asterisks or the little divider bar ( | ) – you use list tags (‘ol’/’ul’ + ‘li’) . You don’t say that your footer is part of a class of elements called ‘footer’ – that’s just stupid – you can’t have more than one footer – it can’t be a class. Of course, practically, the effect is about the same – the rules are applied – but that’s not the point – it’s semantically wrong to do it that way… However, if you try to give more than one element the same id, you will have problems – so don’t do it.
An element may have an id and a class, but that’s usually not necessary. You can also give an element two classes if you need to – like this : class=”class1 class2″. It can be very useful. Needless to say, you can’t give an element two id’s.
Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes.
One more useful thing about id’s is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that’s simply not true – in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id’s as link references is this page. There are no named anchors on this page – the questions at the top of the page link to the id’s of the divs that the answers are in.

I made a 10px-high div, but IE makes it 20px high…

This problem sometimes comes up when you make a div just to contain the bottom border of a box, or something like that. In this situation, there’s no text in the div, but IE won’t let the height of the div be smaller than the line-height (which usually depends on the font-size). The answer is to set the font-size to zero.

# thediv {

How do I place two paragraphs next to each other?

There are several ways to accomplish this effect, although each has its own benefits and drawbacks. We start with the simplest method of positioning two paragraphs next to each other.

<DIV style="float: left; width: 50%">Paragraph 1</DIV>
<DIV style="float: left; width: 50%">Paragraph 2</DIV>

Trickier is this example, which relies on positioning but does not suffer the vertical-overlap problems which plague many other positioning solutions. The problem is that it relies on an incorrect positioning implementation, and will break down dramatically in conformant browsers.

<SPAN STYLE="position: relative; left: 50%; width: 50%">
<SPAN STYLE="position: absolute; left: -100%; width: 100%">
Paragraph 1</SPAN>
Paragraph 2</SPAN>

If floating is not sufficient to your purposes, or you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.
Can you use someone else’s Style Sheet without permission?

This is a somewhat fuzzy issue. As with HTML tags, style sheet information is given using a special language syntax. Use of the language is not copyrighted, and the syntax itself does not convey any content – only rendering information.
It is not a great idea to reference an external style sheet on someone else’s server. Doing this is like referencing an in-line image from someone else’s server in your HTML document. This can end up overloading a server if too many pages all over the net reference the same item. It can’t hurt to contact the author of a style sheet, if known, to discuss using the style sheet, but this may not be possible. In any case, a local copy should be created and used instead of referencing a remote copy.

I want my page fonts to look the same everywhere as in…
) a.Why are my font sizes different in different browsers ?
b) Why are my font sizes different on different platforms ?

These questions represent the tip of the iceberg of a large topic about which whole essays have been written and a wide range of different views are held.
The WWW was originally devised to present the same content in different presentation situations and for a wide range of readers: on that basis, “looking the same” is not a design criterion, indeed different presentations would be expected to look different.
Some would have it that this original aim is no longer relevant, and that the purpose of web design is now to factor out the differences between display situations and put the author in control of the details of the presentation. Others point out that CSS was designed to give the reader a substantial amount of joint control over this process, and that this is desirable, for example to accommodate users with different visual acuity.
Reading of textual matter on a computer screen is quite a delicate business, what with the relatively coarse pixel structure of a computer display; even with a close knowledge of the display details, it isn’t possible to achieve the detailed control that would be possible, say, on a printer. Whatever one’s aims, the practical truth is that many of the efforts made to guarantee the precise result on the screen have seriously counterproductive side effects in a www situation.
The CSS specifications themselves recommend that authors should not use absolute size units in a situation where the properties of the display are unknown. There’s a lot to be said for flexible design, that in an appropriate situation looks the way you had in mind, but still successfully conveys content and message in a wide range of other browsing situations.
And so, before looking at the technical detail of what can be specified, it’s strongly suggested that you read some of those essays on web design, and reach your own conclusions as to the strengths and weaknesses of the medium, and how you can best exploit the strengths in a web environment, without falling foul of the weaknesses.

When is auto different from 0 in margin properties?

In vertical margins, auto is always equal to 0. In horizontal margins, auto is only equal to 0 if the width property is also auto. Here are three examples, assume that there is a

that is a child of:

Example 1: auto value on the width.

BODY {width: 30em;}
P {width: auto; margin-left: auto; margin-right: auto;}

Since the width property is auto, the auto values of the two margins will be ignored. The result is a P that is 30em wide, with no margins.

Example 2: two auto margins

BODY {width: 30em;}
P {width: 20em; margin-left: auto; margin-right: auto;}

The P will be 20em wide and the remaining 10em will be divided between the two margins. Paragraphs will be indented 5em at both sides.

Example 3: one auto margin

BODY {width: 30em;}
P {width: 20em; margin-left: 2em; margin-right: auto;}

In this case, paragraphs are 20em wide and are indented 2em on the left side. Since the total width available is 30em, that means the right margin will be 8em.
Note that the default value of width is auto, so setting one or both margins to auto is only useful if you set the width to something other than auto at the same time.

If you have questions, please ask below

Leave a Reply

If you have any questions headover to our forums

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>