A list of top frequently asked CSS interview questions and answers are given below.

These CSS Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of CSS Language.

If there is any new CSS interview question that have been asked to you, kindly post it in the the comment section.

 

 

1.What Is The Difference Between Id And Class?

Ans:

ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements.

2. Can I Include Comments In My Style Sheet?

Ans:

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.

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

Ans:

Quite a bit actually. Style sheets only specify information that controls display and rendering information. Virtual style elements that convey the NATURE of the content can not be replaced by style sheets, and hyperlinking and multimedia object insertion is not a part of style sheet functionality at all (although controlling how those objects appear IS part of style sheets functionality.) The CSS1specification has gone out of its way to absorb ALL of the HTML functionality used in controlling display and layout characteristics. For more information on the possible properties 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 by stylesheets.

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

Ans:

The simple answer is, you can’t, and you shouldn’t waste your time trying to make it exactly the same. Web browsers are allowed, per definition, to interpret a page as they like, subject to the general rules set down in the HTML and CSS specifications. As a web author you can not have a prior knowledge of the exact situation and/or medium that will be used to render your page, and it’s almost always rather counterproductive to try to control that process. There is no necessity for a well-written page to look the same in different browsers. You may want to strive to ensure that it looks good in more than one browser, even if the actual display (in the case of graphical browsers) comes out a bit different. “Looking good” can be achieved by adopting sensible design and guidelines, such as not fixing the size or face of your fonts, not fixing the width of tables, etc… Don’t fight the medium; most web users only use one browser and will never know, or bother to find out, that your page looks different, or even “better”, in any other browser.

5. What Are Pseudo-elements?

Ans:

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.

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

Ans:

You can help with this by setting properties in recommended places. Style rules that apply to the whole document should be set in the BODY element — and only there. In this way, the user can easily modify document-wide style settings.

7. What Is Property?

Ans:

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.

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

Ans:

Many of the recent extensions to HTML have been tentative and somewhat crude attempts to control document layout. Style sheets go several steps beyond, and introduces complex border, margin and spacing control to most HTML elements. It also extends the capabilities introduced by most of the existing HTML browser extensions. Background colors or images can now be assigned to ANY HTMLelement instead of just the BODY element and borders can now be applied to anyelement instead of just to tables. For more information on the possible properties in CSS, see the Index DOT Css Property Index.

9. Why Is My External Stylesheet Not Working ?

Ans:

There may be several different reasons behind that, but one very common mistake is to have an external stylesheet that contains HTML markup in some form.
An external stylesheet must contain only CSS rules, and if required, correctly formed CSS comments; never include any HTML syntax, such as

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

Ans:

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.



 

11. Styles Not Showing?

Ans:

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

12. Are Style Sheets Case Sensitive?

Ans:

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.

13. What Is Cascade?

Ans:

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

Declarations with increased weight take precedence over declaration with normal weight:
P {color: white ! important} /* increased weight */
P (color: black} /* normal weight */

14. What Is Important Declaration?

Ans:

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.

15. What Is Css Declaration?

Ans:

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.

16. What Is Class Selector?

Ans:

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.

17. What Is Selector?

Ans:

CSS selector is equivalent of HTML element(s). It is a string identifying to which element(s) the corresponding declaration(s) will apply and as such the link between the HTML document and the style sheet.
For example in P {text-indent: 10pt} the selector is P and is called type selector as it matches all instances of this element type in the document.
in P, UL {text-indent: 10pt} the selector is P and UL (see grouping); in .class {text-indent: 10pt} the selector is .class (see class selector).

18. What Is Css Rule At-rule ?

Ans:

There are two types of CSS rules:
ruleset and at-rule. At-rule is a rule that applies to the whole style sheet and not to a specific selector only (like in ruleset). They all begin with the @ symbol followed by a keyword made up of letters a-z, A-Z, digits 0-9, dashes and escaped characters, e.g. @import or @font-face.

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

Ans:

Style Sheets allow style information to be specified from many locations. Multiple (partial) external style sheets can be referenced to reduce redundancy, and both authors as well as readers can specify style preferences.
In addition, three main methods can be employed by an author to add style information to HTML documents, and multiple approaches for style control are available in each of these methods. In the end, style can be specified for a single element using any, or all, of these methods.

