Frequently asked top CSS and CSS3 Interview Questions and Answers for freshers and 2-5 year experienced web developers.
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 –
Accessibility
Multiple Device Compatibility
Page will load fast
Maintenance is Easy
Offline Browsing
5) List out the components of CSS style?
Below are the different components of CSS styles –
Property
Selector
Value
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.
22) List out the media types in CSS?
Below are the list of media types in CSS –
All
Screen
Projection
Embossed
Tty
Tv
23) List all the font attributes in CSS?
Below are the list of font attributes –
Font-Variant
Font-Family
Caption
Font-Style
Font-Size
Icon
24) How we can eliminate the color border around the linked images in web page in CSS?
“border: none;“ is the style that can be used to eliminate the border of linked image.
25) List out the elements of CSS Box modal?
Below are the elements of CSS Box modal –
Border
Margin
Content
Padding
26) What is the use of z-index in CSS?
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.
27) How to lighten the font weight in CSS?
“font-weight” property can be used for lightening the font weight in CSS.
28) Which css property is used for setting the type of cursor in CSS?
Property – “cursor” is used for setting the type of cursor.
29) List out any 5 properties of cursor in CSS?
Below are the list of properties of cursor –
Pointer
Help
Wait
Hand
Crosshair
30) List out some of the properties in added in CSS3?
Below are the some of the properties in CSS3-
Border Images
New Web fonts
Multi Column layout
Box Shadows
Text Shadows
Transform property
31) What is the difference between inline and block elements in CSS?
Block elements will leave a space before and after the element and it uses full width available. Eg: <div>, <h1>
Inline elements will take only the required width. Eg: <span>, <a>
32) List out main properties of CSS style sheets?
Below are some of main properties in CSS style sheets –
Text
Font
Border
Padding
Table
List
Background
Margin
33) What is the difference between “display:none” and “visibility:hidden” in CSS?
“Display:none” – This will just hide the element and does not take any space of the element.
“visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document.
34) What is the property used for formatting the texts in CSS?
Property – “white-space” is used for formatting the text.
35) List out the possible values for attribute – “Position” in CSS?
Below are the list of possible values for attribute – “Position” -
Static
Inherit
Fixed
Absolute
Relative
36) Which property is used for underlining the link in CSS?
Property – “text-decoration” is used for underlining the link.
37) How to give a line break using span in CSS?
“display: block” can be used with “span” element to add a line break.
<span style=” display: block” />
38) Can I give more than one css class to a HTML element?
Yes we can give more than one css class to a HTML element.
39) How to add comments in CSS?
Below is the sample style for adding the comments –
/* test comment */
40) Which property can be used for aligning the text in the document?
Property – “text- align” can be used for aligning the text in the document.
41) How we can set a wait cursor by CSS?
Below is the line to set the wait cursor –
document.body.style.cursor = ‘wait’;
42) What you mean by pseudo classes in CSS?
Pseudo classes will allow you to identify the HTML elements. These classes are specified with “:” and pseudo class and element name.
a:hover {font-color: green;}
43) How to give rounded corners in CSS3?
Rounded corners can be given to any element using the property – “border-radius”.
44) List out the properties of rounded corners in CSS3?
Below are the properties of rounded corners –
border-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-right-radius
border-top-left-radius
45) Which are the new backgrounds are added in CSS3?
Below are the new background properties are added in CSS3-
background-origin
background-clip
background-size
46) Mention the syntax for adding multiple background images in CSS3?
Below is the syntax for adding multiple background images –
background-image: url(test1.gif), url(test2.gif);
47) What you mean by word wrapping in CSS3?
Word wrapping means breaking the long words to next line. Below is the example for that –
.wordwraptestclass
{
word-wrap:break-word;
}
48) What is the main difference between CSS and CSS3?
CSS3 have new features like – Model, Selectors, Backgrounds, Text effects, Animators etc. which were not there in CSS.
49) How we can create text shadow and box shadow in CSS3?
Box shadow can be created like this –
box-shadow: 5px 5px 2px #fffff;
Text shadow can be created like this –
text-shadow: 5px 5px 2px #fffff;
50) List out the new texts added in CSS3?
Below are the list of texts added in CSS3 –
Word-wrap
Text-overflow
Word- break
51) How we can use transition effect in CSS3?
Below are the two things to be specified to create a transition effect –
Duration of the effect
CSS property to be added for an effect
52) List out the properties of transition in CSS3?
Below are the properties of transition in CSS3 –
Transition-delay
transition-property
transition-duration
transition-timing-function
53) List out the possible “Position” attribute values in CSS?
Below are the list of possible “Position” values –
Fixed
Inherit
Absolute
Static
Relative
54) What are the types of gradients in CSS3?
Below are the types of gradients in CSS3 –
Radial gradients
Linear gradients
55) List out the text properties of CSS3?
Below are the list of text properties used in CSS3 –
word-wrap
word-break
text-overflow
56) Explain opacity in CSS3?
Opacity is used to hide or show an element in CSS3. Value – ‘0’ to hide the element and value ‘1’ means showing an element.
Below is the sample for the same –
<p style = “opacity:0”> Hide Text </p>
57) What is the difference between “cell-padding” and “cell-spacing”?
“Cell-Padding” – This used to leave the space between the content of cell and wall/border of the cell.
“Cell-Spacing” – This used to specify the space between the cells.
58) What would be the difference between “width:auto” and “width:100%” in CSS?
“width:auto” reaches to the full width and it will subtract borders, paddings, margins etc. from the available space where as “width:100%” will force the element to be as wide as its parent element and will add additional spacing which can cause some problems.
59) How to change the color of anchor tag in CSS?
For changing the anchor tag color using CSS –
a:link {
color: #FFFFFF;
}
60) What is the syntax to display an image in anchor tag in CSS?
Below is the syntax to display image in anchor tag in CSS –
a {
background-image: url(MyImage.png);
}
61) Can we declare css classes more than once?
Yes. We can declare css classes more than once.
62) Why to use @import tag at the top of CSS file?
@Import tag is used to at the top to avoid the rules to override.
63) Explain Media Queries in CSS3?
Media queries are used for doing below things –
For checking the height and width of a device.
For checking the height and width of a viewport.
Orientation
Resolution
64) List out the border properties in CSS?
Below are the list of properties for border in CSS –
Border-style
Border-width
Border-color
Border-top-style
Border-right-style
Border-bottom -style
Border-left-style etc.
65) How to combine the stylesheets?
We can combine the stylesheets using – “LINK” tag. Below is the syntax for the same –
<LINK REL=Stylesheet HREF="myfirst.css">
<LINK REL=Stylesheet HREF="mysecond.css">
<LINK REL=Stylesheet HREF="mythird.css">
66) How to avoid the repetitive background images using CSS?
Repetitive back ground images can be avoided using – “no-repeat”. Below is the syntax for the same –
body {
background-image: url(myImg.gif) no-repeat ;
}
67) Define short hand property in CSS?
Shorthand property is a property which can made up of multiple individual properties. Below is the sample example for the same –
h2
{
font-weight: bold;
font-style: italic;
font-variant: normal;
font-size: 20%;
}
As shown in the above example to reduce the size and complication of stylesheet file all the properties are merged so this is called shorthand property.
68) What is the option to place the paragraphs next to each other using CSS?
Below is the sample code for aligning the paragraphs next to each other –
<div style="float: left; width: 50%">MyParagraphText1</div>
<div style="float: left; width: 50%">MyParagraphText2</div>
69) What are CSS Lists types?
Below are the two CSS list types –
Ordered list (<ol>) - list items will be marked in numbers.
Unordered List (<ul>) - list items will be marked in bullets.
