Monday 20 February 2017

Interview Q & A: CSS Style Code

1) What is Cascading Style Sheet (CSS) ?

CSS is used for applying the styles for the HTML elements. So in a typical HTML document CSS will be applied to complete document for styling the elements.

2) What does “Cascading” in CSS mean?

“Cascading” refers to the cascading order in HTML document. This will sort the declared CSS in an order to avoid the conflicts.

3) What are the different types of CSS?

Below are the different types of CSS –

Embedded – Adding the CSS styles in <style> attribute.Inline – Adding the CSS to the HTML elements.Linked/External – Adding the External CSS file to the HTML document.

 

4) Explain the advantages of CSS?

Below are some of the advantages of CSS –

AccessibilityMultiple Device CompatibilityPage will load fastMaintenance is EasyOffline Browsing

5) List out the components of CSS style?

Below are the different components of CSS styles –

Property SelectorValue

6) Explain type selector in CSS?

Type selector matches the element of specific type. To give the color for all inputs with text types, we can do like this.

input[type="text"]{
color: #b2bfc7;
}

7) Explain universal selector in CSS?

Universal selectors is used to match any element types. Below is the example for the same. For example,

* {
color: #FFFFFF;
}

This rule is used to render the content of all elements in our document in white.

8) Explain descendant selector in CSS?

Descendant selectors are used when any style to be applied to an element when the element lies inside some element. For example,

ul em {
color: #FFFFFF;
}

As shown above style applied to element – “<em>” when it lies inside “<li>”.

9) Explain id selector in CSS?

Id selector is used to apply the style to an element based on the “id” of an element. For example,

#elementId {
color: #FFFFFF;
}

In the above code snippet all the elements having id – “elementId” will have the color white.

10) Explain class selector in CSS?

Class selector is used to apply the style to an element based on the “class name” of an element. For example,

.elementClassName {
color: #FFFFFF;
}

In the above code snippet all the elements having class name – “elementClassName” will have the color white.

11) Is it possible to make a class selector for a particular element? If so How?

Yes we can make a class selector for a particular element. Below is the example for the same –

h2.myelementClassName {
color: #FFFFFF;
}

Above example depicts whenever class name – “myelementClassName” found under element “h2” apply white color.
12) How to use external style sheets?

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">
</ Head >

 

13) Explain “Atrribute Selector” in CSS?

Attribute selector can be used to apply a style for an HTML element with particular attribute. Example gien below is used to apply a style for input element with particular attribute (text)

input[type = "text"]{
color: #FFFFFF;
}

14) Is CSS a case-sensitive or case-insensitive?

CSS is case insensitive.

15) Which property will be used for changing the face of font in CSS?

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

16) How to use grouping in CSS?

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

h2, h3
{
color: #FFFFFF;
}

17) Explain child selector in CSS?

Child selectors can be used for applying the style for parent element and this will descend to the child elements. Below is the example -

body > input{
color: #FFFFF1;
}

Above example is used for applying the white color to all the inputs which are lying in body tag.

18) What is the to use “float” property in CSS?

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;
}

19) Which property is used to control the position in the background for image?

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

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

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.

21) Mention the property name which is used for making the font oblique in CSS?

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

No comments:

Post a Comment