{
"iq":[{"id":"1",
"q":" What is Cascading Style Sheet (CSS) ?",
"answer":" CSS is used for applying the styles for the HTML elements.So in a HTML document CSS will be used to apply style to the elements.\n“Cascading” refers to the order in HTML document. "
},
{"id":"2",
"q":"What are the different types of CSS?",
"answer":"Embedded – Adding the CSS styles in <style> attribute.\nInline – Adding the CSS to the HTML elements.\nExternal – Adding the External CSS file to the HTML document."
},
{"id":"3",
"q":"What are the components of CSS?",
"answer":"Property\nSelector\nValue"
},
{"id":"4",
"q":" Explain type selector in CSS?",
"answer":"Type selector matches the element of specific type. To give the color for all inputs with text types, we can do like this.\ninput[type=\"text\"]{\ncolor: #b8b8c7;\n}"
},
{"id":"5",
"q":" Explain universal selector in CSS? ",
"answer":"Universal selectors is used to match any element types. Below is the example for the same. For example,\n* {\ncolor: #FFFFFF;\n}"
},
{"id":"6",
"q":"Explain descendant selector in CSS? ",
"answer":"Descendant selectors are used when any style to be applied to an element when the element lies inside some element. For example,\nul em {\ncolor: #FFFFFF;\n} "
},
{"id":"7",
"q":" Explain id selector in CSS?",
"answer":" Id selector is used to apply the style to an element based on the “id” of an element. For example,\n#elementId {\ncolor: #FFFFFF;\n}"
},
{"id":"8",
"q":" Explain class selector in CSS?",
"answer":"\nClass selector is used to apply the style to an element based on the “class name” of an element. For example,\n.elementClassName {\ncolor: #FFFFFF;\n} "
},
{"id":"9",
"q":"Is it possible to make a class selector for a particular element? If so How?",
"answer":"Yes we can make a class selector for a particular element. Below is the example for the same –\n h2.myelementClassName {\ncolor: #FFFFFF;\n}"
},
{"id":"10",
"q":"How to use external style sheets?",
"answer":"External style sheets will be used to refer the style information from the external file.\nIn HTML document this can be used to refer in the <HEAD> section like below –<Head>\n<Link rel=”stylesheet” href=\"/MyStyle.css \" type=\"text/css\">\n</Head >"
},
{"id":"11",
"q":" Explain “Atrribute Selector” in CSS?",
"answer":"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)\ninput[type = \"text\"]{\ncolor: #FFFFFF;\n}"
},
{"id":"12",
"q":" Is CSS a case-sensitive or case-insensitive?",
"answer":" CSS is case insensitive."
},
{"id":"13",
"q":"Which property will be used for changing the face of font in CSS?",
"answer":" “font family” property can be used for changing the face of font."
},
{"id":"14",
"q":" How to use grouping in CSS?",
"answer":"Grouping is mainly used for applying css style for multiple HTML elements and this can be done with single declaration.\nExample :-\nh2, h3\n{\ncolor: #FFFFFF;\n}"
},
{"id":"15",
"q":"Explain child selector in CSS?",
"answer":" Child selectors can be used for applying the style for parent element and this will descend to the child elements. Below is the example -\n body > input{\ncolor: #FFFFF1;\n} "
},
{"id":"16",
"q":" What is the to use “float” property in CSS?",
"answer":"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,\n h1, h2\n {\nfloat: right;\n}"
},
{"id":"17",
"q":" Which property is used to control the position in the background for image?",
"answer":" “background-position” property can be used for controlling the position of the image in background. "
},
{"id":"18",
"q":" what are the media types in CSS?",
"answer":"\nAll\nScreen\nPrint\nProjection\nEmbossed\nTty\nTv"
},
{"id":"19",
"q":"List all the font attributes in CSS?",
"answer":" Font-Variant\n Font-Family\nCaption\nFont-Style\nFont-Size\nIcon "
},
{"id":"20",
"q":"How we can eliminate the color border around the linked images in web page in CSS?",
"answer":"“border: none;“ is the style that can be used to eliminate the border of linked image. "
},
{"id":"21",
"q":" What is the use of z-index in CSS?",
"answer":" Z-Index is used to avoid the overlapping of the elements. Default value of z-index is 0 and it will take positive and negative values as well. "
},
{"id":"22",
"q":"How to lighten the font weight in CSS?",
"answer":" “font-weight” property can be used for lightening the font weight in CSS."
},
{"id":"23",
"q":" Which css property is used for setting the type of cursor in CSS?",
"answer":"Property – “cursor” is used for setting the type of cursor."
},{"id":"24",
"q":"What are the new features in css3 .?",
"answer":"Border Images\nNew Web fonts\nMulti Column layout\nBox Shadows\nText Shadows\nTransform property"
},
{"id":"25",
"q":"What is the difference between inline and block elements in CSS? ",
"answer":"Block elements will leave a space before and after the element and it uses full width available. Eg: <div>, <h1>\nInline elements will take only the required width. Eg: <span>, <a>"
},{"id":"26",
"q":" What is the difference between “display:none” and “visibility:hidden” in CSS?",
"answer":"“Display:none” – This will just hide the element and does not take any space of the element.\n“visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document."
},{"id":"27",
"q":" List out the possible values for attribute – “Position” in CSS?",
"answer":"Static\nInherit\nFixed\nAbsolute\nRelative"
},{"id":"28",
"q":"How to give a line break using span in CSS?",
"answer":"“display: block” can be used with “span” element to add a line break."
},{"id":"29",
"q":"Can I give more than one css class to a HTML element?",
"answer":"Yes we can give more than one css class to a HTML element."
},{"id":"30",
"q":" How to add comments in CSS?",
"answer":"Below is the sample style for adding the comments –"
},{"id":"31",
"q":" Which property can be used for aligning the text in the document? ",
"answer":"Property – “text- align” can be used for aligning the text in the document."
},{"id":"32",
"q":" What you mean by pseudo classes in CSS?",
"answer":" Pseudo classes will allow you to identify the HTML elements. These classes are specified with “:” and pseudo class and element name.\na:hover {font-color: green;} "
},{"id":"33",
"q":" How to give rounded corners in CSS3?",
"answer":"Rounded corners can be given to any element using the property – “border-radius”. "
},{"id":"34",
"q":"List out the properties of rounded corners in CSS3?",
"answer":"Below are the properties of rounded corners –\nborder-radius\nborder-bottom-right-radius\nborder-bottom-left-radius\nborder-top-right-radius\nborder-top-left-radius"
},{"id":"35",
"q":"Which property is used for underlining the link in CSS?, ",
"answer":"Property – “text-decoration” is used for underlining the link."
},{"id":"36",
"q":" Mention the syntax for adding multiple background images in CSS3?",
"answer":"Below is the syntax for adding multiple background images –\nbackground-image: url(test1.gif), url(test2.gif); "
},{"id":"37",
"q":"What is the main difference between CSS and CSS3?",
"answer":"CSS3 have new features like – Model, Selectors, Backgrounds, Text effects, Animators etc. which were not there in CSS. "
},{"id":"38",
"q":" What you mean by word wrapping in CSS3?",
"answer":"Word wrapping means breaking the long words to next line. Below is the example for that –\n.wordwraptestclass\n{\nword-wrap:break-word;\n}"
},{"id":"39",
"q":"How we can create text shadow and box shadow in CSS3?",
"answer":"\nBox shadow can be created like this –\nbox-shadow: 5px 5px 2px #fffff;\nText shadow can be created like this –\ntext-shadow: 5px 5px 2px #fffff;"
},{"id":"40",
"q":" what is opacity in CSS?",
"answer":"Opacity is used to hide or show an element in CSS3. Value – ‘0’ to hide the element and value ‘1’ means showing an element.\nBelow is the sample for the same –\n<p style = “opacity:0”> Hide Text </p>"
},
{"id":"41",
"q":"What are the text properties of CSS?",
"answer":"word-wrap\nword-break\ntext-overflow"
},
{"id":"42",
"q":"What are the types of gradients in CSS?",
"answer":"Radial gradients\nLinear gradients"
},{"id":"43",
"q":" How we can use transition effect in CSS ",
"answer":"Duration of the effect\nCSS property to be added for an effect"
},
{"id":"44",
"q":"What are CSS Lists types?",
"answer":"Ordered list (<ol>) - list items will be marked in numbers.\nUnordered List (<ul>) - list items will be marked in bullets."
},{"id":"45",
"q":" What is the option to place the paragraphs next to each other using CSS?",
"answer":"<div style=\"float: left; width: 50%\">MyParagraphText1</div>\n<div style=\"float: left; width: 50%\">MyParagraphText2</div>"
},{"id":"46",
"q":" How to avoid the repetitive background images using CSS?",
"answer":"body {\nbackground-image: url(myImg.gif) no-repeat ;\n }"
},{"id":"47",
"q":"How to combine the stylesheets?",
"answer":" <LINK REL=Stylesheet HREF=\"myfirst.css\">\n <LINK REL=Stylesheet HREF=\"mysecond.css\">\n <LINK REL=Stylesheet HREF=\"mythird.css\">"
},{"id":"48",
"q":"List out the border properties in CSS?",
"answer":"\nBorder-style\nBorder-width\n\nBorder-color\nBorder-top-style\nBorder-right-style\nBorder-bottom -style\nBorder-left-style etc."
},{"id":"49",
"q":" Explain Media Queries in CSS?",
"answer":"Media queries are used for doing below things –\nFor checking the height and width of a device.\nFor checking the height and width of a viewport.\nOrientation\nResolution"
},{"id":"50",
"q":" What is the syntax to display an image in anchor tag in CSS? ",
"answer":"Below is the syntax to display image in anchor tag in CSS –\na {\nbackground-image: url(MyImage.png);\n}\n"
},{"id":"51",
"q":" How to change the color of anchor tag in CSS?",
"answer":"\na:link {\ncolor: #FFFFFF;\n} "
},
{"id":"52",
"q":"“Cell-Padding” – This used to leave the space between the content of cell and wall/border of the cell.\n“Cell-Spacing” – This used to specify the space between the cells.\n} "
}
]
}
"iq":[{"id":"1",
"q":" What is Cascading Style Sheet (CSS) ?",
"answer":" CSS is used for applying the styles for the HTML elements.So in a HTML document CSS will be used to apply style to the elements.\n“Cascading” refers to the order in HTML document. "
},
{"id":"2",
"q":"What are the different types of CSS?",
"answer":"Embedded – Adding the CSS styles in <style> attribute.\nInline – Adding the CSS to the HTML elements.\nExternal – Adding the External CSS file to the HTML document."
},
{"id":"3",
"q":"What are the components of CSS?",
"answer":"Property\nSelector\nValue"
},
{"id":"4",
"q":" Explain type selector in CSS?",
"answer":"Type selector matches the element of specific type. To give the color for all inputs with text types, we can do like this.\ninput[type=\"text\"]{\ncolor: #b8b8c7;\n}"
},
{"id":"5",
"q":" Explain universal selector in CSS? ",
"answer":"Universal selectors is used to match any element types. Below is the example for the same. For example,\n* {\ncolor: #FFFFFF;\n}"
},
{"id":"6",
"q":"Explain descendant selector in CSS? ",
"answer":"Descendant selectors are used when any style to be applied to an element when the element lies inside some element. For example,\nul em {\ncolor: #FFFFFF;\n} "
},
{"id":"7",
"q":" Explain id selector in CSS?",
"answer":" Id selector is used to apply the style to an element based on the “id” of an element. For example,\n#elementId {\ncolor: #FFFFFF;\n}"
},
{"id":"8",
"q":" Explain class selector in CSS?",
"answer":"\nClass selector is used to apply the style to an element based on the “class name” of an element. For example,\n.elementClassName {\ncolor: #FFFFFF;\n} "
},
{"id":"9",
"q":"Is it possible to make a class selector for a particular element? If so How?",
"answer":"Yes we can make a class selector for a particular element. Below is the example for the same –\n h2.myelementClassName {\ncolor: #FFFFFF;\n}"
},
{"id":"10",
"q":"How to use external style sheets?",
"answer":"External style sheets will be used to refer the style information from the external file.\nIn HTML document this can be used to refer in the <HEAD> section like below –<Head>\n<Link rel=”stylesheet” href=\"/MyStyle.css \" type=\"text/css\">\n</Head >"
},
{"id":"11",
"q":" Explain “Atrribute Selector” in CSS?",
"answer":"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)\ninput[type = \"text\"]{\ncolor: #FFFFFF;\n}"
},
{"id":"12",
"q":" Is CSS a case-sensitive or case-insensitive?",
"answer":" CSS is case insensitive."
},
{"id":"13",
"q":"Which property will be used for changing the face of font in CSS?",
"answer":" “font family” property can be used for changing the face of font."
},
{"id":"14",
"q":" How to use grouping in CSS?",
"answer":"Grouping is mainly used for applying css style for multiple HTML elements and this can be done with single declaration.\nExample :-\nh2, h3\n{\ncolor: #FFFFFF;\n}"
},
{"id":"15",
"q":"Explain child selector in CSS?",
"answer":" Child selectors can be used for applying the style for parent element and this will descend to the child elements. Below is the example -\n body > input{\ncolor: #FFFFF1;\n} "
},
{"id":"16",
"q":" What is the to use “float” property in CSS?",
"answer":"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,\n h1, h2\n {\nfloat: right;\n}"
},
{"id":"17",
"q":" Which property is used to control the position in the background for image?",
"answer":" “background-position” property can be used for controlling the position of the image in background. "
},
{"id":"18",
"q":" what are the media types in CSS?",
"answer":"\nAll\nScreen\nPrint\nProjection\nEmbossed\nTty\nTv"
},
{"id":"19",
"q":"List all the font attributes in CSS?",
"answer":" Font-Variant\n Font-Family\nCaption\nFont-Style\nFont-Size\nIcon "
},
{"id":"20",
"q":"How we can eliminate the color border around the linked images in web page in CSS?",
"answer":"“border: none;“ is the style that can be used to eliminate the border of linked image. "
},
{"id":"21",
"q":" What is the use of z-index in CSS?",
"answer":" Z-Index is used to avoid the overlapping of the elements. Default value of z-index is 0 and it will take positive and negative values as well. "
},
{"id":"22",
"q":"How to lighten the font weight in CSS?",
"answer":" “font-weight” property can be used for lightening the font weight in CSS."
},
{"id":"23",
"q":" Which css property is used for setting the type of cursor in CSS?",
"answer":"Property – “cursor” is used for setting the type of cursor."
},{"id":"24",
"q":"What are the new features in css3 .?",
"answer":"Border Images\nNew Web fonts\nMulti Column layout\nBox Shadows\nText Shadows\nTransform property"
},
{"id":"25",
"q":"What is the difference between inline and block elements in CSS? ",
"answer":"Block elements will leave a space before and after the element and it uses full width available. Eg: <div>, <h1>\nInline elements will take only the required width. Eg: <span>, <a>"
},{"id":"26",
"q":" What is the difference between “display:none” and “visibility:hidden” in CSS?",
"answer":"“Display:none” – This will just hide the element and does not take any space of the element.\n“visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document."
},{"id":"27",
"q":" List out the possible values for attribute – “Position” in CSS?",
"answer":"Static\nInherit\nFixed\nAbsolute\nRelative"
},{"id":"28",
"q":"How to give a line break using span in CSS?",
"answer":"“display: block” can be used with “span” element to add a line break."
},{"id":"29",
"q":"Can I give more than one css class to a HTML element?",
"answer":"Yes we can give more than one css class to a HTML element."
},{"id":"30",
"q":" How to add comments in CSS?",
"answer":"Below is the sample style for adding the comments –"
},{"id":"31",
"q":" Which property can be used for aligning the text in the document? ",
"answer":"Property – “text- align” can be used for aligning the text in the document."
},{"id":"32",
"q":" What you mean by pseudo classes in CSS?",
"answer":" Pseudo classes will allow you to identify the HTML elements. These classes are specified with “:” and pseudo class and element name.\na:hover {font-color: green;} "
},{"id":"33",
"q":" How to give rounded corners in CSS3?",
"answer":"Rounded corners can be given to any element using the property – “border-radius”. "
},{"id":"34",
"q":"List out the properties of rounded corners in CSS3?",
"answer":"Below are the properties of rounded corners –\nborder-radius\nborder-bottom-right-radius\nborder-bottom-left-radius\nborder-top-right-radius\nborder-top-left-radius"
},{"id":"35",
"q":"Which property is used for underlining the link in CSS?, ",
"answer":"Property – “text-decoration” is used for underlining the link."
},{"id":"36",
"q":" Mention the syntax for adding multiple background images in CSS3?",
"answer":"Below is the syntax for adding multiple background images –\nbackground-image: url(test1.gif), url(test2.gif); "
},{"id":"37",
"q":"What is the main difference between CSS and CSS3?",
"answer":"CSS3 have new features like – Model, Selectors, Backgrounds, Text effects, Animators etc. which were not there in CSS. "
},{"id":"38",
"q":" What you mean by word wrapping in CSS3?",
"answer":"Word wrapping means breaking the long words to next line. Below is the example for that –\n.wordwraptestclass\n{\nword-wrap:break-word;\n}"
},{"id":"39",
"q":"How we can create text shadow and box shadow in CSS3?",
"answer":"\nBox shadow can be created like this –\nbox-shadow: 5px 5px 2px #fffff;\nText shadow can be created like this –\ntext-shadow: 5px 5px 2px #fffff;"
},{"id":"40",
"q":" what is opacity in CSS?",
"answer":"Opacity is used to hide or show an element in CSS3. Value – ‘0’ to hide the element and value ‘1’ means showing an element.\nBelow is the sample for the same –\n<p style = “opacity:0”> Hide Text </p>"
},
{"id":"41",
"q":"What are the text properties of CSS?",
"answer":"word-wrap\nword-break\ntext-overflow"
},
{"id":"42",
"q":"What are the types of gradients in CSS?",
"answer":"Radial gradients\nLinear gradients"
},{"id":"43",
"q":" How we can use transition effect in CSS ",
"answer":"Duration of the effect\nCSS property to be added for an effect"
},
{"id":"44",
"q":"What are CSS Lists types?",
"answer":"Ordered list (<ol>) - list items will be marked in numbers.\nUnordered List (<ul>) - list items will be marked in bullets."
},{"id":"45",
"q":" What is the option to place the paragraphs next to each other using CSS?",
"answer":"<div style=\"float: left; width: 50%\">MyParagraphText1</div>\n<div style=\"float: left; width: 50%\">MyParagraphText2</div>"
},{"id":"46",
"q":" How to avoid the repetitive background images using CSS?",
"answer":"body {\nbackground-image: url(myImg.gif) no-repeat ;\n }"
},{"id":"47",
"q":"How to combine the stylesheets?",
"answer":" <LINK REL=Stylesheet HREF=\"myfirst.css\">\n <LINK REL=Stylesheet HREF=\"mysecond.css\">\n <LINK REL=Stylesheet HREF=\"mythird.css\">"
},{"id":"48",
"q":"List out the border properties in CSS?",
"answer":"\nBorder-style\nBorder-width\n\nBorder-color\nBorder-top-style\nBorder-right-style\nBorder-bottom -style\nBorder-left-style etc."
},{"id":"49",
"q":" Explain Media Queries in CSS?",
"answer":"Media queries are used for doing below things –\nFor checking the height and width of a device.\nFor checking the height and width of a viewport.\nOrientation\nResolution"
},{"id":"50",
"q":" What is the syntax to display an image in anchor tag in CSS? ",
"answer":"Below is the syntax to display image in anchor tag in CSS –\na {\nbackground-image: url(MyImage.png);\n}\n"
},{"id":"51",
"q":" How to change the color of anchor tag in CSS?",
"answer":"\na:link {\ncolor: #FFFFFF;\n} "
},
{"id":"52",
"q":"“Cell-Padding” – This used to leave the space between the content of cell and wall/border of the cell.\n“Cell-Spacing” – This used to specify the space between the cells.\n} "
}
]
}