CrowdforGeeks | Build Skills with Online Courses from Top Institutions

Top 41 Css Advanced Interview Questions

Q1. What Can Be Done With Style Sheets That Can Not Be Accomplished With Regular Html?

Many of the recent extensions to HTML have been tentative and fairly crude attempts to control report layout. Style sheets cross several steps past, and introduces complicated border, margin and spacing manage to maximum HTML factors. It additionally extends the skills added via most of the prevailing HTML browser extensions. Background shades or pix can now be assigned to ANY HTMLelement in preference to just the BODY detail and borders can now be carried out to anyelement in preference to just to tables. For greater records at the feasible residences in CSS, see the Index DOT Css Property Index.

Q2. Why Use Style Sheets?

Style sheets permit a miles extra diploma of layout and display manage than has ever been possible to this point in HTML. The amount of format coding necessary to manipulate display traits may be substantially decreased through the use of external style sheets which may be utilized by a group of documents. Also, multiple style sheetscan be incorporated from special resources to form a cohesive tapestry of styles for a record. Style sheets also are backward well matched - They can be mixed with HTML styling elements and attributes so that older browsers can view content material as supposed.

Q3. What Is Css Declaration?

CSS announcement is style attached to a specific selector. It consists of elements; assets that is equivalent of HTML attribute, e.G. Text-indent: and fee that's equivalent of HTML value, e.G. 10pt. NOTE: properties are usually ended with a colon.

Q4. What Is Css Rule At-rule ?

There are two sorts of CSS rules:

ruleset and at-rule. At-rule is a rule that applies to the entire fashion sheet and no longer to a specific selector handiest (like in ruleset). They all start with the @ image followed via a keyword made up of letters a-z, A-Z, digits 0-9, dashes and escaped characters, e.G. @import or @font-face.

Q5. How Do I Write My Style Sheet So That It Gracefully Cascades With User S Personal Sheet ?

You can help with this with the aid of setting houses in advocated places. Style guidelines that apply to the complete document have to be set inside the BODY element -- and handiest there. In this way, the person can without difficulty regulate record-wide fashion settings.

Q6. What Is Id Selector?

ID selector is an in my opinion identified (named) selector to which a selected style is asserted. Using the ID characteristic the declared style can then be related to one and most effective one HTML detail in line with document as to differentiate it from all different elements. ID selectors are created by a character # accompanied by the selector's name. The call can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, in addition to any Unicode characteras a numeric code, but, they can not start with a dash or a digit.

#abc123 shade: purple; historical past: black

<P ID=abc123>This and simplest this detail may be diagnosed as abc123 </P>

Q7. What Are Pseudo-factors?

Pseudo-elements are fictional factors that do not exist in HTML. They cope with the detail's sub-part (non-existent in HTML) and no longer the element itself. In CSS1 there are two pseudo-factors: 'first-line pseudo-element' and 'first-letter pseudo-detail'. They may be attached to block-level elements (e.G. Paragraphs or headings) to allow typographical styling in their sub-elements.

Q8. How Do I Get Rid Of The Gap Under My Image?

Images are inline elements, which me they may be handled within the equal way as text. Most humans sort of know this - they understand that if you use 'textual content-align:middle' on an image it is going to be concentrated. What many human beings don't recognize is that this me you may have an opening below an photo. This hole is for the descenders of letters like j,q,p,y and g. To take away this gap you want to make the photo block-stage - like this :

CSS

img show:block;

One hassle that this will cause is while you need to have some photographs subsequent to every other - if they're block-stage, they won't be subsequent to every different. To get around that, you could use waft:left. Of direction, this could present another hassle - maybe you do not need the image to drift left. In this case, you could use an unordered list like this :

CSS

ul, li

listing-fashion-type:none;

padding:zero;

margin:0 automobile;

width:150px;

waft:left;

HTML

<ul>

</ul>

Q9. What Is Class Selector?

