Interview Questions: Job Interview Questions Cascading Style sheet

Why do style sheets exist?

SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document’s structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs and once again separate style information from document content.

What are the advantages/disadvantages of the various style methods?

External Style Sheets

Advantages

§ Can control styles for multiple documents at once

§ Classes can be created for use on multiple HTML element types in many documents

§ Selector and grouping methods can be used to apply styles under complex contexts

Disadvantages

§ An extra download is required to import style information for each document

§ The rendering of the document may be delayed until the external style sheet is loaded

§ Becomes slightly unwieldy for small quantities of style definitions

Embedded Style Sheets

Advantages

§ Classes can be created for use on multiple tag types in the document

§ Selector and grouping methods can be used to apply styles under complex contexts

§ No additional downloads necessary to receive style information

Disadvantages

§ This method can not control styles for multiple documents at once

Inline Styles

Advantages

§ Useful for small quantities of style definitions

§ Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods

Disadvantages

§ Does not distance style information from content (a main goal of SGML/HTML)

§ Can not control styles for multiple documents at once

§ Author can not create or control classes of elements to control multiple element types within the document

§ Selector grouping methods can not be used to create complex element addressing scenarios

What is inline style? How to link?

Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence.

<P STYLE="text-indent: 10pt">Indented paragraph</P>

What is imported Style Sheet? How to link?

Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one.

To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import notations must come before any other declaration. If more than one sheet is imported they will cascade in order they are imported – the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

<!--

@import url(http://www.and.so.on.partial1.css);

@import url(http://www.and.so.on.partial2.css);

.... other statements

-->

</STYLE>

What is a Style Sheet?

Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages. They are called Cascading Style Sheets or CSS. With style sheets, a designer can define many aspects of a Web page:

§ fonts

§ colors

§ layout

§ positioning

§ imagery

§ accessibility

Style sheets give you a lot of power to define how your pages will look. And another great thing about them is that style sheets make it really easy to update your pages when you want to make a new design. Simply load in a new style sheet onto your pages and you’re done.

What is alternate Style Sheet? How to link?

Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred .

Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style, e.g.:

Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style, e.g.:

Alternate style gives an user the choice of selecting an alternative style – a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:

Alternate stylesheet are not yet supported.

How can you set a minimum width for IE?

To set a minimum width, the CSS property is ‘min-width’. This can be very useful and works well in good browsers. IE doesn’t understand ‘min-width’. However, it has a proprietary property called ‘expression’ which allows us to feed it JavaScript via a stylesheet. Below is how to set a (780px) minimum width for IE…

<!--[if gte IE 5]> <style type="text/css">

body {

width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );

}

</style>

<![endif]-->

As the property is non-standard, it won’t validate with the W3C validator, so if we put it in the head like this (above) – in an IE conditional comment – the validator will ignore it and the page will get a clean bill of health.

Which browsers support CSS?

It depends on your definition of “support.” If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:

§ Internet Explorer 3.0 and above

§ Navigator 4.0 and above

§ Opera 3.6 and above

§ Konqueror

§ Arena

§ Emacs-w3

§ Amaya

§ Lexicon

§ XPublish by Media Design in·Progress

If instead you’re interested in those browsers which are known to do a credible job of bug-free and mostly complete support for CSS1, then the list narrows somewhat dramatically:

§ Internet Explorer 5.0 for Macintosh and above

§ Internet Explorer 5.5 for Windows and above

§ Netscape Navigator 6.0 and above

§ Opera 4.0 and above

While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

How do I place text over an image?

To place text or image over an image you use the position property. The below example is supported by IE 4.0. All you have to do is adapt the units to your need.

<image>

</div>

Text that nicely wraps

</div>

Why does my content shift to the left on some pages (in FF)?

That’ll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there’s probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it’s needed and the view port becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It’s not a bug or something that needs to be fixed, but it does confuse and irritate some developers.

If, for some reason, you’d like Firefox to always have scrollbars – whether they’re needed or not – you can do this :

CSS html {

height:100.1%;

}

How do I combine multiple sheets into one?

To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:

What is attribute selector?

Attribute selector is a selector defined by

1) the attribute set to element(s),

