CSS Interview Questions
CSS Interview Questions
FAQS:
Web designers needs to use few lines of programming for every page improving site speed.
Cascading sheet not only simplifies website development, but also simplifies the
maintenance as a change of one line of code affects the whole web site and maintenance
time.
2. Why do we use CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to
alter the font, color, size, and spacing of your content, split it into multiple columns, or add
animations and other decorative features
3. Can we implement css anywhere in the web page?
Add CSS Code In-Between The <head> Tags
Unlike JavaScript, the CSS code must be included before the HTML code (DOM) gets loaded
on the browser. You may wonder why… because you could add the CSS code by the end of
the body and it will work fine
Internal CSS is one of the most widely used CSS forms for changing, styling, and modifying
the unique styles of a single web page. You can use the internal CSS by integrating the <style>
element in the <head> section of a HTML web page.
Internal CSS can be applied to the whole web page but not on multiple web pages and you
can style several web pages by using the same code on every page.
An external style sheet is a file with a . css extension that contains cascading style sheet
(CSS) definitions for a webpage(s). It completely separates the CSS styles from the HTML
document making it easy to reuse and maintain.
Internal CSS are those that can be written in the same file as the HTML code, i.e. the HTML
code and CSS code are placed in the same file. External CSS means that we can write in a
different file than the HTML code, i.e. the HTML file is separate (index. html) and the CSS file
is separate (style. css).
Inline CSS: Requires the style attribute placed inside an HTML element.
Internal CSS: Requires the <style> element placed inside the head section of an HTML file.
External CSS: Requires the <link> element placed inside the head section of an HTML file.
a:active {
color: pink;
}
</style>
36. Which order we do follow while defining <a> pseudo properties?
39. What is CSS Box Model and what are its elements?
In CSS, the term "box model" is used when talking about design and layout. The CSS box
model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content.
The margin helps to define where a line of text begins and ends. When a page is justified
the text is spread out to be flush with the left and right margins. When two pages of content
are combined next to each other (known as a two-page spread), the space between the two
pages is known as the gutter.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
The padding property in CSS defines the innermost portion of the box model, creating
space around an element's content, inside of any defined margins and/or borders.
Padding values are set using lengths or percentages, and cannot accept negative values. The
initial, or default, value for all padding properties is 0
Margins are used to add spaces between an image and the description of that image. CSS
Padding is used if we want to create a space between an element and the edge of the
container or the border. It is also useful in the requirement of changing the size of the
element.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
In CSS, a margin is the space around an element's border, while padding is the space
between an element's border and the element's content. Put another way, the margin
property controls the space outside an element, and the padding property controls the space
inside an element.
Arrow Cursor
Text Pointer/I-beam
Hand Cursor
Hourglass/Waiting Cursor
Help Pointer
Object Resizing Cursor
Pencil Cursor
Precision Pointer
White cross cursor
Move Cursor
Zoom In/Out Cursor
Grab cursor
Scroll cursor
Unavailable Pointer
An image sprite is a collection of images put into a single image. A web page with many
images can take a long time to load and generates multiple server requests. Using image
sprites will reduce the number of server requests and save bandwidth .
You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to
hide overflow and position:relative; . Then you place your <img> image sprite inside
absolutely positioned, which is possible since you positioned the parent. Then use :hover on
the image to change position.
For all images in the sprite, find the width of the widest image and the height of the tallest
image. If the largest width is greater than the largest height, then a horizontal stacking will
result in a more optimal sprite sheet. Otherwise, vertical stacking is more optimal.
Pseudo-classes enable you to target an element when it's in a particular state, as if you had
added a class for that state to the DOM. Pseudo-elements act as if you had added a whole
new element to the DOM, and enable you to style that
56. What is hover and focus in CSS?
Hover: by putting your cursor over it. A hovered element is ready to be activated with a mouse
or any mouse-emulating technology (such as eye and motion tracking). Focus: a focused
element is ready to be activated with a keyboard or any keyboard-emulating technology (such
as switch devices).
length - Defines the height/width in px, cm, etc. % - Defines the height/width in percent of
the containing block. initial - Sets the height/width to its default value. inherit - The
height/width will be inherited from its parent value.
59. What are the different CSS properties used to change dimensions?
The CSS height and width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element. This element
has a height of 50 pixels and a width of 100%.
61. What is the different provision provided in css to define the dimension
of an element?
length - Defines the height/width in px, cm, etc. % - Defines the height/width in percent of
the containing block. initial - Sets the height/width to its default value. inherit - The
height/width will be inherited from its parent value.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-
y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar.
Here the scroll div will be vertically scrollable.
::-webkit-scrollbar {
width: 2em;
height: 2em.
}
::-webkit-scrollbar-button {
background: #ccc.
}
::-webkit-scrollbar-track-piece {
/* Global values */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
c. // this is a comment
d. // this is a comment //
a. 1992
b. 1994
c. 1995
d. 1996
5. From which version of CSS under development since the late 1990s,
added a lot of extra ( )
features?
a. CSS1
b. CSS2
c. CSS3
d. None
6. A CSS declaration always ends with a ………, and declaration groups are
surrounded by ( a )
……
b. Rule
c. Declaration
d. Value
a. An external style sheet is ideal when the style is applied to many pages
a. Class
b. styles
c. style
d. Font
10. Which of the style sheet is also known as Embedded Style Sheet?
(d)
11. An internal style sheet should be used when a single document has
a(a)
a. unique style
b. common style
12. A ……… tag is used to specify that the browser is to fetch and use an
external style ( b )
sheet file
a. <sheet>;
b. <link>
c. <src>
d. None
a. One level
b. Two level
c. Three level
d. Four level
14. Which style sheet can be applied to the content of a single element?
(a)
d. None
href="mystyle.css">(a)
a. True
b. False
c. May be
d. Can't say
a. Id
b. Class
c. Text
d. Bit
17. The id selector uses the id attribute of the HTML element, and is
defined with a( d)
a. ”@”
b. ”_”
c. ”%”
d. ”#”
a. Id
b. Class
c. Tag
19. The class selector uses the HTML class attribute, and is defined
with(b)
a. ”:”
b. ”.”
c. ”,”
d. None
20. In CSS, ……………are patterns used to select the element(s) you want
to style. (a)
a. Selectors
b. decleration
c. Either(A) or (B)
a. Px
b. Em
c. Pt
d. Vmin
a. Vh
b. Vm
c. em
d. px
23. What is the correct HTML for referring to an external style sheet?()
a. Um
b. Px
c. Mm
d. Cm
25. ________ property specifies an image to use as the background of an
element( b)
a. image
b. backgroundimage
c. background-img
d. background-image
26. Which of the below is the correct way to set a background image?(c )
a. body {background-image:uri(wall.gif);}
b. body {background-image:url(wall.gif');}
c. body {background-image:url(‘wall.gif’);}
d. body {background-image:uri('wall.gif');}
27. Which of the following will move the image up and down?( a)
a. Scroll
b. Fixed
c. repeat-x
d. repeat-y
28. Which of the following is not the value for background-repeat property?
(d)
a. repeat-y
b. repeat-x
c. no-repeat
d. fixed
a. True
b. False
c. None
30. Which of the below is the correct way to set a font size?(c)
a. h2 {font-size:200%;}
b. h2 {font-size:200px;}
c. both a and b
d. h2 {font-size:200;}
a. Normal
b. italic
c. oblique
d. None
32. Which of the following selects a normal, or small-caps face from a font
family?(d)
a. font-weight
b. font-synthesis
c. font-kerning
d. font-variant
33. Which of the following property sets the font size of text?(d)
a. text-size
b. font-size
c. size
d. text
a. single quoted
b. double quoted
c. comma
d. None
a. Semicolon
b. Comma
c. Dot
d. Slash
a. Space
b. word-spacing
c. word-space
d. Both b and c
a. p {color:red;text-align:center};
b. p {color:red;text-align:center}
c. p {color:red;text-align:center;}
d. p (color:red;text-align:center;)
a. text-trans
b. text-transformation
c. text-decoration
d. text-deco
b. margin
c. align
d. font
40. Which of the following CSS property is used to give a line over the text?
(b)
a. text-decoration: underline
b. text-decoration: overline
c. text-decoration: line-through
d. text-decoration: none
41. Which of the following property sets the amount of spacing between
letters?(c)
a. Space
b. line-height
c. letter-spacing
d. letter-space
42. Which of the following property defines labels for a list of items?(a)
a. list-style-type
b. list-style-image
c. list-style
d. list
a. :active
b. :hover
c. :link
d. :visited
44. Which of the following property assigns a graphic image to a list item?(b)
a. list-style-type
b. list-style-image
c. list-style
d. list
46. Which property can be used to indicate whether the marker should
appearoutside or inside of the box containing the bullet points?(b)
a. list-style-character:
b. list-style-position:
c. list-style-image:
a. One
b. Two
c. Three
d. Four
48. The _________ means an element that has the user’s mouse pointer
hovering(c)
over it.
a. a:link
b. a:visited
c. a:hover
a. a:active
b. a:visited
c. a:hover
50. When setting the style for several link states, there are some order rules(
c)
a. tbl-border
b. table-border
c. tb-border
d. border
a. Border
b. border-spacing
c. border-style
d. none
53. Which of the following property is used to control the space between the
border andcontent in a table(c)
a. Border
b. margin
c. padding
d. resize
a. Width
b. Height
c. Margin
d. Color
55. Which of the following property defines in a shorthand form the width,
style, and color for the top border of an element?(d)
a. border-style
b. border-height
c. border-width
d. border-top
56. Which of the following property sets the width of an element’s complete
border?(a)
a. border-width
b. width
c. border-depth
d. None
57. Which CSS property can be used to set the image as border instead of
the border style?(c)
a. background-image
b. border-image
c. background-image-source
d. border-image-source
58. Which of the following property specifies the look and design of an
outline?(b)
a. outline-font
b. outline-style
c. outline-format
d. None
59. Which of the following property sets the width of an element’s complete
border?(a)
a. border-width
b. width
c. border-depth
d. None
60. Which of the following property defines in a shorthand form the width,
style, and color for the left border of an element?(b)
a. border
b. border-style
c. border-left
a. Float
b. padding-left
c. Indent
d. margin-left
b. padding-left
c. Margin-right
d. margin-left
a. bottom-margin
b. padding-bottom
c. Margin-bottom
d. margin-left
a. True
b. False
a. Float
b. padding-left
c. Left-padding
d. margin-left
66. Which property is used to add space inside the text field?(a)
a. Padding
b. Margin
c. border
d. space
a. Right-margin
b. padding-left
c. Margin-right
d. margin-left
c. Lindsay method
d. Langridge method
a. bottom-margin
b. padding-bottom
c. Margin-bottom
d. margin-left
a. 1-D images
b. 2-D images
c. 3-D images
a. 100 pixels
b. 20 pixels
c. 10 pixels
d. 50 pixels
a. :first-letter
b. :last-child
c. :first-line
d. ::first-line
a. pseudo-tag
b. pseudo-element
c. pseudo-id
d. pseudo-class
75. Which of the following selector selects the elements that are checked?
(c)
a. E ~ F
b. ::after
c. :checked
a. height
b. max-height
c. min-height
d. max-width
a. width
b. max-height
c. min-height
d. max-width
a. width
b. max-height
c. min-height
d. max-width
a. line-height
b. max-height
c. min-height
d. max-width
80. Which of the following property defines a color for the face of a scroll
bar,including arrow regions and the scroll box?(d)
a. scrollbar-base-color
b. scrollbar-arrow-color
c. scrollbar-darkshadow-color
d. scrollbar-face-color
81. Which of the following property is used to set the color of the arrow
icon within ascroll bar?(b)
a. scrollbar-base-color
b. scrollbar-arrow-color
c. scrollbar-darkshadow-color
d. scrollbar-face-color
a. Visible
b. Scroll
c. Auto
d. Hidden