20. Why Use Style Sheets?

Ans:

Style sheets allow a much greater degree of layout and display control than has ever been possible thus far in HTML. The amount of format coding necessary to control display characteristics can be greatly reduced through the use of external style sheets which can be used by a group of documents. Also, multiple style sheetscan be integrated from different sources to form a cohesive tapestry of styles for a document. Style sheets are also backward compatible – They can be mixed with HTML styling elements and attributes so that older browsers can view content as intended.




 

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

Ans:

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.

 

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

Ans:

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

  • Open the Registry editor (Start..Run..regedit..ENTER)
  • Under the ‘HKEY_LOCAL_MACHINESoftwareMicrosoftInternetExplorerStyles’ key, Edit..New..String Value
  • The new value should be called ‘StyleSheet Pathname’
  • For the value, type in the full directory path of your .css style sheet.

Internet Explorer 4.0 (Win95/NT)

  • Under the View menu, select ‘Internet Options’.
  • Under the ‘General’ tab, choose the ‘Accessibility’ button.
  • Choose the ‘Format documents using my style sheet’ check box and ‘Browse…’ to the location of your .css style sheet.

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

Ans:

Existing HTML style methods (such as and ) 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 sheetsspecifications can control the appearance of these elements in browsers that support CSS1.

24. What Are Pseudo-classes?

Ans:

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. 

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

Ans:

Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.

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

Ans:

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.

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

Ans:

Welcome to my page
Comment: The font-tag is design and design shouldn’t be in the HTML document. All design should be in the CSS-file.
But if you look up what stands for you quickly find bold. But bold is certainly design, so it still doesn’t belong in the HTML document. A better choice is that stands for emphasis or simply “this piece of text is important”. So instead of saying “this text looks like this” you are saying “this text is important” and you let the looks be decided by the CSS. Seems like a minor change, but it illustrates how to select your tags. Use this instead:

In the CSS:

em {
font-weight: bold;
color: Red;
}
 

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

Ans:

The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage’s lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed.
In CSS you just add the nifty < link>-tag I’ve told you about to the head of yourHTML document and you have created a link to your design. In the HTML documentyou put content only, and that link of yours makes sure it looks right. You can also use the exact same link on many of your pages, giving them all of them the same design. You want to add content? Just write a plain HTML document and think about marking things up like “header” instead of “big blue header” and use CSS to make all headers look the way you want.

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?

Ans:

It makes sense in some situations, but not in others. For example, when a childelement is set to width: 100%, I don’t think it should cover the padding of its parent. The box-sizing property in CSS3 addresses this issue. Ideally, the issue should have been addressed earlier, though.

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

Ans:

In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3×3 device pixels to avoid printing illegibly small text and images. I don’t recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic “px” to the non-intuitive “sa”.


 

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

Ans:

in your CSS, you can specify the border property for linked 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.

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

Ans:

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.

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

Ans:

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.

texttexttext

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

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

Ans:

With CSS, you can use the background-attachment property. The backgroundattachment 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.

35. What Is A Style Sheet?

Ans:

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.

36. What Is Inline Style? How To Link?

Ans:

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.

37. Why Do Style Sheets Exist?

Ans:

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.

38. What Are Style Sheets?

Ans:

Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors(elements).

39. What Is Css Rule Ruleset?

Ans:

There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector orselectors 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

40. What Is Embedded Style? How To Link?

Ans:

Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.
The Pack contains nearly 14 plus software . Pick the one which is suited for you Make your PC more useful. Get the free Google Pack.

Note: The styling rules are written as a HTML comment, that is, between to hide the content in browsers without CSS support which would otherwise be displayed.



 

41. What Is Id Selector?

Ans:

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 characteras a numeric code, however, they cannot start with a dash or a digit.

42. What are the three main ways to add CSS to a webpage? Describe the advantages and disadvantages of each method.

Ans:

There are three ways to apply CSS to a webpage—inline, embedded, and as an external style sheet. The three approaches along with their pros and cons are described below.