2) the attribute and value(s),

3) the attribute and value parts:

1a) A[title] {text-decoration: underline}

All A elements containing the TITLE attribute will be underlined

1b) A[class=name] {text-decoration: underline}

The A elements classed as ‘name’ will be underlined

2) A[title="attribute element"] {text-decoration: underline}

The A elements containing the TITLE attribute with a value that is an exact match of the specified value, which in this example is ‘attribute element’, will be underlined

3) A[title~="attribute"] {text-decoration: underline}

The A elements containing the TITLE attribute with a value containing the specified word, which in this example is ‘attribute’, will be underlined

What is parent-child selector?

Parent-child selector is a selector representing the direct descendent of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.

BODY ~ P {background: red; color: white}

The P element will be declared the specified style only if it directly descends from the BODY element:

<BODY> <P>Red and white paragraph </P> </BODY>

BODY ~ P ~ EM {background: red; color: white}

The EM element will be declared the specified style only if it directly descends from the P element which in its turn directly descends from the BODY element:

<P> <EM>Red and white EM </EM> </P> </BODY>

How can I specify background images?

With CSS, you can suggest a background image (and a background color, for those not using your image) with the background property. Here is an example:

body {

background: white url(example.gif) ;

color: black ;

}

If you specify a background image, you should also specify text, link, and background colors since the reader’s default colors may not provide adequate contrast against your background image. The background color may be used by those not using your background image. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.

How do I have a fixed (non-scrolling) background image?

With CSS, you can use the background-attachment property. The background attachment can be included in the shorthand background property, as in this example:

body {

background: white url(example.gif) fixed ;

color: black ;

}

Note that this CSS is supported by Internet Explorer, Mozilla, Firefox Opera, Safari, and other browsers. In contrast, Microsoft’s proprietary BGPROPERTIES attribute is supported only by Internet Explorer.

What are inline, block, parent, children, replaced and floating elements?

Inline

elements which do not have line breaks. Can occur in block elements or other inline elements, cannot contain block elements.

Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA.

Inline elements in HTML 4.0; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, BIG, SMALL, SUB, SUP, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).

Inline elements in HTML 4.0 Transitional; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, U, S, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP, Q, SPAN, BDO, IFRAME, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).

Block elements which do have line breaks. May occur in other block elements, cannot occur in inline elements, may contain both block and inline elements.

Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM.

Block elements in HTML 4.0; P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).

Block elements in HTML 4.0 Transitional; P, H1, H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, DL, DIV, CENTER, NOSCRIPT, NOFRAMES, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).

Parents and children

elements which either contain (parents) or are in the content of (children) other elements,

e.g. <P>text<STRONG>text</STRONG>text</P>.

P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent’s properties.

Replaced

elements which content is replaced. For example content of the IMG element is replaced with an image, content of the INPUT element is replace with a field.

Floating

elements which follow the flow of a parent – inline elements.

Which set of definitions, HTML attributes or CSS properties, take precedence?

CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won’t have any effect in browsers with CSS support.

How do I eliminate the blue border around linked images?

in your CSS, you can specify the border property for lined images:

a img { border: none ; }

However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.

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>

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>

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:

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

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

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

... 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

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]>

