CSS Interview Questions

Dear readers, these CSS Interview Questions are specially designed to familiarize you with the nature of questions you might encounter in an interview for the CSS language. In my experience, good interviewers rarely plan to ask any specific questions during an interview. They usually start with some basic concepts of the topic and then move on based on further discussion and your responses:

What is CSS?

Cascading Style Sheets (CSS), also known as CSS, is a simple design language designed to simplify the rendering of web pages.

What are the advantages of using CSS?

The advantages of using CSS are as follows:

CSS saves time – You can write CSS once and reuse the same style sheet on multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.
Pages load faster – If you use CSS, you don’t need to write HTML tag attributes every time. You can write a CSS rule for one tag and apply it to all occurrences of that tag. Less code means faster download times.
Easy to maintain – To make global changes, simply change the style, and all elements in all web pages will automatically update.
Better styling than HTML – CSS has a wider array of properties than HTML, so it can give HTML pages a better look and feel than HTML attributes.
Multi-device compatibility – Style sheets allow content to be optimized for multiple types of devices. By using the same HTML document, you can serve different versions of your website for handheld devices (such as PDAs and cell phones) or for print.
Global web standard – Now that HTML attributes are being deprecated, CSS is recommended. Therefore, it’s a good idea to start using CSS on all your HTML pages to make them compatible with future browsers.
Offline Browsing – CSS can use offline caching to store web applications locally. This allows you to view websites offline. Caching also ensures faster loading and better overall performance.
Platform Independence – This script provides consistent platform independence and supports the latest browsers.

What are the components of a CSS style?

A style rule consists of three parts:

Selector – A selector is the HTML tag to which the style will be applied. This can be any tag such as

h1>or

table>, etc.

attribute – Attributes are attribute types of HTML tags. In short, all HTML attributes are converted to CSS properties. They can be colors, borders, etc.
value – The value assigned to an attribute. For example, a color attribute can be red or #F1F1F1, etc.

What is a Type Selector

A type selector is simply a name that matches an element type. To set a color for all first-level headings:

h1 {
color: #36CFFF; 
}

What is a universal selector?

A universal selector doesn’t select a specific type of element, but simply matches the name of any element:

* {
color: #000000; 
}

This rule renders the contents of every element in the document black.

What is a descendant selector?

Suppose you want to apply a style rule only to a specific element. As shown in the following example, the style rule only applies to the element as long as it is within the

ul> tag.

ul em {
color: #000000; 
}

What is a class selector?

You can define style rules based on an element’s class attribute. All elements with that class will be formatted according to the defined rule.

.black {
color: #000000; 
}

This rule renders the content of every element in the document with the class attribute set to black as black.

Can you make a class selector specific to an element type?

You can make it more specific. For example –

h1.black {
color: #000000; 
}

This rule renders the contents of the <h1> element with the class attribute set to black as black.

What is an ID selector?

You can define style rules based on an element’s id attribute. All elements with that id will be formatted according to the defined rule.

#black {
color: #000000; 
}

This rule renders the contents of every element in the document with the id attribute set to black as black.

Can you create a specific id selector for the element type?

You can be more specific. For example: −

h1#black {
color: #000000; 
}

This rule only renders the content within the <h1> element with the id attribute set to black.

What is a child selector?

See the following example −

body > p {
color: #000000; 
}

If <p> is a direct child of the <body> element, this rule will render all paragraphs black. Paragraphs placed within other elements (such as <div> or <td>) will not be affected by this rule.

What are attribute selectors?

You can also apply styles to HTML elements with specific attributes. The following style rule will match all input elements with a type attribute value of text −

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

The advantage of this method is that the <input type = "submit" /> element is not affected; the color is applied only to the desired text field.

How do you select all paragraph elements with a lang attribute?

p[lang]: Selects all paragraph elements with a lang attribute.

How do you select all paragraph elements with a lang attribute value of “fr”?

p[lang=”fr”]: Selects all paragraph elements with a lang attribute value of “fr”.

How do I select all paragraph elements whose lang attribute value contains the word “fr”?

p[lang~=”fr”]: Selects all paragraph elements whose lang attribute value contains the word “fr.”

How do I select all paragraph elements whose lang attribute value is “en” or begins with “en-“?

p[lang|=”en”]: Selects all paragraph elements whose lang attribute value is “en” or begins with “en-.”

What are the various ways to use CSS in HTML pages?

There are four ways to associate styles with HTML documents. The most common methods are inline CSS and external CSS.

Embedded CSS − <style> element: You can place CSS rules in an HTML document using the <style> element.
Inline CSS − The style attribute: You can use the style attribute of any HTML element to define style rules.
External CSS − The <link> element: The <link> element can be used to include external style sheet files in an HTML document.
Importing CSS − The @import rule: The @import rule is used to import external style sheets in a similar way to the <link> element.

How CSS Style Overriding Works

The following are the rules that override any style sheet rules: −

Any inline style sheet has the highest precedence. Therefore, it will override any rules defined within the <style>...</style> tag or any rules defined in any external style sheet file.
Any rules defined within the <style>...</style> tags will override any rules defined in any external style sheet.
Any rules defined in an external style sheet have the lowest priority and will only be applied if the two rules above do not apply.