Inline CSS can be written directly into the HTML elements as a style attribute. The primary advantage of inline CSS is the ability to override other style specifications in the single instance of an HTML element that it is applied to. However, this is only feasible if there are a small number of style definitions. It is generally better to use embedded or external style sheets for more complex styles.
External style sheets allow the developer to separate style from content, and control multiple HTML documents from a single separate file, making it easy to style the entirety of a site with a single document. It enables complex styling through classes, selectors, and other grouping methods. The disadvantage of an external CSS file is that it must be downloaded first for the HTML file to be properly rendered.

Embedded CSS can be written within the

43. What are CSS media queries and what are they used for?

Ans:

CSS media queries are the filters that make responsive web design (RWD) possible. With the introduction of laptops, tablets, and smartphones with screens of varying sizes and aspect ratios, RWD is crucial for modern day app development. CSS media queries adjust content style based on device characteristics like width, height, orientation, resolution, and display type. When used properly, the end result is a website or app capable of providing a sleek UI/UX across multiple devices.

44. What is a CSS preprocessor? Would you recommend using one for this project?

Ans:

A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors—try asking the developer which one they prefer more. Selecting a preprocessor really boils down to preference, and it can be revealing to see how a particular developer might decide to use one over the other for your project.

45. List the basic layout components of the CSS box model with a brief description for each.

Ans:

In many ways, front-end web design is all about managing rectangles, and the CSS box model provides a layout paradigm for HTML elements that you can use to structure a webpage. The basic components are described below.

border: The border surrounding the padding.
content: Any text or images within the box.
margin: The transparent area surrounding borders.
padding: The transparent area surrounding content.

46. How would you implement the basic layout components of the box model in CSS? Give an example.

Ans:

Each element of the box model—border, content, margin, and padding—can be specified independently for each side of the element by listing dimensions in the following order: top, bottom, right, and left. Alternatively, multiple sides can be specified as a group by listing fewer parameters. An example has been provided below.

margin: 50px 100px 100px 50px;
/* Sets the top, right, bottom and left margins */

margin: 25px;
/* Sets the margin on all sides */

padding: 50px 100px;
/* Sets the top/bottom margin as a group and the right/left margin as a group */

47. Describe the following common CSS units of length: cm, em, in, mm, pc, pt, and px.

Ans:

There are many ways to express units of length within CSS, but these are just some of the more common ones.

cm: centimeters
em: a relative unit of measurement based on the size of a font
in: inches
mm: millimeters
pc: pica, a unit of length equivalent to 12 points, or 1/6 of an inch
pt: 1/72 of an inch
px: a device-specific relative measurement equivalent to a certain number of pixels on a display

49. What are CSS vendor prefixes? Can you name some of the more common ones that you’re familiar with?

Ans:

Depending on your project, you might be looking for a CSS developer who can take advantage of experimental non-standard features that are only available on certain platforms. Vendor prefixes are extensions to CSS standards that can be added to these features to prevent incompatibilities from arising when the standard is extended. CSS vendor prefixes for some common platforms are listed below.

webkit-: Android, Chrome, iOS, and Safari
moz-: Mozilla Firefox
ms-: Internet Explorer
o-: Opera

50. How do you define a pseudo class in CSS? What are they used for?

Ans:

You can define a pseudo class by listing the selector followed by a colon and finally the pseudo class element. Pseudo classes can be used to give elements special states—the most common example being a:hover, which is used to change the color of a link when a mouse hovers over it. Other uses include using distinct styling for visited and unvisited links and styling an element differently when focused.




 

51. How would you select all the PDF links in the code block below with a single line of code?

Ans:

<body>

< p>< a href="default.asp" target="_blank">This is a link</a></p>
< p>< a href="mydocument.pdf" target="_blank">This is a PDF</a></p>
< p>< a href="default.asp" target="_blank">This is a link</a></p>
< p>< a href="mydocument.pdf" target="_blank">This is a PDF</a></p>

</body>

A big part of CSS is selecting and stylizing particular elements on a page. This question tests a developer’s knowledge of attribute selectors. All the elements of interest on the page happen to be links, but not all links are linking to PDFs. In CSS you can target the ending of the PDF link “.pdf” to quickly select all the PDF files by using the [attribute$=”value”] selector, which selects elements whose value ends with a specified value. In this case, we can use a[href$=“.pdf”] to select all PDF links.