<![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>

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

How to write conditional statement in CSS?

Posted by: Raja

Following is the example of conditional statement in CSS.

<head>

body

{

color:blue;

}

</style>

<!--[if IE 7]>

body {

background-color:red;

}

</style>

<![endif]-->

</head>

If this code will run in IE7 browser, the background color of the page will be red, for other browser it will be default color (white).

How to write styles for all html elements of the same type?

Posted by: Raja

If we want to maintain uniformity in the look and feel of all same type of elements on the page, we can write CSS class with the element name.eg.

If we want to change the look and feel of all table and h1 element on the page, we can write like this.

table

{

font-size:10pt;

font-family: Arial;

}

{

font-size:14pt;

padding-left:5px;

margin:0px;

color:#094BBB;

}

The first class "table" will apply to all the tables on the page and second class "h1" will apply to all the h1 element of the page.

Note that the name of the class is not prefixed with the . (dot) as it happens with normal css class name.

What are the possible values of the "Position" attributes?

Posted by: Raja

The possible value of the "Position" attributes are

absolute

fixed

inherit

relative

static

By default, relative value is considered.

How to display a link without underline and display underline when mouseover on the link using CSS?

Posted by: Raja

Write following css class.

{

text-decoration:none;

}

a:hover

{

text-decoration:underline;

}

The first class will force all anchor tag (link)to not display any docoration (underline) and second class will force all anchor tag (link) to display text decoration as underline when mouse over it (ie. display underline when mouse over).

How to float the image left side and let the page content fill right side and bottom in CSS?

Posted by: Raja

Wrap the div element with fload:left style.

<img src="fsdaf.gif" />Your contents goes here.

</div>

To reverse, ie float the image in the right side and let the content fill the space at the left and further down, specify float:right style.

How to line break in CSS?

Posted by: Raja

Use display:block style with span.

How to page break after an html element in CSS?

Posted by: Raja

Use following code snippet

<p style="page-break-after: always">Place your text</p>

After above code, the rest content will appear in the next page. (It will not be visible as next page in browser but on the printer and in Print Preview, you will see them as next page)

State some limitations of style sheets?

Posted by: Neeks

Style sheets do have its own share of limitations some of them are as follows: -

1) Inconsistent browser support

2) Vertical control limitations

3) Margin collapsing, float containment, control of element shapes, etc

4) Lack of column declaration and variables are some of the limitations present in CSS.

How do I center block-elements with CSS1?

Posted by: Baisakhigh

There are two ways of centering block level elements:

1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

BODY {width: 30em; background: cyan;}

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

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em - 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:

TABLE {margin-left: auto; margin-right: auto; width: 400px;}

In most legacy browsers, a table's width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element's content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

What does CSS stand for?

Posted by: Syedshakeer

NOTE: This is objective type question, Please click question title for correct answer.

Explain inline, embedded and external style sheets .

Posted by: Chikul

There are three ways of inserting a style sheet:

1. External style sheet

2. Internal style sheet

3. Inline style

External Style Sheet :

An external style sheet is ideal when the style is applied to many pages.

With an external style sheet, you can change the look of an entire Web site by changing one file.

Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

</head>

Internal Style Sheet :

An internal style sheet should be used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag, like this:

<head>

hr {color:sienna}

p {margin-left:20px}

body {background-image:url("images/back40.gif")}

</style>

</head>

Inline Styles :

If only a small piece of code has to be styled then inline style sheets can be used.

An inline style loses many of the advantages of style sheets by mixing content with presentation.

To use inline styles you use the style attribute in the relevant tag.

The style attribute can contain any CSS property.

The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

What are the values of "Position" attribute in CSS?

Posted by: Virendradugar

Possible values are

static, relative, absolute, fixed, inherit

What is the default value of "position" attribute in css?

Posted by: Virendradugar

Default value is "static".

display and visibility properties are used to hide and show elements in any page. Then how they are different from each other?

Posted by: Virendradugar

As said Both the properties are used to hide and show elements but they are different in the way they both work. visibility property, set to hidden will still occupy the space in the layout but display:none does not take up the space in the page.

Can you specify more than one css class for any HTML element?

Posted by: Virendradugar

Yes, you can. Just provide a space between both the class names.

like..

</div>

What is the difference between specifying css class with # and .? i.e. #Class1 or .Class1?

Posted by: Virendradugar

Stylesheeet class declared with # applies to items which have same Id value as of the class name.

#div1

{

font-weight:bold;

}

<div id="div1">Styled Container</div>

Where css class declared with . can be used for any html element.

.class1

{

position:relative;

left:50px;

}

<div class="class1">Styled Container</div>

Thanks,

Virendra Dugar

Is CSS case sensitive?

Posted by: Chikul

Cascading Style Sheets (CSS) is not case sensitve. However, font families, URLs to images, and other direct references with the style sheet may be.