What is the purpose of the % (percent) measurement unit?

% – Defines a percentage measurement relative to another value, usually an enclosing element.

p {font-size: 16pt; line-height: 125%;}

What is the purpose of the cm (centimeter) measurement unit?

cm – Defines a measurement in centimeters.

div {margin-bottom: 2cm;}

What is the purpose of the em (relative unit) measurement unit?

em – A relative unit of measurement used for font height. Because one em unit equals the size of a given font, if a font is assigned a 12pt scale, each “em” unit will be 12pt; therefore, 2em will be 24pt.

p {letter-spacing: 7em;}

What is the purpose of the ex (relative unit) measurement unit?

ex – This value is measured relative to the font’s x-height. The x-height is determined by the height of the font’s lowercase letters.

p {font-size: 24pt; line-height: 3ex;}

What is the purpose of the in (inch) unit of measurement?

in – defines measurements in inches.

p {word-spacing: .15in;}

Why do we use millimeters (mm) as a unit of measurement?

mm – defines measurements in millimeters.

p {word-spacing: 15mm;}

Why do we use pica (pc) as a unit of measurement?

pc – Defines measurements in picas. One pica is equal to 12 points, so there are 6 picas in an inch.

p {font-size: 20pc;}

Why do we use points (pt) as a unit of measurement?

pt – Defines measurements in points. A point is defined as 1/72 of an inch.

body {font-size: 18pt;}

Why do we use pixels (px) as a unit of measurement?

px – Defines measurements in screen pixels.

p {padding: 25px;}

Why do we use viewport height (vh) as a measurement unit?

vh – 1% of the viewport height.

h2 { font-size: 3.0vh; }

Why do we use viewport width (vw) as a measurement unit?

vw – 1% of the viewport width.

h1 { font-size: 5.9vw; }

Why do we use viewport minimum (vmin) as a measurement unit?

vmin – 1vw or 1vh, whichever is smaller.

p { font-size: 2vmin;}

How many formats can you specify CSS colors in?

You can specify color values in a variety of formats. The following table lists all possible formats. –

Format	Syntax	Example
Hexadecimal Code	#RRGGBB	p{color:#FF0000;}
Short Hexadecimal Code	#RGB	p{color:#6A7;}
RGB percentage	rgb(rrr%,ggg%,bbb%)	p{color:rgb(50%,50%,50%);}
RGB absolute value	rgb(rrr,ggg,bbb)	p{color:rgb(0,0,255);}
Keyword	aqua, black, etc.	p{color:teal;}

What are Browser-Safe Colors?

This is a list of 216 colors considered the safest and most computer-independent colors. The hexadecimal codes for these colors range from 000000 to FFFFFF. These colors are safe to use because they are guaranteed to display correctly on all computers running a 256-color palette.

Which property sets the background color of an element?

The background-color property sets the background color of an element.

Which property sets the background image of an element?

The background-image property sets the background image of an element.

Which property controls the repetition of a background image?

The background-repeat property controls the repetition of a background image.

Which property controls the position of a background image?

The background-position property controls the position of a background image.

Which property controls the scrolling of a background image?

The background-attachment property controls the scrolling of a background image.

Which property is used as a shorthand to specify multiple other background properties?

The background property is used as a shorthand to specify multiple other background properties.

Which property changes the font style?

The font-family property changes the font style.

Which property makes a font italic or oblique?

The font-style property makes a font italic or oblique.

Which property creates a small-caps effect?

The font-variant property creates a small-caps effect.

Which property is used to increase or decrease the weight of a font?

The font-weight property is used to increase or decrease the weight of a font.

Which property is used to increase or decrease the size of a font?

The font-size property is used to increase or decrease the size of a font.

Which property is used as a shorthand to specify multiple other font properties?

The font property is used as a shorthand to specify multiple other font properties.

Which property is used to set the color of text?

The color property is used to set the color of text.

Which property is used to set the direction of text?

The direction property is used to set the direction of text.

Which property is used to increase or decrease the space between letters in a word?

The letter-spacing property increases or decreases the space between letters in a word.

Which property increases or decreases the space between words in a sentence?

The word-spacing property increases or decreases the space between words in a sentence.

Which property indents paragraph text?

The text-indent property indents paragraph text.

Which property aligns text in a document?

The text-align property aligns text in a document.

Which property underlines, overlines, and strikethroughs text?

The text-decoration property underlines, overlines, and strikethroughs text.

Which property converts text to uppercase, lowercase, or titlecase?

The text-transform property is used to convert text to uppercase, lowercase, or titlecase.

Which property is used to control the flow and formatting of text?

The white-space property is used to control the flow and formatting of text.

Which property is used to set a text shadow around text?

The text-shadow property is used to set a text shadow around text.

Which property is used to set the width of an image’s border?

The border property is used to set the width of an image’s border.

Which property is used to set the height of an image?

The height property is used to set the height of an image.

Which property is used to set the width of an image?

The width property is used to set the width of an image.

Which property is used to set the opacity of an image?

