• +91 9971497814
  • info@interviewmaterial.com

CSS Interview Questions Answers

Question 1 : What is CSS?

Answer 1 : 1. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size. 2. CSS is a web standard that describes style for XML/HTML documents. 3. CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s really that simple. CSS is not used to put any content on your site, it’s just there to take the content you have and make it pretty. First thing you do is link a CSS-file to your HTML document. Do this by adding this line: <link rel="stylesheet" href="style.css" type="text/css"> The line should be placed in between your <head> and </head> tags. If you have several pages you could add the exact same line to all of them and they will all use the same stylesheet, but more about that later. Let’s look inside the file “style.css” we just linked to. h1 { font-size: 40px; height: 200px; } .warning { color: Red; font-weight: bold; } #footer { background-color: Gray; } 4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. This is also where information meets the artistic abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in wide variety of aspects.

Question 2 : What are Cascading Style Sheets?

Answer 2 : A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a "cascading" of styles) when the document is rendered to form a single style rule for each element.

Question 3 : Why are there gaps above and below my form in IE?

Answer 3 : A lot of the time, when you find gaps that you can't account for, they are due the default styles of different browsers - especially the margins and padding. IE gives forms some margins above and below forms while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc). A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your style sheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers. CSS * { margin:0; padding:0; } If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well? It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color. body { background-image: url(light-texture.png) #FFF; color: #000 } a:link, a:visited, a:active { color: #00F; background-color: transparent; } By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.

Question 4 : Why can @import be at the top only?

Answer 4 : A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages. However, there is a competing model, well-known to C programmers, where the imported material is not lower in rank, but is expanded in-place and becomes an integral part of the importing document. By allowing @import only at the top of the style sheet, people that think in terms of the second model (although in principle incorrect) will still get the expected results: as long as the @import is before any other overriding rules, the two models are equivalent. Btw. In all the modular languages import statements are only allowed at the top. In C, the #include can be put elsewhere, but in practice everybody always puts it at the top. So there may not be that much need to allow @import elsewhere in the style sheet either.

Question 5 : How to make text-links without underline?

Answer 5 : a:link, a:visited {text-decoration: none} or <a style="text-decoration: none" HREF="..."> ...will show the links without underlining. However, suppressing the underlining of links isn't a very smart idea as most people are used to having them underlined. Also, such links are not spotted unless someone coincidentally runs a mouse over them. If, for whatever reason, links without underline are required background and foreground colors can be instead declared to them so that they can be distinguished from other text, e.g.; a:link, a:visited {text-decoration: none; background: red; color: blue} or <a style="text-decoration: none; background: red; color: blue" HREF="..."> Both background and foreground colors should be specified as the property that is not specified can be overridden by user's own settings.

Question 6 : What are the advantages/disadvantages of the various style methods?

Answer 6 : Advantages * Can control styles for multiple documents at once * Classes can be created for use on multiple HTML element types in many documents * Selector and grouping methods can be used to apply styles under complex contexts Disadvantages * An extra download is required to import style information for each document * The rendering of the document may be delayed until the external style sheet is loaded * Becomes slightly unwieldy for small quantities of style definitions Embedded Style Sheets Advantages * Classes can be created for use on multiple tag types in the document * Selector and grouping methods can be used to apply styles under complex contexts * No additional downloads necessary to receive style information Disadvantages * This method can not control styles for multiple documents at once Inline Styles Advantages * Useful for small quantities of style definitions * Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods Disadvantages * Does not distance style information from content (a main goal of SGML/HTML) * Can not control styles for multiple documents at once * Author can not create or control classes of elements to control multiple element types within the document * Selector grouping methods can not be used to create complex element addressing scenarios

Question 7 : What is alternate Style Sheet? How to link?

Answer 7 : Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred . Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style, e.g.: <LINK REL=Stylesheet HREF="style.css" TYPE="text/css"> Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style, e.g.: <LINK REL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="appropriate style description"> Alternate style gives an user the choice of selecting an alternative style - a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.: <LINK REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=screen> <LINK REL="Alternate Stylesheet" HREF="style4.css" TYPE="text/css" TITLE="appropriate style description" MEDIA=print> Alternate stylesheet are not yet supported.

Question 8 : Three selectors: h1, .warning and #footer, what they do ?

Answer 8 : An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p { margin-left: 100px; } gives all <p>-tags a left-margin. Using a class is just as simple. When writing .your_class you style all tags with a class with the name “your_class”. In the example above we have .warning which will style e.g. <div class="warning"> and <em class="warning">, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links. You need one more building block: the id. This time you style an element with the attribute “id” set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id="footer">. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag. Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id “footer. Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. An example: a { color: Blue; font-size: 3em; }. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue. there is a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML.

Question 9 : What's the difference between 'class' and 'id'?

Answer 9 : As a person, you may have an ID card - a passport, a driving license or whatever - which identifies you as a unique individual. It's the same with CSS. If you want to apply style to one element use 'id' (e.g. <div id="myid">). In the stylesheet, you identify an 'id' with a '#' ie. '#myid'... As a person, if you are in a class, you are one of many. It's the same with CSS. If you want to apply the same style to more than one element, use 'class' (e.g. <div class="myclass">). In the stylesheet, you identify a 'class' with a '.' ie. '.myclass'... If id's are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it's simply wrong. You don't put headings in 'p' tags - you use 'h1', 'h2', etc. You don't (or shouldn't) make a list by writing asterisks or the little divider bar ( | ) - you use list tags ('ol'/'ul' + 'li') . You don't say that your footer is part of a class of elements called 'footer' - that's just stupid - you can't have more than one footer - it can't be a class. Of course, practically, the effect is about the same - the rules are applied - but that's not the point - it's semantically wrong to do it that way... However, if you try to give more than one element the same id, you will have problems - so don't do it. An element may have an id and a class, but that's usually not necessary. You can also give an element two classes if you need to - like this : class="class1 class2". It can be very useful. Needless to say, you can't give an element two id's. Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes. One more useful thing about id's is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that's simply not true - in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id's as link references is this page. There are no named anchors on this page - the questions at the top of the page link to the id's of the divs that the answers are in. I made a 10px-high div, but IE makes it 20px high... Yeah This problem sometimes comes up when you make a div just to contain the bottom border of a box,

Question 10 : Why is it my ':hover' declaration for links does not work ?

Answer 10 : Assuming you have already checked that your style sheet declarations do conform to correct CSS syntax, it could be that you have overlooked the importance of a correct order of style declarations for links. The CSS2 specification makes this following note on the importance of placing the dynamic pseudo-classes ':hover' and ':active' in correct positions in a list of style declarations. Note that the 'a:hover' must be placed after the 'a:link' and 'a:visited' rules, since otherwise the cascading rules will hide the 'color' property of the 'a:hover' rule. Similarly, because 'a:active' is placed after 'a:hover', the active color will apply when the user both activates and hovers over the 'a' element.  

CSS Contributors

krishan

Share your email for latest updates

Name:
Email:

Our partners