If your page uses an XML declaration and an XHTML DOCTYPE then the CSS selectors will be case-sensitive for some browsers, if your page uses a HTML DOCTYPE then your CSS selectors will be case-insensitive.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}

div.myClass { ... }

What is embedded style? How to link?

Posted by: Chikul

The HEAD area, where the TITLE and META tags are found, is also used to store CSS commands.

These are called embedded CSS. Any embedded CSS command will over-ride an external CSS command of the same tag. Embedded commands are more specific to the page.

Embedded CSS codes are placed within the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. NOT in the HEAD tag itself.

<!--

p {font-family: georgia, serif; font-size: x-small;}

hr {color: #ff9900; height: 1px }

a:hover {color: #ff0000; text-decoration: none}

-->

</style>

Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

What is CSS rule 'ruleset'?

Posted by: Chikul

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}.

P {text-indent: 10pt} - CSS rule (ruleset)

{text-indent: 10pt} - CSS declaration

text-indent - CSS property

10pt - CSS value

What is ID selector?

Posted by: Chikul

ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector'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.

#abc123 {color: red; background: black}

<P ID=abc123>This and only this element can be identified as abc123 </P>

What is contextual selector?

Posted by: Chikul

Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context.

TD P CODE {color: red}

The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.

TD P CODE, H1 EM {color: red}

The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1

P .footnote {color: red}

Any element with CLASS footnote will be red but only if it occurs in the context of P

P .footnote [lang]{color: red}

Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

What are pseudo-elements?

Posted by: Chikul

Pseudo-elements are fictional elements that do not exist in HTML. They address the element's sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-element' and 'first-letter pseudo-element'. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element's name, e.g:

P:first-line

H1:first-letter

and can be combined with normal classes; e.g:

P.initial:first-line

First-line pseudo-element allows sub-parting the element's first line and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-line {text-transform: uppercase}

<P class=initial>The first line of this paragraph will be displayed in uppercase letters</P>

First-letter pseudo-element allows sub-parting the element's first letter and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-letter { font-size: 200%; color: red}

<P class=initial>The first letter of this paragraph will be displayed in red and twice as large as the remaining letters</P>

Is CSS case Sensitive?

1. CSS is not case sensitive.

2. But some browsers taking CSS as case sensitive, where there may be the use of XML document and XHTML doctypes.

3. It is better practice to avoid CSS classes with same name, where the only difference is case.

4.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.

In HTML attributes, CSS properties which one take precedence over another?

CSS properties always take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support, but won't have any effect in browsers with CSS support.

Which of these is a CSS pseudo class? A) .abc { color:green; } B) a:visited { color:green; } C) h1 h2 { color:green; }

Which HTML element is used to reference a style sheet on a.aspx page?

To reference a style sheet on .aspx page,we use link element in the page’s head element, as shown .

It is known as the linking of external stylesheet.(demo.css is a stylesheet file in the web site)

How to make a Arabic style (right to left direction) web page with css?.

Answer is,

<style>

*{direction:rtl}

</style>

This css rule will change the direction all elements in the page from left to right. by default, elements direction is left to right. it will helps to make website in arabic version.

How to set wait cursor

set wait cursor using following line

document.body.style.cursor = 'wait';

Wait cursor is used to when some process is taking too much time or while calculating and you want to show wait cursor to user to wait till process is done, after process done, convert the wait cursor to default cusrsor.

document.body.style.cursor = "default";

Tags: css

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it:

Interview Questions

Job Interview Questions Cascading Style sheet

0 comments:

Have any question? Feel Free To Post Below:

Links

Popular Posts

Labels

Top 10 in 2012

Top 10 Questions

Blog Archive

link

Author

Interview Questions

Job Interview Questions Cascading Style sheet

0 comments:

Have any question? Feel Free To Post Below:

Links

Popular Posts

Labels

Top 10 in 2012

Top 10 Questions

Blog Archive

Receive all updates via Facebook. Just Click the Like Button Below▼

link

Author

Receive all updates via Facebook. Just Click the Like Button Below
▼