Class selector is a "stand alone" magnificence to which a particular fashion is declared. Using the CLASS characteristic the declared style can then be associated with any HTML element. The magnificence selectors are created by way of a duration accompanied by the magnificence's call. The name can contain characters a-z, A-Z, digits zero-nine, period, hyphen, escaped characters, Unicode characters 161-255, in addition to any Unicode person as a numeric code, but, they can not start with a dash or a digit. (Note: in HTML the value of the CLASS characteristic can include more characters).It is a superb exercise to call classes in line with their characteristic than their look.

.Footnote font: 70% /* magnificence as selector */

<ADDRESS CLASS=footnote/>This element is related to the CLASS footnote</ADDRESS>

Q10. What Is Inline Style? How To Link?

Inline fashion is the fashion connected to one precise element. The fashion is distinctive without delay within the start tag as a cost of the STYLE attribute and could apply solely to this particular detail prevalence.

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

Q11. How Do I Design For Backward Compatibility Using Style Sheets?

Existing HTML fashion strategies (together with <font SIZE> and <b>) can be without problems blended with style sheet specification techniques. Browsers that don't understand style sheets will use the older HTML formatting methods, and style sheetsspecifications can manage the advent of these factors in browsers that help CSS1.

Q12. What Is Cascade?

Cascade is a method of defining the burden (significance) of character styling policies therefore allowing conflicting rules to be sorted out have to such guidelines practice to the sameselector.

Declarations with improved weight take precedence over statement with ordinary weight:

P colour: white ! Important /* accelerated weight */