52. What is CSS ?

Ans:

The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

53. What is the origin of CSS ?

Ans:

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

54. What are the different variations of CSS ?

Ans:

The variations for CSS are:

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4

55. What are the limitations of CSS ?

Ans:

Limitations are:

  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible

56. What are the advantages of CSS ?

Advantages are:

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

57. What are CSS frameworks?

Ans:

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.

58. How block elements can be centered with CSS1?

Ans:

Block level elements can be centered by:
The margin-left and margin-right properties can be set to some explicit value:

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

In this case, the left and right margins will be each, five ems wide since they split up the ten ems left over from (40em-30em). It was unnecessary for setting up an explicit width for the BODY element; it was done here for simplicity.

59. Who maintains the CSS specifications?

Ans:

World Wide Web Consortium maintains the CSS specifications.

60. In how many ways can a CSS be integrated as a web page?

Ans:

CSS can be integrated in three ways:
Inline: Style attribute can be used to have CSS applied HTML elements.
Embedded: The Head element can have a Style element within which the code can be placed.
Linked/ Imported: CSS can be placed in an external file and linked via link element.


 

61. What benefits and demerits do External Style Sheets have?

Ans:

Benefits:

  • One file can be used to control multiple documents having different styles.
  • Multiple HTML elements can have many documents, which can have classes.
  • To group styles in composite situations, methods as selector and grouping are used.

Demerits:

  • Extra download is needed to import documents having style information.
  • To render the document, the external style sheet should be loaded.
  • Not practical for small style definitions.

62. Discuss the merits and demerits of Embedded Style Sheets?

Ans:

Merits of Embedded Style Sheets:

  • Multiple tag types can be created in a single document.
  • Styles, in complex situations, can be applied by using Selector and Grouping methods.
  • Extra download is unnecessary.

Demerits of Embedded Style Sheets:

  • Multiple documents cannot be controlled.

63. What does CSS selector mean?

Ans:

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

64. Enlist the media types CSS allows?

Ans:

The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.

65. Differentiate logical tags from physical tags?

Ans:

While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
Physical tags are newer versions while logical tags are old and concentrate on content.

66. Differentiate Style Sheet concept from HTML?

Ans:

While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.

67. Describe ‘ruleset’?

Ans:

Ruleset : Selectors can be attached to other selectors to be identified by ruleset.
It has two parts:

  • Selector, e.g. R and
  • declaration {text-indent: 11pt}

68. Comment on the Case-sensitivity of CSS ?

Ans:

Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.

69. Define Declaration block?

Ans:

A catalog of directions within braces consisting of property, colon and value is called declaration block.
e.g.: [property 1: value 3]

70. Enlist the various fonts’ attributes?

Ans:

They are:

  • Font-style
  • Font-variant
  • Font-weight
  • Font-size/line-height
  • Font-family
  • Caption
  • Icon


 

71. Why is it easy to insert a file by importing it?

Ans:

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:
@import notation, used with

72. What is the usage of Class selector?

Ans:

Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. 

73. Differentiate Class selector from ID selector?

Ans:

While an overall block is given to class selector, ID selector prefers only a single element differing from other elements. In other words, ID are uniques while classes are not. Its possible that an element has both class and ID.

74. Can more than one declaration be added in CSS?

Ans:

Yes, it can be achieved by using a semicolon.

75. What is Pseudo-elements ?

Ans:

Pseudo-elements are used to add special effects to some selectors. CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

76. How to overrule underlining Hyperlinks?

Ans:

Control statements and external style sheets are used to overrule underlining Hyperlinks.

77. What happens if 100% width is used along with floats all across the page?

Ans:

While making the float declaration, 1 pixel is added every time it is used in the form of the border, and even more float is allowed thereafter.

78. Can default property value be restored through CSS? If yes, how?

Ans:

In CSS, you cannot revert back to old values due to lack of default values. The property can be re- declared to get the default property.

79. Enlist the various Media types used?

Ans:

Different media has different properties as they are case insensitive.
They are:
Aural – for sound synthesizers and speech
Print – gives a preview of the content when printed
Projection– projects the CSS on projectors.
Handheld– uses handheld devices.
Screen– computers and laptop screens.

