Top 100+ Css Advanced Interview Questions And Answers
Question 1. What Is The Difference Between Id And Class?
Answer :
ID identifies and units style to at least one and most effective one prevalence of an detail while class may be attached to any variety of factors.
Question 2. Can I Include Comments In My Style Sheet?
Answer :
Yes. Comments may be written anywhere wherein whitespace is permitted and are handled as white space themselves. Anything written between /* and */ is treated as a remark (white space).
NOTE: Comments cannot be nested.
XML Interview Questions
Question three. Is There Anything That Can T Be Replaced By Style Sheets?
Answer :
Quite a bit definitely. Style sheets only specify facts that controls show and rendering facts. Virtual fashion elements that convey the NATURE of the content material can not be replaced through style sheets, and hyperlinking and multimedia item insertion isn't always a part of fashion sheet capability in any respect (despite the fact that controlling how those items seem IS part of style sheets capability.) The CSS1specification has long gone out of its manner to take in ALL of the HTML functionality utilized in controlling display and format characteristics. For more information at the viable houses in CSS, see the Index DOT Css Property Index.
Rule of Thumb: if an HTML detail or characteristic gives cues as to how its contentsshould be displayed, then some or all of its capability has been absorbed by using stylesheets.
Question 4. How Can I Make A Page Look The Same In E.G. Ns And Msie ?
Answer :
The easy answer is, you can not, and also you should not waste some time looking to make it precisely the same. Web browsers are allowed, in keeping with definition, to interpret a web page as they prefer, concern to the general regulations set down within the HTML and CSS specifications. As an internet creator you can't have a prior know-how of the exact situation and/or medium to be able to be used to render your web page, and it is almost usually as an alternative counterproductive to try and manipulate that procedure. There is not any necessity for a nicely-written web page to appearance the equal in different browsers. You may additionally need to strive to make certain that it appears correct in a couple of browser, even though the real display (inside the case of graphical browsers) comes out a bit distinct. "Looking excellent" can be done with the aid of adopting sensible design and recommendations, such as not solving the scale or face of your fonts, now not solving the width of tables, and so forth… Don't fight the medium; maximum net users handiest use one browser and will in no way realize, or bother to discover, that your page appears unique, or maybe "better", in every other browser.
XML Tutorial
Question 5. What Are Pseudo-elements?
Answer :
Pseudo-elements are fictional factors that do not exist in HTML. They address the detail's sub-part (non-existent in HTML) and now not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-detail' and 'first-letter pseudo-element'. They can be connected to block-stage elements (e.G. Paragraphs or headings) to allow typographical styling of their sub-components.
CSS3 Interview Questions
Question 6. How Do I Write My Style Sheet So That It Gracefully Cascades With User S Personal Sheet ?
Answer :
You can assist with this with the aid of putting residences in endorsed places. Style rules that observe to the entire file have to be set in the BODY detail -- and most effective there. In this way, the user can without difficulty adjust document-huge style settings.
Question 7. What Is Property?
Answer :
Property is a stylistic parameter (attribute) that may be influenced thru CSS, e.G. FONT or WIDTH. There should continually be a corresponding price or values set to every belongings, e.G. Font: formidable or font: formidable san-serif.
CSS3 Tutorial HTML Interview Questions
Question 8. What Can Be Done With Style Sheets That Can Not Be Accomplished With Regular Html?
Answer :
Many of the current extensions to HTML have been tentative and fairly crude tries to control file format. Style sheets go numerous steps past, and introduces complicated border, margin and spacing control to most HTML factors. It additionally extends the skills introduced by maximum of the present HTML browser extensions. Background colorings or photographs can now be assigned to ANY HTMLelement instead of just the BODY detail and borders can now be carried out to anyelement rather than just to tables. For more statistics at the possible homes in CSS, see the Index DOT Css Property Index.
Question nine. Why Is My External Stylesheet Not Working ?
Answer :
There may be numerous distinctive reasons at the back of that, however one very not unusual mistake is to have an outside stylesheet that carries HTML markup in some shape.
An external stylesheet must include most effective CSS policies, and if required, correctly shaped CSS comments; in no way consist of any HTML syntax, such as <style type="text/css">…
CSS comments are described as anything that is placed among
/* (the remark begin mark) and
*/ (the comment quit mark). I.E. As follows…
/* This textual content proper here's a accurate CSS comment */
CSS remarks may also span a couple of traces within the stylesheet. Nesting of CSS remarks isn't allowed.
Another motive for external stylesheets (or even embedded and inline stylerules) now not to characteristic as anticipated may be that you have attempted to utilize some CSS-features that are not supported within the browser you are the usage of.
External stylesheets shall also be served from the www-server with a MIME-form of 'textual content/css' in its 'Content Type:' HTTP header.
You may additionally want to barter together with your server admin to feature this MIME type to your server in case you are not able to configure the server your self.
Dreamweaver Interview Questions
Question 10. How Do I Quote Font Names In Quoted Values Of The Style Attribute?
Answer :
The characteristic values can include each unmarried fees and double fees so long as they arrive in matching pairs. If two pair of prices are required include single charges 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 technique would not paintings thoroughly in some browsers, therefore the first one need to be used.
HTML Tutorial
Question eleven. Styles Not Showing?
Answer :
There are extraordinary methods to use CSS to a HTML file with a stylesheet, and those one of a kind approaches may be combined:
* inline (inner) (Deprecated for XHTML)
* embedded (internal)
* related (outside) and
* @import (external)
Note: An external stylesheet is a textual content record that consists of most effective CSS Styles. HTML feedback are not speculated to be in there and might result in misinterpretation (> is the CSS "Child" selector!).
UI Developer Interview Questions
Question 12. Are Style Sheets Case Sensitive?
Answer :
No. Style sheets are case insensitive. Whatever is case insensitive in HTML is likewise case insensitive in CSS. However, parts that aren't below control of CSS like font family names and URLs may be case touchy - IMAGE.Gif and picture.Gif is not the identical file.
XML Interview Questions
Question thirteen. What Is Cascade?
Answer :
Cascade is a technique of defining the weight (importance) of man or woman styling rules accordingly permitting conflicting regulations to be taken care of out ought to such policies practice to the sameselector.
Declarations with expanded weight take precedence over assertion with everyday weight:
P colour: white ! Vital /* expanded weight */
P (shade: black /* normal weight */
CSS Tutorial
Question 14. What Is Important Declaration?
Answer :
Important announcement is a announcement with multiplied weight. Declaration with extended weight will override declarations with normal weight. If each reader's and creator's style sheet incorporate statements with crucial declarations the author's assertion will override the reader's.
BODY heritage: white ! Crucial; coloration: black
In the instance above the historical past assets has increased weight at the same time as the coloration belongings has everyday.
Question 15. What Is Css Declaration?
Answer :
CSS declaration is fashion attached to a particular selector. It consists of two parts; assets that's equivalent of HTML characteristic, e.G. Textual content-indent: and fee that is equal of HTML fee, e.G. 10pt. NOTE: properties are continually ended with a colon.
CSS Interview Questions
Question sixteen. What Is Class Selector?
Answer :
Class selector is a "stand alone" elegance to which a particular fashion is declared. Using the CLASS attribute the declared fashion can then be associated with any HTML detail. The magnificence selectors are created by means of a period observed by means of the elegance's name. The name can incorporate characters a-z, A-Z, digits zero-nine, length, hyphen, escaped characters, Unicode characters 161-255, in addition to any Unicode individual as a numeric code, however, they cannot begin with a sprint or a digit. (Note: in HTML the cost of the CLASS characteristic can include extra characters).It is a good exercise to call lessons in keeping with their function than their look.
.Footnote font: 70% /* class as selector */
<ADDRESS CLASS=footnote/>This detail is related to the CLASS footnote</ADDRESS>
<P CLASS=footnote>And so is that this</P>
CSS Advanced Tutorial
Question 17. What Is Selector?
Answer :
CSS selector is equal of HTML detail(s). It is a string figuring out to which element(s) the corresponding statement(s) will practice and as such the link among the HTML file and the style sheet.
For example in P textual content-indent: 10pt the selector is P and is referred to as kind selector because it matches all times of this element type in the file.
In P, UL text-indent: 10pt the selector is P and UL (see grouping); in .Magnificence text-indent: 10pt the selector is .Class (see magnificence selector).
WordPress Interview Questions
Question 18. What Is Css Rule At-rule ?
Answer :
There are forms of CSS policies:
ruleset and at-rule. At-rule is a rule that applies to the entire style sheet and no longer to a specific selector simplest (like in ruleset). They all begin with the @ image accompanied by using a key-word made of letters a-z, A-Z, digits zero-9, dashes and escaped characters, e.G. @import or @font-face.
CSS3 Interview Questions
Question 19. What Does The Cascading In Cascading Style Sheets Mean?
Answer :
Style Sheets allow fashion records to be particular from many places. Multiple (partial) outside fashion sheets can be referenced to lessen redundancy, and both authors as well as readers can specify fashion alternatives.
In addition, 3 important techniques can be hired by means of an creator to feature style data to HTML files, and multiple tactics for style manipulate are available in every of these methods. In the end, fashion may be distinct for a unmarried detail using any, or all, of those methods.
WordPress Tutorial
Question 20. Why Use Style Sheets?
Answer :
Style sheets permit a much extra diploma of layout and display control than has ever been viable to date in HTML. The quantity of format coding essential to manipulate show characteristics can be substantially reduced via the use of external style sheets which may be used by a set of documents. Also, a couple of fashion sheetscan be included from extraordinary resources to shape a cohesive tapestry of patterns for a record. Style sheets also are backward well suited - They can be combined with HTML styling factors and attributes in order that older browsers can view content as meant.
Pure.CSS Interview Questions
Question 21. How Do I Get Rid Of The Gap Under My Image?
Answer :
Images are inline factors, which means they're treated in the equal way as text. Most human beings form of understand this - they know that in case you use 'text-align:center' on an picture it will be centred. What many people do not realize is that this indicates you'll have an opening beneath an image. This gap is for the descenders of letters like j,q,p,y and g. To cast off this hole you want to make the image block-degree - like this :
CSS
img show:block;
One problem that this will purpose is while you need to have some images subsequent to every different - if they're block-level, they might not be subsequent to each different. To get round that, you may use waft:left. Of direction, this could present every other trouble - perhaps you do not want the picture to drift left. In this situation, you may use an unordered listing like this :
CSS
ul, li
list-fashion-kind:none;
padding:0;
margin:0 car;
ul
width:150px;
li
waft:left;
HTML
<ul>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.Jpg" height="50" width="50" alt="wine" /></li>
</ul>
Question 22. As A Reader, How Can I Make My Browser Recognize My Own Style Sheet?
Answer :
Netscape
It is not viable to try this in Netscape but (as of version 4.Zero.)
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.]
1. Open the Registry editor (Start..Run..Regedit..ENTER)
2. Under the 'HKEY_LOCAL_MACHINESoftwareMicrosoftInternetExplorerStyles' key, Edit..New..String Value
3. The new cost have to be referred to as 'StyleSheet Pathname'
4. For the price, type within the complete listing course of your .Css fashion sheet.
Internet Explorer four.0 (Win95/NT)
1. Under the View menu, select 'Internet Options'.
2. Under the 'General' tab, pick the 'Accessibility' button.
3. Choose the 'Format documents the usage of my style sheet' test box and 'Browse...' to the location of your .Css fashion sheet.
Pure.CSS Tutorial
Question 23. How Do I Design For Backward Compatibility Using Style Sheets?
Answer :
Existing HTML fashion techniques (such as <font SIZE> and <b>) may be effortlessly blended with fashion sheet specification strategies. Browsers that don't recognize style sheets will use the older HTML formatting techniques, and fashion sheetsspecifications can manage the arrival of these elements in browsers that support CSS1.
XHTML Interview Questions
Question 24. What Are Pseudo-classes?
Answer :
Pseudo-instructions are fictional detail types that don't exist in HTML. In CSS1 there may be handiest one detail type which may be classed this way, particularly the A element(anchor). By developing 3 fictional styles of the A detail person fashion may be connected to each class. These three fictional element sorts are: A as unvisited link, A as energetic link and A as visited link. Pseudo-lessons are created through a colon accompanied with the aid of pseudo-magnificence's name. They also can be mixed with ordinary classes
instance:
A:hyperlink heritage: black; color: white
A:energetic historical past: black; colour: crimson
A:visited historical past: obvious; color: black
<A HREF....>This anchor (or as a substitute these anchors) might be displayed as declared above</A>
A.Foot:link background: black; shade: white
A.Foft:energetic background; black: colour: crimson
A.Foot:visited historical past: obvious; shade: black
<A CLASS=foot HREF....>This anchor and all other anchors with CLASS foot might be displayed as declared above</A>
HTML Interview Questions
Question 25. Can Style Sheets And Html Stylistic Elements Be Used In The Same Document?
Answer :
Yes. Style Sheets might be left out in browsers with out CSS-assist and HTML stylistic factors used.
XHTML Tutorial
Question 26. Can Css Be Used With Other Than Html Documents?
Answer :
Yes. CSS may be used with any ny structured report layout. E.G. XML, but, the technique of linking CSS with different document types has not been decided but.
Question 27. Some Examples Of Good And Bad Coding. What Is Wrong With This?
Answer :
<font size="3">Welcome to my page</font>
Comment: The font-tag is layout and design shouldn’t be within the HTML file. All layout should be within the CSS-record! Instead do that:
In the HTML:
<h1>Welcome to my page</h1>
In the CSS:
h1 font-length: 2em;
One greater instance:
<b>An errors befell</b>
This looks proper doesn’t it? But if you look up what <b> stands for you fast find bold. But bold is truely design, so it still doesn’t belong within the HTML file. A higher preference is <em> that stands for emphasis or surely “this piece of text is essential”. So rather than announcing “this article looks as if this” you're saying “this newsletter is essential” and also you permit the seems be decided through the CSS. Seems like a minor exchange, however it illustrates a way to choose your tags. Use this instead:
In the HTML:
<em>An error occured</em>
In the CSS:
em
font-weight: bold;
coloration: Red;
One final example:
<table>
<tr><td><a href="">first link</a></td></tr>
<tr><td><a href="">2nd hyperlink</a></td></tr>
...
</table>
Dreamweaver Interview Questions
Question 28. How To Use Css To Separate Content And Design?
Answer :
The idea right here is that each one websites comprise primary components, the content material: all your articles, textual content and photos and the design: rounded corners, hues and effects. Usually the ones two are made in unique elements of a webpage’s lifetime. The layout is determined at the start and then you definately start filling it with content and preserve the design constant.
In CSS you simply upload the nifty <link>-tag I’ve instructed you about to the pinnacle of yourHTML document and you have created a link in your layout. In the HTML documentyou put content material best, and that link of yours makes positive it seems right. You also can use the exact identical hyperlink on a lot of your pages, giving them they all the identical layout. You want to feature content? Just write a plain HTML file and consider marking matters up like “header” instead of “massive blue header” and use CSS to make all headers look the way you want!
Question 29. 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?
Answer :
It makes feel in a few conditions, but not in others. For instance, while a childelement is about to width: one hundred%, I don't suppose it should cover the padding of its figure. The container-sizing property in CSS3 addresses this issue. Ideally, the issue must had been addressed earlier, though.
Question 30. Why Call The Subtended Angle A Pixel, Instead Of Something Else (e.G. Subangle)?
Answer :
In most instances, a CSS pixel can be identical to a tool pixel. But, as you factor out, the definition of a CSS pixel will on occasion be different. For instance, on a laser printer, one CSS pixel can be identical to 3x3 tool pixels to keep away from printing illegibly small textual content and images. I do not recall all people ever proposing some other name for it. Subangle? Personally, I think most people could decide on the pragmatic "px" to the non-intuitive "sa".
Question 31. How Do I Eliminate The Blue Border Around Linked Images?
Answer :
in your CSS, you may specify the border property for connected images:
a img border: none ;
However, note that eliminating the border that shows an image is a link makes it more difficult for customers to distinguish speedy and effortlessly which images on a web page are clickable.
Question 32. Which Set Of Definitions, Html Attributes Or Css Properties, Take Precedence?
Answer :
CSS homes take priority over HTML attributes. If each are particular, HTML attributes can be displayed in browsers with out CSS help however may not have any effect in browsers with CSS assist.
Question 33. What Are Inline, Block, Parent, Children, Replaced And Floating Elements?
Answer :
Inline factors which do not have line breaks. Can occur in block factors or different inline elements, can not contain block elements.
Inline factors 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 factors in HTML four.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 factors in HTML 4.Zero 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
factors which do have line breaks. May occur in different block elements, cannot arise in inline elements, may comprise both block and inline factors.
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.Zero; 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 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 youngsters elements which both incorporate (parents) or are within the content of (children) different elements, e.G. <P>text<STRONG>text</STRONG>textual content</P>. P is a discern of STRONG. STRONG is a infant of P. If no longer distinctive in any other case, children will inherit figure's homes.
Replaced elements which content material is replaced. For example content material of the IMG detail is replaced with an photograph, content of the INPUT element is update with a discipline.
Floating
elements which comply with the glide of a figure - inline elements.
UI Developer Interview Questions
Question 34. How Do I Have A Fixed (non-scrolling) Background Image?
Answer :
With CSS, you may use the history-attachment assets. The backgroundattachment can be blanketed inside the shorthand history belongings, as in this situation:
body
background: white url(example.Gif) fixed ;
coloration: black ;
Note that this CSS is supported through Internet Explorer, Mozilla, Firefox Opera, Safari, and other browsers. In evaluation, Microsoft's proprietary BGPROPERTIES attribute is supported best with the aid of Internet Explorer.
Question 35. What Is A Style Sheet?
Answer :
Style sheets are the way that requirements-compliant Web designers outline the format, appearance-and-sense, and layout of their pages. They are referred to as Cascading Style Sheets or CSS. With style sheets, a designer can outline many components of a Web web page:
* fonts
* colorings
* layout
* positioning
* imagery
* accessibility
Style sheets provide you with a lot of power to define how your pages will appearance. And any other remarkable thing about them is that fashion sheets make it in reality smooth to replace your pages whilst you want to make a brand new layout. Simply load in a new style sheet onto your pages and you are accomplished.
Question 36. What Is Inline Style? How To Link?
Answer :
Inline fashion is the fashion connected to 1 specific element. The style is distinctive directly within the start tag as a fee of the STYLE attribute and could practice solely to this precise detail prevalence.
<P STYLE="text-indent: 10pt">Indented paragraph</P>
CSS Interview Questions
Question 37. Why Do Style Sheets Exist?
Answer :
SGML (of which HTML is a derivative) turned into supposed to be a tool-unbiased technique for conveying a file's structural and semantic content (its meaning.) It became by no means meant to deliver bodily formatting statistics. HTML has crossed this line and now incorporates many elements and attributes which specify visible style and formatting information. One of the main reasons for style sheets is to forestall the advent of new HTML physical formatting constructs and yet again separate style facts from report content material.
Question 38. What Are Style Sheets?
Answer :
Style Sheets are templates, very just like templates in laptop publishing programs, containing a collection of rules declared to diverse selectors(factors).
Question 39. What Is Css Rule Ruleset?
Answer :
There are types of CSS policies: ruleset and at-rule. Ruleset identifies selector orselectors and declares style which is to be attached to that selector or selectors. For instance P textual content-indent: 10pt is a CSS rule. CSS rulesets encompass parts:selector, e.G. P and announcement,
e.G. Textual content-indent: 10pt.
P text-indent: 10pt - CSS rule (ruleset)
textual content-indent: 10pt - CSS statement
text-indent - CSS assets
10pt - CSS fee
Question 40. What Is Embedded Style? How To Link?
Answer :
Embedded fashion is the fashion connected to one specific document. The style statistics is detailed as a content material of the STYLE element in the HEAD detail and will follow to the entire file.
The Pack contains almost 14 plus software program . Pick the only that's proper for you Make your PC more useful. Get the loose Google Pack.
<HEAD>
<STYLE TYPE="text/css">
<!--
P text-indent: 10pt
-->
</STYLE>
</HEAD>
Note: The styling rules are written as a HTML remark, that is, among <!-- and --> to cover the content in browsers with out CSS aid which could otherwise be displayed.
WordPress Interview Questions
Question 41. What Is Id Selector?
Answer :
ID selector is an individually recognized (named) selector to which a particular fashion is said. Using the ID attribute the declared style can then be associated with one and handiest one HTML element per record as to differentiate it from all different factors. ID selectors are created by a man or woman # observed by the selector's call. The name can contain characters a-z, A-Z, digits 0-nine, period, hyphen, escaped characters, Unicode characters 161-255, in addition to any Unicode characteras a numeric code, but, they cannot start with a sprint or a digit.
#abc123 coloration: purple; history: black
<P ID=abc123>This and most effective this element may be diagnosed as abc123 </P>