P (shade: black /* ordinary weight */

Q13. Why Was The Decision Made To Make Padding Apply Outside Of The Width Of A Box, Rather Than Inside, Which Would Seem To Make More Sense?

It makes experience in some situations, but now not in others. For instance, while a childelement is about to width: 100%, I don't think it need to cover the padding of its discern. The box-sizing assets in CSS3 addresses this problem. Ideally, the issue need to had been addressed in advance, even though.

Q14. Can Style Sheets And Html Stylistic Elements Be Used In The Same Document?

Yes. Style Sheets might be unnoticed in browsers with out CSS-assist and HTML stylistic elements used.

Q15. Which Set Of Definitions, Html Attributes Or Css Properties, Take Precedence?

CSS houses take priority over HTML attributes. If both are distinct, HTML attributes may be displayed in browsers without CSS assist however may not have any effect in browsers with CSS guide.

Q16. As A Reader, How Can I Make My Browser Recognize My Own Style Sheet?

Netscape

It isn't viable to do this in Netscape yet (as of model 4.0.)

Internet Explorer 3.Zero (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.]

@Open the Registry editor (Start..Run..Regedit..ENTER)

@Under the 'HKEY_LOCAL_MACHINESoftwareMicrosoftInternetExplorerStyles' key, Edit..New..String Value

@The new fee have to be known as 'StyleSheet Pathname'

@For the cost, kind in the complete listing course of your .Css style sheet.

Internet Explorer 4.0 (Win95/NT)

@Under the View menu, pick 'Internet Options'.

@Under the 'General' tab, pick the 'Accessibility' button.

@Choose the 'Format files the usage of my fashion sheet' check field and 'Browse...' to the region of your .Css fashion sheet.

Q17. What Is Embedded Style? How To Link?

Embedded fashion is the fashion connected to at least one particular document. The style information is specific as a content of the STYLE detail inside the HEAD element and will practice to the entire document.

The Pack incorporates almost 14 plus software . Pick the only which is suited for you Make your PC more useful. Get the unfastened Google Pack.

<HEAD>

<!--

P text-indent: 10pt

-->

</STYLE>

</HEAD>

Note: The styling regulations are written as a HTML comment, that is, between  to cover the content material in browsers with out CSS help which might otherwise be displayed.

Q18. Are Style Sheets Case Sensitive?

No. Style sheets are case insensitive. Whatever is case insensitive in HTML is likewise case insensitive in CSS. However, parts that are not beneath control of CSS like font own family names and URLs may be case touchy - IMAGE.Gif and image.Gif isn't the identical document.

Q19. What Are Pseudo-classes?

Pseudo-classes are fictional element sorts that do not exist in HTML. In CSS1 there's most effective one detail kind which may be classed this manner, particularly the A detail(anchor). By growing three fictional varieties of the A element character fashion can be connected to each magnificence. These 3 fictional detail kinds are: A as unvisited link, A as active link and A as visited hyperlink. Pseudo-instructions are created with the aid of a colon followed with the aid of pseudo-magnificence's call. They also can be blended with ordinary lessons

example:

A:hyperlink heritage: black; coloration: white

A:energetic background: black; color: red

A:visited heritage: trparent; colour: black

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

A.Foot:hyperlink history: black; colour: white

A.Foft:lively historical past; black: coloration: purple

A.Foot:visited history: trparent; colour: black

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

Q20. What Is A Style Sheet?

Style sheets are the way that requirements-compliant Web designers outline the layout, look-and-experience, and layout in their pages. They are referred to as Cascading Style Sheets or CSS. With style sheets, a clothier can define many factors of a Web web page:

* fonts

* shades

* format

* positioning

* imagery

* accessibility

Style sheets give you loads of electricity to outline how your pages will look. And some other awesome aspect approximately them is that fashion sheets make it certainly smooth to replace your pages while you want to make a brand new layout. Simply load in a new style sheet onto your pages and you're accomplished.

Q21. What Is Selector?

CSS selector is equivalent of HTML element(s). It is a string identifying to which detail(s) the corresponding declaration(s) will apply and as such the link among the HTML document and the fashion sheet.

For instance in P textual content-indent: 10pt the selector is P and is referred to as kind selector as it matches all instances of this element kind in the record.

In P, UL text-indent: 10pt the selector is P and UL (see grouping); in .Class text-indent: 10pt the selector is .Elegance (see magnificence selector).

Q22. What Is Property?

Property is a stylistic parameter (characteristic) that can be prompted thru CSS, e.G. FONT or WIDTH. There should constantly be a corresponding price or values set to every assets, e.G. Font: formidable or font: formidable san-serif.

Q23. How To Use Css To Separate Content And Design?

The concept right here is that each one websites comprise fundamental parts, the content material: all of your articles, textual content and photos and the layout: rounded corners, colours and effects. Usually the ones two are made in exclusive elements of a website’s lifetime. The layout is determined at the start and then you definitely start filling it with content and preserve the layout constant.

In CSS you simply upload the nifty <link>-tag I’ve told you about to the head of yourHTML record and you have created a link on your design. In the HTML documentyou positioned content most effective, and that link of yours makes certain it appears proper. You also can use the precise equal link on many of your pages, giving them they all the equal layout. You want to feature content? Just write a undeniable HTML report and consider marking things up like “header” in place of “big blue header” and use CSS to make all headers appearance the way you want!

Q24. How Do I Quote Font Names In Quoted Values Of The Style Attribute?

The attribute values can contain each unmarried quotes and double fees as long as they arrive in matching pairs. If two pair of quotes are required include single fees in double ones or vice versa:

It's been said the latter technique doesn't paintings very well in some browsers, consequently the first one ought to be used.

Q25. Some Examples Of Good And Bad Coding. What Is Wrong With This?

<font size="3">Welcome to my page</font>

Comment: The font-tag is design and design shouldn’t be in the HTML record. All design have to be in the CSS-document! Instead do this:

In the HTML:

<h1>Welcome to my web page</h1>

In the CSS:

h1 font-length: 2em;

One extra example:

<b>An errors occurred</b>

This seems proper doesn’t it? But if you appearance up what <b> stands for you fast locate ambitious. But ambitious is genuinely design, so it nevertheless doesn’t belong inside the HTML record. A higher desire is <em> that stands for emphasis or virtually “this piece of text is vital”. So rather than saying “this newsletter seems like this” you are saying “this newsletter is critical” and also you let the looks be determined via the CSS. Seems like a minor exchange, however it illustrates a way to pick out your tags. Use this rather:

In the HTML:

<em>An errors occured</em>

In the CSS:

font-weight: ambitious;

coloration: Red;

One ultimate instance:

<table>

<tr><td><a href="">first link</a></td></tr>

<tr><td><a href="">2nd hyperlink</a></td></tr>

...

</table>

Q26. Can Css Be Used With Other Than Html Documents?

Yes. CSS can be used with any ny based record layout. E.G. XML, but, the method of linking CSS with other record kinds has now not been decided but.

Q27. What Is The Difference Between Id And Class?

ID identifies and units style to one and best one incidence of an detail while elegance can be connected to any wide variety of elements.

Q28. What Is Important Declaration?

Important statement is a assertion with extended weight. Declaration with multiplied weight will override declarations with ordinary weight. If both reader's and writer's fashion sheet comprise statements with essential declarations the author's assertion will override the reader's.

BODY background: white ! Vital; coloration: black

In the example above the background property has expanded weight at the same time as the colour belongings has everyday.

Q29. What Does The Cascading In Cascading Style Sheets Mean?

Style Sheets permit fashion facts to be certain from many places. Multiple (partial) outside style sheets may be referenced to reduce redundancy, and both authors as well as readers can specify fashion preferences.

In addition, three foremost techniques may be employed via an creator to add fashion data to HTML documents, and more than one processes for fashion manage are to be had in each of these strategies. In the give up, fashion may be unique for a unmarried element the use of any, or all, of these methods.

Q30. Why Is My External Stylesheet Not Working ?

There can be numerous special reasons behind that, but one very not unusual mistake is to have an outside stylesheet that carries HTML markup in a few form.

An outside stylesheet ought to contain simplest CSS policies, and if required, efficiently formed CSS comments; by no means include any HTML syntax, which includes <style type="text/css">…

CSS comments are defined as whatever this is located among

/* (the remark start mark) and

*/ (the remark cease mark). I.E. As follows…

/* This text proper here is a accurate CSS remark */

CSS feedback might also span a couple of lines inside the stylesheet. Nesting of CSS comments isn't always allowed.

Another motive for external stylesheets (and even embedded and inline stylerules) not to characteristic as predicted may be that you have tried to utilize some CSS-capabilities that aren't supported within the browser you are using.

External stylesheets shall additionally be served from the www-server with a MIME-form of 'text/css' in its 'Content Type:' HTTP header.

You may additionally need to negotiate with your server admin to add this MIME type in your server if you are not capable of configure the server your self.

Q31. How Do I Have A Fixed (non-scrolling) Background Image?

With CSS, you can use the history-attachment belongings. The backgroundattachment may be protected inside the shorthand historical past property, as in this example:

frame

heritage: white url(example.Gif) constant ;

colour: black ;

Note that this CSS is supported by means of Internet Explorer, Mozilla, Firefox Opera, Safari, and other browsers. In evaluation, Microsoft's proprietary BGPROPERTIES characteristic is supported handiest with the aid of Internet Explorer.

Q32. How Do I Eliminate The Blue Border Around Linked Images?

To your CSS, you may specify the border property for connected images:

a img border: none ;

However, notice that getting rid of the border that suggests an image is a link makes it harder for users to differentiate quick and effortlessly which photographs on an internet web page are clickable.

Q33. How Can I Make A Page Look The Same In E.G. Ns And Msie ?

The easy wer is, you can not, and you shouldn't waste it slow looking to make it exactly the identical. Web browsers are allowed, in keeping with definition, to interpret a page as they like, concern to the overall regulations set down in the HTML and CSS specs. As a web writer you can't have a previous knowledge of the precise scenario and/or medium in order to be used to render your web page, and it is nearly constantly instead counterproductive to attempt to manage that system. There isn't any necessity for a nicely-written web page to appearance the equal in one of a kind browsers. You can also want to strive to make certain that it seems top in more than one browser, despite the fact that the actual display (inside the case of graphical browsers) comes out a piece one-of-a-kind. "Looking accurate" can be done by means of adopting sensible design and tips, including now not fixing the size or face of your fonts, now not fixing the width of tables, and so on… Don't combat the medium; most web users best use one browser and will by no means realize, or bother to discover, that your page looks extraordinary, or even "higher", in any other browser.

Q34. Why Do Style Sheets Exist?

SGML (of which HTML is a by-product) changed into supposed to be a tool-unbiased technique for conveying a file's structural and semantic content material (its meaning.) It was in no way meant to deliver bodily formatting records. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting statistics. One of the primary reasons for style sheets is to forestall the creation of new HTML physical formatting constructs and another time separate fashion facts from report content.

Q35. Can I Include Comments In My Style Sheet?

Yes. Comments can be written everywhere where whitespace is authorized and are handled as white area themselves. Anything written among /* and */ is dealt with as a remark (white space).

NOTE: Comments can't be nested.

Q36. Styles Not Showing?

There are distinctive methods to use CSS to a HTML file with a stylesheet, and these specific ways can be mixed:

* inline (inner) (Deprecated for XHTML)

* embedded (internal)

* connected (outside) and

* @import (outside)

Note: An outside stylesheet is a text report that contains only CSS Styles. HTML feedback aren't alleged to be in there and may cause misinterpretation (> is the CSS "Child" selector!).

Q37. What Is Css Rule Ruleset?

There are sorts of CSS policies: ruleset and at-rule. Ruleset identifies selector orselectors and publicizes style that's to be connected to that selector or selectors. For example P textual content-indent: 10pt is a CSS rule. CSS rulesets include parts:selector, e.G. P and declaration,

e.G. Text-indent: 10pt.

P textual content-indent: 10pt - CSS rule (ruleset)

text-indent: 10pt - CSS statement

textual content-indent - CSS belongings

10pt - CSS value

Q38. What Are Inline, Block, Parent, Children, Replaced And Floating Elements?

Inline factors which do no longer have line breaks. Can occur in block elements or different inline factors, can't incorporate block factors.

Inline factors in HTML three.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 factors in HTML 4.Zero; 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 Tritional; 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

factors which do have line breaks. May arise in other block elements, can't occur in inline factors, may also comprise each block and inline factors.

Block elements in HTML three.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 factors in HTML four.0; P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).