80. What is CSS Box Model and what are its elements?

Ans:

This box defines design and layout of elements of CSS. The elements are:
Margin: the top most layer, the overall structure is shown
Border: the padding and content option with a border around it is shown. Background color affects the border.
Padding: Space is shown. Background colour affects the border.
Content: Actual content is shown.




 

81. What is contextual selector?

Ans:

Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For e.g.: TD P TEXT {color: blue}

82. Compare RGB values with Hexadecimal color codes ?

Ans:

A color can be specified in two ways:

  • A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #.
    e.g.: g {color: #00cjfi}
  • A color is represented by a mixture of red, green and blue. The value of a color can also be specified. e.g.: rgb(r,g,b): In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown.

83. Define Image sprites with context to CSS ?

Ans:

When a set of images is collaborated into one image, it is known as ‘Image Sprites’. As the loading every image on a webpage consumes time, using image sprites lessens the time taken and gives information quickly.
CSS coding:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; } 

In this case, only the part needed is used. The user can save substantial margin and time through this.

84. Compare Grouping and Nesting in CSS ?

Ans:

Grouping: Selectors can be grouped having the same values of property and the code be reduced.
E.g. :

h1 {
color: blue;
}
h2 {
color: blue;
}
p {
color: blue;
}

It can be seen from the code that every element shares the same property. Rewriting can be avoided by writing each selector separated by a comma.
Nesting: Specifying a selector within a selector is called nesting.

P 
{
color: red;
text-align: left;
}
.marked
{
background-color: blue;
}
.marked p
{
color: green;
}

85. How can the dimension be defined of an element ?

Ans:

Dimension properties can be defined by:

  • Height
  • Max-height
  • Max-width
  • Min-height
  • Min-width
  • Width

86. Define float property of CSS?

Ans:

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties.

87. How does Z index function?

Ans:

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

88. What is graceful degradation?

Ans:

In case the component fails, it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.

89. What is progressive enhancement?

Ans:

It’s an alternative to graceful degradation, which concentrates on the matter of the web. The functionality is same, but it provides an extra edge to users having the latest bandwidth. It has been into prominent use recently with mobile internet connections expanding their base.

90. How can backward compatibility be designed in CSS?

Ans:

HTML sheet methods is collaborated with CSS and used accordingly.


 

91. How can the gap under the image be removed?

Ans:

As images being inline elements are treated same as texts, so there is a gap left, which can be removed by:
CSS

img { display: block ; }

92. Why is @import only at the top?

Ans:

@import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.

93. Which among the following is more precedent: CSS properties or HTML procedures?

Ans:

CSS is more precedent over HTML procedures. Browsers, which do not have CSS support, display HTML attributes.

94. What is Inline style?

Ans:

The Inline style in a CSS is used to add up styling to individual HTML elements.

95. How comments can be added in CSS?

Ans:

The comments in CSS can be added with /* and */.

96. Define Attribute Selector ?

Ans:

It is defined by a set of elements, value and its parts.

97. Define property?

Ans:

A style, that helps in influencing CSS. E.g. FONT. They have corresponding values or properties within them, like FONT has different style like bold, italic etc.

98. What is Alternate Style Sheet?

Ans:

Alternate Style Sheets allows the user to select the style in which the page is displayed using the view>page style menu. Through Alternate Style Sheet, user can see a multiple version of the page on their needs and preferences.

99. Are quotes mandatory in URL’s?

Ans:

Quotes are optional in URL’s, and it can be single or double.

100. What is at-rule?

Ans:

Rule, which is applicable in the entire sheet and not partly, is known as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.



 

101. How can CSS be cascaded to mix with user’s personal sheet?

Ans:

Properties can be a set in recommended places and the document modified for CSS to mix with user’s personal sheet.

102. What does float do?

Ans:

float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none or inherit.

if you set, ‘float: left;’ for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.

103. How can you clear sides of a floating element?

Ans:

If you clear a slide of an element, floating elements will not be accepted on that side. With ‘clear’ set to ‘left’, an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.

104. What will this selector do?

