Top 50+ CSS Interview Questions & Answers in 2020 [UPDATED]
CSS Interview Questions and Answers

Top 50+ CSS Interview Questions & Answers [UPDATED]

Last updated on 03rd Jul 2020, Blog, Interview Questions

About author

Nandhakumar (Sr Technical Manager )

(5.0) | 16547 Ratings 841

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. As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.

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. As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.we are going to cover top 100 CSS Interview questions along with their detailed answers. We will be covering CSS scenario based interview questions, CSS interview questions for freshers as well as CSS interview questions and answers for experienced. 

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

Q2. What is the origin of CSS ?

Ans:

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

Q3. What are the different variations of CSS ?

Ans:

The variations for CSS are:

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

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

Q5. What are the advantages of CSS ?

Ans:

Advantages are:

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

Q6. What are CSS frameworks?

Ans:

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

Q7. How block elements can be centered with CSS1?

Ans:

Block level elements can be centered by:

block-elements-centered-CSS

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.

Q8. Who maintains the CSS specifications?

Ans:

World Wide Web Consortium maintains the CSS specifications.

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

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

Q11. Why background and color are the separate properties if they should always be set together?

Ans:

There are two reasons behind this:

It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase.

Color is an inherited property while the background is not. So this can make confusion further.

Q12. What is the use of CSS Opacity?

Ans:

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object.

 For example:

Q13. Explain universal selector.

Ans:

The universal selector matches the name of any of the element type instead of selecting elements of a specific type.

  • <style>    
  • * {    
  •    color: green;    
  •    font-size: 20px;    
  • }     
  • </style>   

Q14.Which command is used for the selection of all the elements of a paragraph?

Ans:

The p[lang] command is used for selecting all the elements of a paragraph.

Q15. What is the use of % unit?

Ans:

It is used for defining percentage values.

Q16. Name the property used to specify the background color of an element.

Ans:

The background-color property is used to specify the background color of the element.

 For example:

  • <style>    
  • h2,p{    
  •     background-color: #b0d4de;    
  • }    
  • </style>  

Q17. Name the property for controlling the image repetition of the background.

Ans:

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

  • <style>    
  • body {    
  • background-image: url(“paper1.gif”);    
  • margin-left:100px;    
  • }    
  • </style>

 Q18. Name the property for controlling the image position in the background.

Ans:

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  • center
  • top
  • bottom
  • left
  • right
  • background: white url(‘good-morning.jpg’);  
  • background-repeat: no-repeat;  
  • background-attachment: fixed;  
  • background-position: center;  

Q19.Name the property for controlling the image scroll in the background.

Ans:

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image, then the image not move during scrolling in the browser. Let’s take an example with the fixed background image.

  • background: white url(‘bbb.gif’);  
  • background-repeat: no-repeat;  
  • background-attachment: fixed; 

Q20. What is RWD?