Block factors in HTML 4.0 Tritional; 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 include (dad and mom) or are in the content of (youngsters) different elements, e.G. <P>text<STRONG>text</STRONG>textual content</P>. P is a figure of STRONG. STRONG is a toddler of P. If now not particular otherwise, children will inherit determine's properties.

Replaced elements which content material is changed. For instance content material of the IMG detail is changed with an image, content of the INPUT element is update with a subject.

Floating

elements which comply with the waft of a discern - inline elements.

Q39. What Are Style Sheets?

Style Sheets are templates, very much like templates in computing device publishing programs, containing a set of rules declared to diverse selectors(elements).

Q40. Is There Anything That Can T Be Replaced By Style Sheets?

Quite a bit certainly. Style sheets most effective specify statistics that controls display and rendering statistics. Virtual fashion factors that carry the NATURE of the content cannot be replaced by means of fashion sheets, and hyperlinking and multimedia object insertion is not part of style sheet capability in any respect (despite the fact that controlling how those objects appear IS a part of fashion sheets capability.) The CSS1specification has long past out of its way to absorb ALL of the HTML capability used in controlling show and layout traits. For more statistics at the possible residences in CSS, see the Index DOT Css Property Index.

Rule of Thumb: if an HTML element or attribute gives cues as to how its contentsshould be displayed, then some or all of its functionality has been absorbed via stylesheets.

Q41. Why Call The Subtended Angle A Pixel, Instead Of Something Else (e.G. Subangle)?

In maximum instances, a CSS pixel can be same to a tool pixel. But, as you factor out, the definition of a CSS pixel will on occasion be special. For instance, on a laser printer, one CSS pixel can be equal to 3x3 tool pixels to avoid printing illegibly small text and pics. I don't recall all and sundry ever providing any other call for it. Subangle? Personally, I think the majority might pick the pragmatic "px" to the non-intuitive "sa".