[role=navigation] > ul a:not([href^=mailto]) {

}

Ans:

This selects anchor links that are not email links that are decedents of an unordered list that is the direct child of any element with a role attribute of ‘navigation’. this answer copied from css tricks

105. Does css properties are case sensitive?

Ans:

no.

106. Why css selectors mixed up with cases don’t apply the styles?

Ans:

because, html ID and classes are case sensitive.

107. Does margin-top or margin-bottom has effect on inline element?

Ans: no.

108. Does padding-top or padding-bottom has effect on inline element?

Ans: no.

109. Does padding-left or padding-right or margin-left or margin-right has effect on inline element?

Ans: yes.




 

110. The translate() function can move the position of an element on the z-axis.

Ans: False

111. Which one would you prefer among px, em % or pt and why?

Ans:

it depends on what you are trying to do.
px gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px.
em maintains relative size. you can have responsive fonts. em is the width of the letter ‘m’ in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade
% sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.
pt(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.

112. How absolute, relative, fixed and static position differ?

Ans:

absolute, place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent available then relatively place to the page itself.
relative, is position an element relative to itself (from where the element would be placed, if u don’t apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally.
fixed, element is positioned relative to viewport or the browser window itself. viewport doesn’t changed if u scroll and hence fixed element will stay right in the same position.
static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.

113. What are the differences between visibility hidden and display none?

Ans:

display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn’t show it.
if u want to say it smartly, display: none causes DOM reflow where is visibility: hidden doesn’t. btw, what is re-flow? answer. sorry i wont tell you, google it.

114. What are the differences between inline, block and inline-block?

Ans:

inline, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignores height and width.
block, breaks the flow and dont sits inline. they are usually container like div, section, ul and also text p, h1, etc.
inline-block, will be similar to inline and will go with the flow of the page. Only differences is this this will take height and width.

115. What are the properties related to box model?

Ans:

Technically, height, width, padding and border are part of box model and margin is related to it.

116. Does overflow: hidden create a new block formatting context?

Ans: yes

117. How could you apply css rules specific to a media?

Ans:

@media (max-width: 700px){…} means you want to apply rules to those media whose max-width is 700 px. this means every smaller device will have this rule.
@media (max-width: 700px) and (orientation: landscape){…} will apply rules for media smaller than 700px and in landscape orientation.


 

118. What is the use of only?

Ans:

to hide style sheets from older user agents.

119. Does the screen keyword apply to the device’s physical screen or the browser’s viewport?

Ans:

Browser’s Viewport

120. What are the some pseudo classed u have used?

Ans:

pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is :hover. Besides i have used :visited, :focus, :nth-child, nth-of-type, :link, etc.
pseudo classes is better if you don’t want to mess up with javaScript however, pseudo-classes is slow to process and apply rules.
pseudo elements
pseudo elements helps you to add cosmetics contents. pseudo elements generates content where as pseudo class deals with state of the element. for example, you can style :first-letter of every paragraph. similarly, :first-line and fancy stuff with :before, :after

121. How do you align a p center-center inside a div?

Ans:

text-align: centerwill do the horizontal alignment but vertical-align: middle will not work here. there are couple of different ways to solve this problem and one of them are positioning. You make the parent as relative position and child as absolute positioning. And then define all position parameter as sero and width 50% and height 30% (sounds messy look at the example and read ref)

122. How do you optimize css selectors?

Ans:

This is very open and depend on what you are trying to achieve. If i order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant.
The best practices in general are: avoid universal selectors, don’t repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.

123. How can you load css resources conditionally?

Ans:

@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.

124. Why would you use sprites?

Ans:

When you have multiple images/ icons, browser makes separate call to the server for each one of them. sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. To display the icon you set height, width and background position.
popular libraries like bootstrap use this technique. If you repeat the image. want to scale you have to be careful with sprite.

125. What is specificity? How do u calculate specificity?

Ans:

is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence.
inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity.

126. What is shadow DOM?

Ans:

encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.

127. What do you know about transition?

Ans:

transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation



 

128. What are the different css filter you can use?

Ans:

css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.

129. What are the reasons to use preprocessor?

Ans:

you write css in high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.