Ans:

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don’t need to create a different page for each device.

    Subscribe For Free Demo

    Q21.Distinguish between CSS2 and CSS3.

    Ans:

    The differences between CSS2 and CSS3 are as follows:

    • CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
    • CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
    • In CSS3, we will find that many graphics related characteristics have been introduced like Border-radius or box-shadow, flexbox.
    • In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

     Q22. What is the full form of CSS? 

    Ans:

    CSS stands for Cascading Style Sheets. It is a technology developed by the World Wide Web Consortium or W3C. It was developed to streamline the styling of webpages into a separate technology.

    Q23. Why was CSS developed?

    Ans:

    CSS was first developed in 1997 as a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow developers to separate the content and structure of a website’s code from the visual design, something that had not been possible prior to this time.

    The separation of structure and style allows HTML to perform more of the function that it was originally based on — the markup of content, without having to worry about the design and layout of the page itself, something commonly known as the “look and feel” of the page.

    Q24.Write all the properties of the flexbox.

    Ans:

    There are several properties of the flexbox that are used in the HTML webpage.

    They are:

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    Q25. What are the different ways you could integrate CSS into your HTML page?

    Ans:

    There are three ways that you could integrate a certain CSS style:

    You can integrate your style using the style-tags in the head section of your HTML page.

    You can integrate your style using inline-styling.

    You can write your CSS in a separate file and add it to your HTML page using the link tag.

    Q26. What is the meaning of cascading? How do style sheets cascade?

    Ans:

    CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. This was changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:

    • Elements –  The same CSS style can be applied to multiple elements to achieve the same style.
    • Multiple Style One Element – Multiple styles can be applied to a particular HTML element to achieve a unique style.
    • Same style, Multiple Pages – The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.

    Q27. What are the ways to assign a certain colour to an element in CSS?

    Ans:

    CSS can assign a wide range of colours to elements using different notations. There are three notations as of now that are used that are explained below:

    • Hexadecimal notation

    A colour in hexadecimal string notation always begins with the character “#”. After that, the hexadecimal digits of the colour code is written. The string is case-insensitive.

    • RGB functional notation

    RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colours using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the colour is defined using the CSS function RGB(). This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

    • HSL functional notation

    Designers and artists often prefer to work using the HSL (Hue/Saturation/Luminosity) colour method. On the web, HSL colours are represented using HSL functional notation. The HSL() CSS function is very similar to the RGB() function in usage otherwise.

    Q28. Explain the CSS Box Model.

    Ans:

    The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas.

    Q29. What is the z-index in CSS? 

    Ans:

    The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

    An element with a higher z-index is always stacked above than a lower index.

    Z-Index can take the following values:

    • Auto: Sets the stack order equal to its parents.
    • Number: Orders the stack order.
    • Initial: Sets this property to its default value (0).
    • Inherit: Inherits this property from its parent element.

    Q30. What are CSS Sprites? 

    Ans:

    CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). This is how you could implement it:

    • Use a sprite generator that packs multiple images into one and generates the appropriate CSS for it.
    • Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
    • To use that image, add the corresponding class to your element.

    What is type selector?

    Type selector quite simply matches the name of an element type.

     To give a color to all level 1 headings −

    • h1 {
    •    color: #36CFFF; 
    • }
    Course Curriculum

    Learn On-Demand CSS Training Course from Real Time Experts

    Weekday / Weekend BatchesSee Batch Details

    Q31.What is universal selector?

    Ans:

    Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type −

    •    color: #000000; 
    • }

    This rule renders the content of every element in our document in black.

    Q32.What is Descendant Selector?

    Ans:

    Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

    • ul em {
    •    color: #000000; 
    • }

    Q33.What is class selector?

    Ans:

    You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

    • .black {
    •    color: #000000; 
    • }

    This rule renders the content in black for every element with class attribute set to black in our document.

    Q34.Can you make a class selector particular to an element type?

    Ans:

    You can make it a bit more particular.

    For example −

    • h1.black {
    •    color: #000000; 
    • }

    This rule renders the content in black for only <h1> elements with class attribute set to black.

    Q35.What is id selector?

    Ans:

    You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

    • #black {
    •    color: #000000; 
    • }

    This rule renders the content in black for every element with id attribute set to black in our document.

    Q36.Can you make a id selector particular to an element type?

    Ans:

    you can make it a bit more particular. For example −

    • h1#black {
    •    color: #000000; 
    • }

    This rule renders the content in black for only <h1> elements with id attribute set to black.

    Q37.What is a child selector?

    Ans:

    Consider the following example −

    • body > p {
    •    color: #000000; 
    • }

    This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.

    Q38.What is an attribute selector?

    Ans:

    You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text −

    • input[type = “text”] {
    •    color: #000000; 
    • }

    The advantage to this method is that the <input type = “submit” /> element is unaffected, and the color applied only to the desired text fields.

    Q39.How to select all paragraph elements with a lang attribute?

    Ans:

    p[lang] : Selects all paragraph elements with a lang attribute.

    Q40.How to select all paragraph elements whose lang attribute has a value of exactly “fr”?

    Ans:

    p[lang=”fr”] – Selects all paragraph elements whose lang attribute has a value of exactly “fr”.

    Q41.How to select all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“?

    Ans:

    p[lang|=”en”] – Selects all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“.

    Q42.How to use external style sheets?

    Ans:

    External style sheets will be used to refer the style information from the external file. In HTML document this can be used to refer in the <HEAD> section like below –

    • <Head> 
    •  <Link rel=”stylesheet” href=”/MyTestStyle.css” type=”text/css”> 

    Q43. Is CSS a case-sensitive or case-insensitive?

    Ans:

    CSS is case insensitive.

    Q44. Which property will be used for changing the face of font in CSS?

    Ans:

    “font family” property can be used for changing the face of font.

    Q45.How to use grouping in CSS?

    Ans:

    Grouping is mainly used for applying css style for multiple HTML elements and this can be done with single declaration. Example given below is the example of the grouping –

    • h2, h3 
    •  color: #FFFFFF; 
    • }

    Q46.What is the to use “float” property in CSS?

    Ans:

    Float property is used to allow an HTML element to be positioned horizontally. Float property can take the values either “left” or “right”. For example,

    • h1, h2
    • {
    •  float: right; 
    • }

    Q47.Which property is used to control the position in the background for image?

    Ans:

    “background-position” property can be used for controlling the position of the image in background.

    Q48.Mention the property name which is used for making the font oblique in CSS?

    Ans:

    “font-style” property can be used for making the font oblique.

    Q49. List out the media types in CSS?

    Ans:

    Below are the list of media types in CSS –

    • All
    • Screen
    • Print
    • Projection
    • Embossed
    • Tty
    • Tv

    Q50. How do you write a conditional statement in CSS? Give an example.

    Ans:

    Below is the example of writing a conditional statement in CSS –

    • <style type=”text/css”>
    • body
    • {
    •  color: #00BFFF;
    • }
    • </style>
    • <!—if [ IE 8] >
    • <style type=”text/css”>
    • body
    • {
    •  Background-color: #00FFBF;
    • }
    • </style>
    • <! [end if] –>

    The above code snippet will change the background color to “00FFBF” if the browser is IE 8 or will have a default color if its other browsers.

    Course Curriculum

    Advance your Career with CSS Training By World Class Faculty

    • Instructor-led Sessions
    • Real-life Case Studies
    • Assignments
    Explore Curriculum

    Q51. Could you describe the different kinds of selectors?

    Ans:

    A selector in CSS is the bit before the curly bracket, for example, body or .nav-item, that selects the content you want to style. The different kinds of selectors include tags, classes & IDs:

    A tag references an HTML tag

    A class references the class attribute on an HTML tag

    Likewise, an ID references the id attribute on an HTML tag

    • <!– tag –>
    • <section>
    •     <!– class –>
    •     <div class=”button-cta”>
    •         <!– id –>
    •         <a href=”cta-click”>Click me!</a>
    •     </div>
    • </section>

    Q52. Explain the three main ways to target elements.

    Ans:

    Now, in order to style certain elements on the page, you need to know how to specify those elements. There are three main ways to target something:

    • By tag, e.g. you can target the body or p or span
    • By the class you’ve specified in your HTML. For example, if you have three list items with the class nav-item you can target them with .nav-item
    • By the ID you’ve specified in your HTML. For example, if you have a link with the ID home-button you can target it with #home-button
    • /* tag */
    • body { … }
    • /* class */
    • .nav-item { … }
    • /* id */
    • #home-button { … }

    Keep in mind that IDs should be unique, meaning that there should never be more than one item with a particular ID on a page. It’s also generally better to target tags for very generic, site-wide styles, and classes for more specific styles. You can use a unique class or modifier class instead of an ID if you really need to target a single item.

    If you want to target something with two or more classes or IDs, simply concatenate them all together:

    • .button.nav { … }

    Q53. How do you target something inside or around another element?

    Ans:

    Sometimes you need to target something that’s next to something else or target something only if it’s inside a particular container. Luckily, that’s easy!

    If you’re wanting to style occurrences of a certain class inside another class, you can write the following:

    • .nav .nav-item { … }

    The above targets any .nav-item inside .nav. If you only want those that are immediately inside the .nav as opposed to any level deep, you can add the > character, like so:

    • .nav > .nav-item { … }

    Want to target a button only if it’s next to another button? The + character has got you covered:

    • .button + .button { … }

    Q54. What are pseudo elements and what are they used for?

    Ans:

    Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you’ve selected, or you can use it to insert text or shapes before or after an element.

    They always start with a double colon – although a single colon is still allowed for backwards compatibility – and they look like this:

    • p::first-line { … }
    • span::first-letter { … }
    • ::selection { … }
    • .header::after { … }
    • .tooltip::before { … }

    Q55. What are pseudo classes and what are they used for?

    Ans:

    Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.

    Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.They all start with a single colon and look like this:

    • .link:hover { … }
    • .link:active { … }
    • .tab:first-child { … }
    • .tab:last-child { … }
    • .avatar:nth-child(2n) { … }

    Q56. What are attributes and how are they used?

    Ans:

    You already know about classes, which means you already know about attributes, seeing as a class is just one of the many attributes that HTML tags can have. There are a few that apply to all tags, like class and id, but a lot of tags have their own ones. For example, input tags can have a type (text, number, radio, etc) and a tags can have href.

    You can target elements with particular attributes by using square brackets: [attribute=”value”]. For example, you can target all input fields that are of type radio like so:

    • input[type=”radio”] {
    •     background-color: #eee;
    • }

    Specificity

    Q57. Can you describe the rules around specificity?

    Ans:

    If you’ve spent any time wrangling CSS, you’ve likely come across the tricky rules around specificity. What that means is which rules override others simply by being more specific.

    The following list displays the order of specificity, from low to high:

    • Type selectors (e.g. h1) and pseudo-elements (e.g. ::before)
    • Class selectors (e.g. .nav-item), attributes selectors (e.g. [type=”radio”]) and pseudo-classes (e.g. :hover)
    • ID selectors (e.g. #example)

    This is the reason it’s unwise to use IDs to target specific elements, as they are of a higher specificity. Using it in too many places can backfire later on, where you end up trying to override those styles, which can be hard to do.

    Also, the more selectors you use, the higher it ranks in terms of specificity, e.g. button.primary[target=”_blank”] is more specific than simply button.

    • /* low specificity */
    • button { … }
    • /* higher specificity */
    • button.primary[target=”_blank”] { … }

    Q58. Should you use !important?

    Ans:

    Ahh, no way of escaping this one. When you’re wrestling with specificity, trying to override that one style, you may be tempted to add !important to your style. Think very carefully before you do so! It may seem harmless, but if you do this all over the place, you will soon find yourself in a big mess that you cannot get out of.

    What !important does, is make that particular style have the highest specificity possible. Nothing else can override it, apart from another !important. You might be able to see where this is going, but once you start using them, you’ll almost certainly get into a position where you need to override a rule marked as !important, which forces you to use another one. And so the cycle continues.

    /* high specificity */

    The CSS Box Model

    • .large .navigation.navigation-large { 
    •     font-size: 2em;
    • }

    /* will override the above, but it’s dangerous! */ </div>

    • .navigation {
    •  font-size: 3em !important;
    • }

    Q59. How do margin, border and padding fit together in the box model?

    Ans:

    While the border is pretty self-explanatory, it can be somewhat confusing to see the difference between margin and padding. Surely both simply add space around the element you’re styling?

    The easiest way to understand is to look at a visual representation of it. Looking at the below image, the very centre rectangle is the size of your element. Immediately surrounding that is padding. Then comes the border, and only then comes the margin.

    Padding adds bulk to your element, in between the border and the element. This means that if your element has a background color, that color will also fill the padding.

    Margin adds empty space around your element. That means that the aforementioned background color will not fill the margin.

    Q60.What’s your preferred way of sizing fonts?

    Ans:

    Something that has almost always come up for me is the way you size your text, mainly focused on the units you use. You can of course use pixels (px), but there’s also em, rem, %, vs and vh, along with a few others. Some people still don’t like using pixels, but browsers have improved and they’re generally handled pretty well.

    Defining your font sizes in em allows you to change the size of your text based on the size defined at a higher level. For example, if a container has specified a font-size of 2em, and you specify a font-size of 2em on an element inside that container, that element has an effective font-size of 4em! However, this can be a little confusing as you might not always see the size you expect!

    • .container {
    •    font-size: 2em;
    • .container > p {
    •     font-size: 2em; /* this is 2em x 2em = 4em! */
    • <div class=”code-injector”>}

    The rem unit was created to remedy that confusion. It scales well in the browser, just like em and px, but it uses a base size. From that, all further rem values are calculated. For example, if your base rem value is equal to 16px, then 1rem will always be equal to 16px, 2rem will always be equal to 32px, and so on.

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

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

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

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

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

    Q66. 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 <style type=”text/css”>…

    CSS comments are defined as anything that is placed between

    /* (the comment start mark) and

    */ (the comment end mark). I.e. as follows…

    /* This text right here is a correct CSS comment */

    CSS comments may span multiple lines in the stylesheet. Nesting of CSS comments is not allowed.

    Another reason for external stylesheets (and even embedded and inline stylerules) not to function as expected may be that you have tried to make use of some CSS-features that are not supported in the browser you are using.

    External stylesheets shall also be served from the www-server with a MIME-type of ‘text/css’ in its ‘Content Type:’ HTTP header.

    You may need to negotiate with your server admin to add this MIME type to your server if you are not able to configure the server yourself.

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

    • <div class=”code-injector”><P STYLE=”font-family: ‘New Times Roman’; font-size: 90%”></div>
    • <div class=”code-injector”><P STYLE=’font-family: “New Times Roman”; font-size: 90%’></div>

    It’s been reported the latter method doesn’t work very well in some browsers, therefore the first one should be used.

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

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

    Q70. 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 */
    CSS Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

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

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

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

    • .footnote {font: 70%}
    • /* class as selector */<ADDRESS CLASS=footnote/>
    • This element is associated with the CLASS footnote
    • </ADDRESS><P CLASS=footnote>And so is this</P>

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

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

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

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

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

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

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

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

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

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

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

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

    Ans:

    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.

    Q86. What are the benefits of CSS sprites?

    Ans:

    Benefits of using CSS sprites are

    It is a technique where one has a large image containing a set of small images. Those images can be broken down with the help of CSS to disintegrate into multiple images.

    It helps large images or pages to load faster hence, saving a lot of time. It cuts back HTTP requests. It is also flexible over website’s layout and design.

    The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.

    Q87. How can you integrate CSS on a web page?

    Ans:

    CSS can be integrated in three ways:

    • Inline: term is used when the CSS code have attribute of HTML elements
    • <p style=”colour:skyblue;”> My Sky!</p>
    • External: separate CSS file is created in the workspace and later linking them in every web page that is created
    • <div class=”code-injector”><head></div>
    • <link rel=”text/css” href=”your_CSS_file_location”/>
    • </head>
    • Internal: the head element of the web page has internal CSS implemented in it
    • <head>
    •   <style>
    •    p{
    •       color:lime;
    •        background-color:black;
    •       }
    •   </style>
    • </head>

    Q88. 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 mixture of red, green and blue represents a color. 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.

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

    Q90.What is Pseudo-elements?

    Ans:

    Pseudo-elements are keyword added to the selector that allows one o style a specific part of the selected element. CSS is 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. It can be used for;

    To style the first letter, line or element

    To insert a content

    Syntax

    • Selector: :pseudo-element {
    • property1 :value;
    • property2 :value;
    • }

    Q91. What is the usage of Class selector?

    Ans:

    A name preceded by a full stop is considered as a class selector in CSS. Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. An ID identifies a single element whereas a class identifies more than one element.

    Syntax for the class selector:

    • Classname:it can be A-Z, a-z or digits.
    • .top {font: 14em ;} //class selector
    • <Body class= “top”> //this class is associated with element </body>

    Q92.Enlist the various fonts’ attributes?

    Ans:

    They are:

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

    Q93. Comment on the Case-sensitivity of CSS ?

    Ans:

    Basically it is not case sensitive but the class names are considered as case sensitive in HTML 4.01 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.

    Q94. Enlist the media types CSS allows?

    Ans:

    Media is one of the most important features of CSS. The media renders the design and customization of documents. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network. Some of the media types are:

    • All – for all devices
    • Aural – speech synthesizers
    • Braille – feedback devices
    • Embossed – paged braille printers
    • Handheld – typically small screen, limitation of bandwidth
    • Projection – basically for projectors
    • Tv – television type devices

    Screen – color computer screens

    Q95.Differentiate logical tags from physical tags?

    Ans:

    There are several pointers that make local tags different from physical tags:

    Physical Tags Local Tags

    Physical tags are used to indicate how a particular character is to be formatted logical tags are used to indicate by the visually impaired and put emphasis on the text.

    Physical tags are also referred to as presentational mark-up.Logical tags are useless for appearances

    Physical tags are newer versions.Logical tags are old.

    Q96.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. CSS works better on bigger pages and as the pages grow the benefits become more and more visible. HTML is basically for smaller pages. Due to modularity, CSS has become popular it makes the process simple and webpages more presentable and is not meant for HTML alone.

    Q97. Describe ‘rule set’?

    Ans:

    It is an instruction that tells browser on how to render a specific element on the HTML page. It consists of a selector with a declaration block that follows. Rule set: Selectors can be attached to other selectors to be identified by rule set.

    It has two parts:

    • Selector, e.g. R 
    • Declaration block {text-indent: 11pt}

    Q98.What are the limitations of CSS?

    Ans:

    There are several limitations of CSS such as:

    • CSS can’t fulfill turning completeness hence, it can never perform logical like ‘if/else’, for/while, etc, or arithmetical tasks.
    • One cannot read files using CSS.
    • It cannot provide total control over document display and allows the contents of the page to come through whatever the browser is used.
    • Ascending by selectors is not possible.
    • No expressions as it is a text-based coding language.
    • No column declaration.
    • Pseudo-class not controlled by dynamic behavior.
    • Rules, styles, targeting specific text not possible.

    Q99.What are the different versions of CSS ?

    Ans:

    Different versions of CSS are:

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

    Q100. What are the Pseudo classes?

    Ans:

    These classes are used to define a special state of an element.

    You can use them for;

    • Style an element when someone mouses over it.
    • Style visited and unvisited links differently.
    • Style an element when it gets focus.

    Are you looking training with Right Jobs?

    Contact Us
    Get Training Quote for Free