CSS Interview Questions
There are three ways to integrate CSS into a Web page
1) Inline : HTML elements may have CSS applied to them via the STYLE attribute.
2) Embedded :By placing the code in a STYLE element within the HEAD element.
3) Linked/ Imported : Place the CSS in an external file and link it via a link element.
The reasons for this are as follows:
1. It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase.
2. Color is inherited, but background isn’t. This can further increase the confusion.
1. External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.
2. Using this the entire site can be formatted and styles just by editing one file.
3. The file is linked with HTML documents via the LINK element inside the HEAD element.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
The advantages of External Style Sheets are:
1. Using them, the styles of multiple documents can be controlled from one file.
2. Classes can be created for use on multiple HTML element types in many documents.
3. In complex situations, selector and grouping methods can be used to apply styles.
The disadvantages of External Style Sheets are:
1. In order to import style information for each document, an extra download is needed.
2. Until the external style sheet is loaded, it may not be possible to render the document.
3. For small number of style definitions, it is not viable.
The advantages of Embedded Style Sheets are:
1. It is possible to create classes for use on multiple tag types in the document
2. Under complex situations, selector and grouping methods can be used to apply styles.
3. No extra download is required to import the information.
The disadvantages of Embedded Style Sheets are:
1. It is not possible to control the styles for multiple documents from one file, using this method.
The advantages of Inline Styles are:
1. It is especially useful for small number of style definitions.
2. It has the ability to override other style specification methods at the local level.
The disadvantages of Inline Styles are:
1. It does not separate out the style information from content.
2. The styles for many documents can not be controlled from one source.
3. Selector grouping methods can not be used to handle complex situations.
This can be done by specifying the border property for linked images in your CSS as none:
For Example:
a img { border: none ; }
1. Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply.
2. It can also be referred to as a link between the HTML document and the style sheet.
3. It is equivalent of HTML elements.
Example:
A {text-indent: 12pt}
Here, the selector is A, which is called as type selector.
1. It is the short form for in-betweening.
2. It is the process of generating intermediate frames between two images.
3. It gives the impression that the first image has smoothly evolved into the second one.
5. In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.
1. RWD is the abbreviation for Responsive web design.
2. In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.
1. A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request.
2. The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.
External style sheet are made up of css format only, it contains style information that can be linked with the HTML document externally. It is one of the easy and structured way as it keeps the style separate from the structure. It is a convenient way as only one file will be affected if any changes will be made overall. The file is linked through Link tag used inside the HTML Head.
<HTML> <HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD> </HTML>
CSS consists of two types of CSS rules, first is for ruleset which identifies the style and the selector. It combines the style and the selector.
1. Ruleset is a combination of CSS rules,
For Example : h1{text-color: 15pt;}, where this is the CSS rule.
2. Ruleset is selector + declaration
For Example : h1 + {text-color: 15pt;}
Class selectors are the selectors which are stand alone to a specific style that is declared. Class attribute can be used to declare the style and make an association with any HTML element.
The syntax for creation of class selector is: .classname.
The name can be from a-z, A-z or in digits.
The example code is shown as below:
.head{font: 12em;}, this is a class selector
<Body class= “head”> this is the class that is associated with the element </body>.
1. Class selector can be given to an overall block. This is sometimes termed as block element as well, whereas ID selector identifies a unique name and a style for a specific element.
2. ID selector declares the style for only one particular element which can be differentiated from other element, whereas Class selector is being given for the whole complete block.
Example of ID selector is being written like this:
#idname {color: red; background: black;}
This can be used in HTML as:
<p ID= “idname”>this element only will be affected by the use of this ID element</P>
Contextual selector specifies a specific occurrence of an element. It is combination of many selectors that are separated by white spaces. In this only the element that matches the specified element will be used not all the elements.
For example the syntax of it is being given as:
TD p code {color: #000000}
The element which is being defined as code will only be displayed as red as its color is being mentioned as red. But this is being done only if it occurs in the p text.
TD p code, h1, em {color: red}
The element code and em will only be displayed in red only when it occurs in h1 or p.
Parent-child selector represents the direct relationship between parent element and child element. It is been created by using two or more (~) tilde separated selectors.
Example:
Body ~ p {background-color: red; text: #FF00FF;}
Here the p element gets declared for a specific element and style only that element but if it has some child element then those elements will also get styled.
One more example to show the parent-child relationship as:
Body ~ p ~ em {background-color: red; text: #FF00FF;}
Important declarations are those declarations which have high weightage then normal declarations. These declarations override other declarations of less importance while executing. If suppose there are two statements from two users and both consist of important declaration then the one of the users declaration will override the another users declarations.
Body {background: #FF00FF !important; color: grey}
In this body background has more weight than the color.
There is a provision to include one or more declaration in a selector by using the semicolon as this shows the separation of the properties.
Selector {declaration1; declaration2}
P {background: white; color: black}
Class is a group of attributes and properties that uniquely identify style that can be attached to any element. It also defines instances for different element to which the same style can be attached.
The following example shows the use of class in CSS:
P {color:red} : It will display text color red in all paragraphs. This can be included with each element where the paragraph tag can be used. There can be given one style to one paragraph and another style to other paragraphs. A class may not have any association with the specific element. But any element with which the specific class is attached will have the same style.
For Example:
CSS:
H1.prop1 {color: red} /* one class of P selector */
H2.prop2 {color: blue} /* another class of P selector */
.prop3 {color: green} /* can be attached to any element */
HTML:
<li> <h1 class=prop1>This paragraph will be red</P> <h2 class=prop2>This paragraph will be blue</P> <p class=prop3>This paragraph will be green</P> <h3 class=prop3>This list item will be green</li>
Pseudo elements allow the use of the part of element and not the element itself. They are applied to block level element, which is used for the complete block for which the CSS is being written. This allow the subpart of an element to be styled like paragraphs and headings.
For example:
selector:pseudo-element {property:value;}
p: first-line {text-transform: lowercase;}
It adds the style to the first line of the code in the paragraph.
1. Inline elements don’t have line breaks. An Inline element doesn’t have elements to set width and height.
For Example:em, strong, etc. codes are few examples of inline elements.
2. Block elements do have line breaks and they define the width by setting a container. It also allowed setting height. It can contain the elements that occur in inline elements.
For Example:
width and height max-width and max-height min-width and min-height hi (i=1-6)- heading element p- paragraph element.
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.
A catalog of directions within braces consisting of property, colon and value is called declaration block.
Example: [property 1: value 3]
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 <Style> tag.
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.
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.
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.
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 Example: TD P TEXT {color: blue}
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.
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.
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.
@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.
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.
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.
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.