The -moz-opacity property is used to set the opacity of an image.

Which hyperlink property indicates an unvisited hyperlink?

:link indicates an unvisited hyperlink.

Which hyperlink property indicates a visited hyperlink?

:visited indicates a visited hyperlink.

Which hyperlink property indicates the element the mouse pointer is hovering over?

:hover indicates the element the mouse pointer is hovering over.

Which hyperlink property indicates the element the user is currently clicking on?

:active indicates the element the user is currently clicking on.

Which table property specifies whether the browser should control the appearance of adjacent borders?

The border-collapse property specifies whether the browser should control the appearance of adjacent borders, meaning borders that are adjacent to each other, or whether each cell should maintain its own style.

Which table property specifies the width that should be displayed between table cells?

The border-spacing property specifies the width that should be displayed between table cells.

Which property controls the position of table captions?

Table captions are rendered using the <caption> element. By default, captions are rendered above the table in a document. You can control the position of table captions using the caption-side property.

Which property specifies whether borders are displayed when cells are empty?

The empty-cells property specifies whether borders are displayed when cells are empty.

Which property allows the browser to speed up table layout by using the first width property?

The table-layout property allows the browser to speed up table layout by using the first width property it encounters, rather than having to load the entire table before rendering it.

Which property specifies the color of the border?

The border-color property specifies the color of the border.

Which property specifies whether the border should be solid, dashed, double, or one of its possible values?

The border-style property specifies whether the border should be solid, dashed, double, or one of its possible values.

Which property specifies the width of the border?

The border-width property specifies the width of the border.

Which property is used as a shorthand property for setting margin properties in a single declaration?

The margin property is used as a shorthand property for setting margin properties in a single declaration.

Which property specifies the bottom margin of an element?

The margin-bottom property specifies the bottom margin of an element.

Which property specifies the top margin of an element?

The margin-top property specifies the top margin of an element.

Which property specifies the left margin of an element?

The margin-left property specifies the left margin of an element.

Which property specifies the right margin of an element?

The margin-right property specifies the right margin of an element.

Which property allows you to control the shape or appearance of a list marker?

The list-style-type property allows you to control the shape or appearance of a list marker.

Which property specifies whether the long point where a line wraps to the second line should align with the first line of the list marker or begin below the start of the list marker?

The list-style-position property specifies whether the long dot that wraps to the second line should align with the first line of the list marker or begin below the start of the list marker.

Which property specifies that the list marker’s marker should be an image instead of a solid dot or number?

The list-style-image property specifies that the list marker’s marker should be an image instead of a solid dot or number.

Which property is used as a shorthand for the style property of a list?

The list-style property is used as a shorthand for the style property of a list.

Which property specifies the distance between the marker and text in a list?

The marker-offset property specifies the distance between the marker and text in a list.

Which property specifies the bottom padding of an element?

The padding-bottom property specifies the bottom padding of an element.

Which property specifies the top padding of an element?

The padding-top property specifies the top padding of an element.

Which property specifies the left padding of an element?

The padding-left property specifies the left padding of an element.

Which property specifies the right padding of an element?

The padding-right property specifies the right padding of an element.

Which property serves as a shorthand for all padding properties on an element?

Padding serves as a shorthand for all padding properties on an element.

Which property allows you to specify the type of cursor that should be displayed to the user?

The CSS cursor property allows you to specify the type of cursor that should be displayed to the user.

Which cursor property value changes the cursor shape based on the context of the area it’s in?

auto − The cursor shape depends on the context of the area it’s in. For example, an ‘I’-shaped cursor appears over text, a ‘hand’-shaped cursor appears over links, and so on.

Which cursor property value changes the cursor to a crosshair or a plus sign?

crosshair − A crosshair or a plus sign.

Which cursor property value changes the cursor to an arrow?

default − An arrow.

Which cursor property value changes the cursor to a hand?

pointer − A pointing hand (in IE 4, this value is hand).

Which cursor property value changes the cursor to an ‘I’-shaped cursor?

move or text − An ‘I’-shaped cursor.

Which cursor property value changes the cursor to an hourglass?

wait − Hourglass.

Which cursor property value changes the cursor to a question mark?

help − Question mark or balloon, perfect for a help button.

Can I set an image as the cursor display?

Yes! Set the URL as the source of the cursor image file.

What property sets the outline width?

The outline-width property sets the outline width.

What property sets the outline style?

The outline-style property sets the outline style.

What property sets the outline color?

The outline-color property sets the outline color.

Which property sets all border properties at once?

The outline property sets all border properties at once.

Which property sets the height of a box?

The height property sets the height of a box.

Which property sets the width of a box?

The width property sets the width of a box.

What’s Next?

Furthermore, review your past assignments on this topic and make sure you can speak confidently about them. If you’re a beginner, the interviewer doesn’t expect you to answer complex questions; they want you to have a solid foundation.

Secondly, if you can’t answer some questions, it doesn’t really matter. What’s more important is that you confidently answer the questions you know. So stay confident during the interview. We at TutorialPoint hope you find a good interviewer and wish you all the best in the future. Good luck! 🙂