CSS Interview Questions and Answers
CSS: Cascading style sheet
Developed by: First proposed by Hakon Wium Lie on October 10, 1994
And Bert Bos; Now World wide web consortium(W3C)
First release date: December 17, 1996
File extension: .CSS
1. What is CSS?
✓ CSS stands for Cascading Style Sheet.
✓ CSS is the language, used to style an HTML document.
✓ CSS is added styles like colors, borders, margin etc.
2. What was the purpose of developing CSS?
✓ CSS was developing the visual appearance of websites.
3. What are the different types of CSS?
Inline CSS
✓ Inline CSS is used to style only a small piece of code.
✓ Inline styles added directly by using the style attribute inside the HTML elements.
Ex: <body style = “background-color: white;”>
<h1 style = “color: red; background-color: black”> Inline style </h1>
<h2 style = “color: red;”>A Red Heading</h2>
<p style = “color: blue;”>A Blue paragraph</p>
Internal CSS or Embedded CSS
✓ Internal CSS is set of CSS styles included within the head section of the HTML page.
✓ Internal CSS by using <style> tag.
✓ Internal CSS used when a single document has a unique style.
Ex: <style>
/*Add the styles here*/
</style>
External CSS
✓ External CSS is applied to many pages.
✓ External CSS style sheet, each page must link to the <link> tag inside the head section of the
HTML page.
✓ External CSS style sheet must link to the HTML page.
Ex: <head>
<link rel = stylesheet” type = “text/css” href = “mystyles.css”>
</head>
4. What happens if you open the external CSS file in a browser?
✓ Try to open the external CSS file in a browser,
the browser will not open the file.
✓ Because the file has a different extension.
✓ Try to open, only one way to open the external CSS file,
must reference to the <link> tag within another HTML page.
5. What are the advantages of CSS?
✓ The styles of several documents can be controlled from a single site.
✓ Multiple HTML elements can have many documents, classes can be created.
✓ To group styles in complex situations, selector and grouping methods are used.
6. What are the disadvantages of CSS?
✓ Ascending by selectors is not possible
✓ Limitations of vertical control
✓ No expressions
✓ No column declaration
✓ Pseudo-classes can’t be controlled by dynamic behavior
✓ Rules, styles, targeting specific text is not possible.
7. Name of some CSS Frameworks?
✓ CSS frameworks are libraries that make web pages styling easier.
✓ Some of them are Bootstrap, Foundation, Gumby, Ukit, Semantic UI, etc.
Bootstrap
✓ Bootstrap is the most popular CSS framework for developing responsive and mobile-first
websites.
✓ Bootstrap 4 is the newest version of Bootstrap.
Foundation
✓ Foundation is a responsive front-end framework.
✓ Foundation provides a responsive grid and HTML and CSS UI components, templates, and code
snippets, including typography, forms, buttons, navigation and other interface elements, as well
as optional functionality provided by JavaScript extensions.
Semantic UI
✓ Semantic UI is a modern front-end development framework, powered by LESS(CSS-
preprocessor) and jQuery.
✓ It has a sleek, subtle, and flat design look that provides a lightweight user experience.
Ukit
✓ Ukit is a lightweight and modular front-end framework for developing fast and powerful web
interfaces.
8. Can you explain the CSS rules?
✓ CSS rules have two main parts: selector and declaration block.
Syntax: selector {property: value;}
9. What is CSS selector and declaration block?
Selector:
✓ CSS selector points the HTML elements to style.
✓ CSS selector is a string that identifies the elements to particular declaration apply.
✓ CSS selector is also referred as a link between the HTML document and the style sheet.
✓ CSS selector is used to find the HTML elements based on their element names
▪ Element selector
▪ Class selector
▪ Id selector
▪ Universal selector
Example: body { }, h1{ } and p{ }, etc.
Declaration block:
✓ How the selected elements should be styled.
✓ Multiple declarations are separated by semi-colon (;)
Example: {property: value;}
NOTE: Declaration is split in two types: property and value
Property:
✓ Properties are inside the curly brackets,
o which simply take the form of words such as background color, color, font-weight, etc.
Ex: {font-weight: ;}
Ex1: Ex2:
Value:
h1{ body{
✓ Values is given to the properties following a colon (:)
color: blue; background-color: white;
✓ Semi-colons (;) are used to separate the properties. text-align: center; color: azure;
} font-size: 12;
Ex: { :10px; OR :blue;}
}
NOTE: The property name and value are separated by a colon ( : )
10. Explain the Element selector, id selector, class selector and universal selector?
Element selector Universal selector
✓ Element selector matches one or more ✓ Universal selector matches the name of any
HTML elements of the same name. and all types of HTML elements.
✓ For example, the provided styles will get ✓ Universal selector is used before with *
applied to all the ul elements on the page. (asterisk) symbol.
Ex: ul{ Ex: <style>
line-style: none; *{
border: solid 1px #ccc; color: green;
} font-size: 20px;
line-height: 25px;
</style>
class selector Id selector
✓ Class selector is ✓ Id selector is
used to select all HTML elements used to set the style of the given id.
which belongs to a particular class
attribute. ✓ Id attribute is the
unique identifier in an HTML document.
✓ Class selector used before
(.)dot character with specifying the ✓ Id selector is used with a # symbol.
class name. Ex: #container{
Width: 960px;
Ex: .box{ Margin: 0 auto;
padding: 10px; }
margin: 10px;
width: 240px; <div id= = “container”></div>
}
<div class = “box”></div>
11. What is the difference between a class and an ID?
✓ Class is not unique and have multiple elements.
✓ ID is unique and it can be assigned to a single element.
12. How can we format the text in CSS?
✓ CSS text formatting properties are used to format the text and style the text.
✓ CSS text formatting includes the following properties:
✓ text-alignment ✓ text-transformation
✓ text-color ✓ text-shadow
✓ text-decoration ✓ letter spacing
✓ text-direction ✓ line height
✓ text-indentation ✓ word spacing
13. Name some of the font-related CSS attributes?
✓ Font-related CSS attributes are
a. font-family,
b. font-size,
c. font-style,
d. font-variant and
e. font-weight etc.,
14. How can you target h2 and h3 with the same styling?
✓ Multiple elements can be separates by a comma.
o h2, h3{color: red;}
15. What are the float properties of CSS?
✓ Float property of CSS positions an image to the left OR right as needed,
o Including the text wrapping around it.
✓ Float property doesn’t change the property of the elements used before it.
o float: left;
o float: none;
o float: right;
16. What are the CSS background properties?
✓ CSS background properties are used to define the background effects for elements.
✓ CSS background properties are as follows:
background-color
✓ background-color property specifies the background color of an element.
background-image
✓ background-image property specifies an image to use the background of an element.
✓ By default, the image is repeated so it’s covering the entire element.
background-repeat
✓ background-repeat property by default the background image repeats
▪ both horizontally and vertically.
background-attachment
✓ background-attachment property is used to fix the background-image.
✓ image will not scroll the page.
background-position
✓ background-position property is used to set the image to a particular position.
17. How to control the CSS image repetation?
✓ background-repeat property is used to control the image.
Ex: h3 {
background-repeat: none;
}
18. What are the different ways of background - positions in CSS?
✓ background-position property specifies the positions.
✓ There are five different position values are
▪ Fixed, Static, Absolute, Relative and sticky
19. What are the different CSS border properties?
✓ CSS border properties allows to set the style, color, and width of the border.
border-color:
✓ border-color property is used to set the color of the border.
✓ Color can be set by
• Name – specify a color name, like “red”
• HEX – specify a HEX value, like “#ff0000”
• RGB – specify a RGB value, like “rgb(255, 0, 0)”
• HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
• transparent
border-style:
✓ border-style property specifies the type of border.
✓ border-styles are dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden
border-width:
✓ border-width sets the width of the border.
✓ width of the border can be in px, pt, cm, em
OR
o pre-defined values: thin, medium OR thick.
20. What are the CSS colors?
✓ Colors are specified using predefined color names.
RGB
✓ In CSS, a color can be specified as RGB value,
• Using this formula: rgb (red, green, blue)
✓ Each parameter (red, green and blue) defines the colors between 0 - 255.
✓ To display the black color, set all color parameters to 0, like this: rgb (0, 0, 0).
✓ To display the white color, set all color parameters to 255, like this: rgb (255, 255, 255).
RGBA
✓ RGBA color values are an extension of RGB color values
o with an alpha channel - which specifies the opacity for a color.
✓ RGBA color value is specified with: rgba (red, green, blue, alpha)
✓ Alpha parameter is a number between
o 0.0 is fully transparent and
o 1.0 is not transparent at all
Ex: rgba (255, 99, 71, 0.5)
HEX
✓ In CSS, a color can be specified using a hexadecimal value
▪ Using in the form: #rrggbb
✓ Where
o rr (red),
o gg (green) and
o bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
✓ To display black color, set all values to 00, like this: #000000.
✓ To display white color, set all values to ff, like this: #ffffff.
✓ For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are
set to the lowest value (00).
HSL
✓ In CSS, a color can be specified using hue, saturation, and lightness (HSL)
o HSL in the form of: hsl (hue, saturation, lightness)
✓ Hue is a degree on the color wheel from 0 to 360.
• 0 is red,
• 120 is green, and
• 240 is blue.
✓ Saturation is a percentage value.
o 0% means a shade of gray and
o 100% is the full color.
✓ Lightness is also a percentage.
o 0% is black,
o 50% is neither light or dark,
o 100% is white
✓ Experiment by mixing the HSL values below:
o hsl (0, 100%, 50%)
HSLA
✓ HSLA color values are an extension of HSL color values
o with an alpha channel - which specifies the opacity for a color.
✓ HSLA color value is specified with: hsla (hue, saturation, lightness, alpha)
✓ Alpha parameter is a number between
o 0.0 is fully transparent and
o 1.0 is not transparent at all
✓ Experiment by mixing the HSLA values below:
o hsla (0, 100%, 50%, 0.5)
21. What are the pseudo classes and pseudo elements?
Pseudo-classes
✓ Pseudo-classes are created new classes (most of which are related to user input)
▪ that we can apply styles.
✓ Pseudo-classes are the type of pseudo-elements that don’t exist in a normal document.
✓ Pseudo-classes are
allows selecting the regular elements under certain conditions especially
when we try to hover over the link.
✓ anchor tags are: link: visited, :hover, :active, :focus
✓ In this example, the color will be red on the anchor tag when it’s hovered.
Ex:
/* mouse over link */
a: hover {
color: #FFOOFF;
}
Pseudo-elements
✓ Pseudo-elements add new elements in the document where they didn’t exist before.
✓ Pseudo-elements provide special effects to some selectors.
✓ CSS finds use in applying styles in HTML markups.
✓ style in not feasible for a document,
✓ pseudo-elements help by allowing extra markup without interfering with the original document.
22. Define Z-index?
✓ Z-index is a CSS property that defines the order of overlapping HTML elements.
✓ Z-index is used to specify the stack order of elements that overlap each other
✓ Z-index default values are zero and
• can take both negative and positive values.
✓ Elements with a higher index will be placed on top of elements with a lower index
✓ It takes the following values-auto, number, initial and inherit.
Z-Index can take the following values:
o Auto: Sets the stack order equal to its parents.
o Number: Orders the stack order.
o Initial: Sets this property to its default value (0).
o Inherit: Inherits this property from its parent element.
23. Explain the difference between visibility: hidden and visibility none?
Visibility: hidden display: none
✓ visibility: hidden hides the element, ✓ display: none also hides the element but not
occupy space.
But it occupies space and affects the layout
of the document.
✓ It will not affect the layout of the document.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
h1.vis { h1.vis {
visibility: visible; display: block;
} }
h1.hid { h1.hid {
visibility: hidden; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<h1 class="vis">It is visible</h1> <h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1> <h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden, but it still occupi <p>Note - Second heading is hidden and not occupy
es space. </p> space</p>
</body> </body>
</html> </html>
24. What are CSS units?
Absolute
✓ Absolute units are generally considered to always be the same size
Unit Name Equivalent Unit Name Equivalent
Cm Centi meters 1cm = 37.8px = 25.2/64 in pc Picas 1 pc = 1/6th of 1 in
Mm Milli meters 1mm = 1/10th of 1cm pt Points 1 pt = 1/72th of 1 in
Q Quarter – milli meter 1q = 1/40th of 1cm px Pixel 1 px = 1/96th of 1 in
In inches 1 in = 2.54cm = 96px
Relative
✓ Relative units on the other hand are relative to something else, perhaps the size of the parent element
font OR the size of the viewport.
Units Relative to
em Font size of the parent, in the case of typographical properties like font-size and
font – size of the element it-self, in the case of other properties like width.
ex X – height of the element font
ch The advance measure(width) of the glyph ‘o’ of the element font
rem Font – size of the root element.
1h Line height of the element.
vw 1% of the viewport width
vh 1% of the viewport height
vmin 1% of the viewport smaller dimension
vmax 1% of the viewport larger dimension
25. What is the box model in CSS3?
✓ CSS box model is a fundamental to understanding layout and sizing.
✓ Rectangle box is wrapped around every HTML element.
✓ Box model is used to determine the
height and width
of the rectangular box.
✓ CSS Box consists of
Width and height,
padding,
borders,
margin.
Content:
✓ Actual Content of the box where the text or image is placed.
Padding:
✓ Area surrounding the content (Space between the border and content).
Ex: div{
Border:
width: 200px;
✓ Area surrounding the padding.
height: 100px;
border: 20px solid blue;
Margin:
padding: 50px;
✓ Area surrounding the border.
margin: 25px;
}
26. What is FLEXBOX?
✓ CSS flexbox module or simply known as flexbox is a one-dimensional layout model.
✓ Flexbox design and efficient layout, align and distribute space among items in a container.
✓ Flexbox helps you arrange elements in a webpage with ease
<!DOCTYPE html> <body>
<html> <div class="container">
<head> <div>1</div>
<style> <div>2</div>
.flex-container { <div>3</div>
display: flex; </div>
background-color: #f4b042; <p> Example of <em>flex</em>box</p>
} </body>
.flex-container > div { </html>
background-color: #d60a33;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
27. Why FLEXBOX?
✓ Lot of flexibility.
✓ Arrange items
✓ Spacing
✓ Alignment
✓ Order of items
28. What are the Flex container properties?
✓ display ✓ row – gap
✓ flex – direction ✓ gap
✓ flex – wrap ✓ justify-content
✓ flex – flow ✓ align-items
✓ column – gap ✓ align-content
29. What is CSS display
✓ Create either a block level OR inline level flex container
30. What is flex – direction?
✓ Sets the direction of the main axis.
o row
o row-reverse
o column
o column-reverse
31. What is flex – wrap?
✓ Control the wrapping of flex items within the container
o nowrap
o wrap
o wrap-reverse
32. What is Flex-flow?
✓ Shorthand for flex direction and flex wrap.
Flex – flow: <flex – direction> <flex – wrap>
33. What are the gap properties?
✓ Specify the gap between columns using column - gap
✓ Specify the gap between row using row – gap
✓ Specify the both row and column gap using
gap: <row gap> <column gap>
✓ Values can be a non-negative value OR a percentage.
34. What is justify – content?
✓ Align items distribute any extra spacing in the parent container
✓ Alignment is always along the main axis.
✓ flex – start ✓ space – between
✓ flex – end ✓ space – around
✓ center ✓ space – evenly
35. What is align – items?
✓ Align – items along the cross axis.
✓ flex – start ✓ center
✓ flex – end ✓ baseline and stretch
36. What is align – content?
✓ Align-content along the
cross axis
and
distribute any extra spacing in the parent – container.
✓ flex – start ✓ space – between
✓ flex – end ✓ space – around
✓ center ✓ stretch
37. What is flex item properties?
✓ order ✓ flex – basis
✓ flex – grow ✓ flex
✓ flex – shrink ✓ align – self
38. What is flex item properties order?
✓ Control the order of items in the flex container integer value.
39. What is flex item properties flex - grow?
✓ What amount of the available space inside the flex container the item should take up.
✓ Relative to the others items in the container.
✓ Flex – grow default value is 0 → items do not grow.
✓ Flex – grow value of 1 → flex items grow evenly.
40. What is flex item properties flex – shrink?
✓ Shrink factor of the flex items
when the default size of flex items is larger than the flex container.
✓ Relative to the other items in the container.
✓ Default value is 1.
41. What is flex item properties flex – basis?
✓ Set the initial size of a flex item.
✓ Pixels, percentage OR relative units.
✓ Default value is auto.
42. What is flex item properties flex?
✓ Shorthand for flex – grow, flex – shrink and flex – basis.
Ex: Ex: Ex: Default
.item{ .item{ .item{
Flex – grow: 2; Flex: 2 5 200px; Flex: 0 1 auto;
Flex – shrink: 5; } }
Flex – basis: 200px;
} Flex: <flex – grow>< flex – shrink> <flex – basis>
43. What is flex item properties align - self?
✓ Align items individually.
Values like auto, flex – start, flex – end and stretch.
✓ Overrides the align – items value of the flex container.
44. What is CSS grid?
✓ CSS grid layout module OR simply known as grid
OR
✓ Grid is a two – dimensional grid-based layout system.
✓ With rows and columns,
Grid makes it is easier to design a web page layout,
align and distribute space among items in a grid.
✓ Grid for 2D layout.
Grid cell → Item 3
Grid track → Item 1 and Item 4
Grid area → Item 2, Item 3, Item 5 and Item
45. What are the grid container properties?
✓ display ✓ row – gap ✓ justify – content
✓ grid - template – columns ✓ gap ✓ align – content
✓ grid - template – rows ✓ justify – items ✓ place – content
✓ grid – template ✓ align – items ✓ grid – auto – columns
✓ column – gap ✓ place – items ✓ grid – auto – rows
✓ grid - auto – flow
46. What are the grid container property display?
✓ Create either a block – level
OR
Inline – level grid container
o Grid
o Inline-grid
47. What are the grid container property grid – template - columns?
✓ Specifies the number of columns(width) in a grid layout.
✓ Non-negative length value like px and %(percentage)
✓ Fraction of the free space available.
✓ repeat() and minmax( )
48. What are the grid container property grid – template - rows?
✓ Specifies the number of rows(height) in a grid layout.
✓ Non-negative length value like px and %(percentage)
✓ Fraction of the free space available.
✓ repeat() and minmax( )
49. What are the grid container property grid – template?
✓ Shorthand for specifying rows and columns.
Value is: <grid-template-rows> <grid-template-columns>
50. What are the grid container property gap properties?
✓ Specify the gap between columns using column – gap
✓ Specify the gap between rows using row – gap
✓ Specify both row and column gap using
gap: <row gap> <column gap>
✓ Values can be a non-negative value or a percentage
51. What are the grid container property alignment & spacing within cell?
✓ justify-items for alignment along the row axis.
✓ align-items for alignment along the column axis.
✓ place-items is a shorthand for <align-items> <justify-items>
✓ Values can be
▪ start, end, center and stretch(default)
52. What are the grid container property alignment & spacing within container?
✓ justify-items for alignment along the row axis.
✓ align-items for alignment along the column axis.
✓ place-items are a shorthand for <align-items> <justify-items>
✓ Values can be
▪ start, end, center, stretch, space - between, space – around and space - evenly
53. What are the grid container property grid auto properties?
✓ grid - auto - flow controls is auto – placed items get inserted into the grid
✓ Possible values are row, column, dense, row – dense, column – dense
✓ grid – auto – column for setting default column width.
✓ grid – auto – row for setting default column height.
✓ Values can be
▪ pixel, percentage, minmax, auto(default), etc.
54. What are the grid container property grid item position?
✓ grid – column – start,
grid – column – end,
grid – row – start,
grid – row – end properties control the position of the item in the grid.
✓ Using grid – column and grid -row shorthand for the same purpose.
✓ Values can be a grid line number OR the number of columns or row the item has to span.
55. What are the grid container property grid item - alignment?
✓ justify – self for alignment along the row axis.
✓ align – self for alignment along the column axis.
✓ place – self is a shorthand for: <align-self> <justify - self>
✓ Values can be
▪ start, end, center and stretch(default).
