Basic and Advance CSS Examples and Concepts Interview Questions And Answers
Download Cascading Style Sheet CSS Interview Questions and Answers PDF
Elevate your Cascading Style Sheet CSS interview readiness with our detailed compilation of 26 questions. These questions are specifically selected to challenge and enhance your knowledge in Cascading Style Sheet CSS. Perfect for all proficiency levels, they are key to your interview success. Get the free PDF download to access all 26 questions and excel in your Cascading Style Sheet CSS interview. This comprehensive guide is essential for effective study and confidence building.
26 Cascading Style Sheet CSS Questions and Answers:
Cascading Style Sheet CSS Job Interview Questions Table of Contents:
1 :: What Is CSS (Cascading Style Sheets)?
CSS (Cascading Style Sheets) is a technical specification that allows HTML document authors to attach formatting style sheets to HTML documents. When HTML documents are viewed as Web pages through Web browsers, the attached style sheets will alter the default style sheets embedded in browsers.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.
CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.
Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.
Read MoreOne of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.
CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.
Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.
2 :: What Is the Basic Unit of CSS?
The basic unit of CSS is a definition of a style property for a selected HTML tag written in the following syntax:
html_tag_name {style_property_name: style_property_value}
For example:
/* set background color to black for the <BODY> tag */
BODY {background-color: black}
/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}
/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}
How Many Ways to Attach CSS to HTML Documents?
There are 3 ways to attach CSS to HTML documents:
► Included in the STYLE attribute of HTML tags.
► Included in the STYLE tag inside the HEAD tag.
► Included in an external file and specify it in the LINK tag inside the HEAD tag.
Read Morehtml_tag_name {style_property_name: style_property_value}
For example:
/* set background color to black for the <BODY> tag */
BODY {background-color: black}
/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}
/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}
How Many Ways to Attach CSS to HTML Documents?
There are 3 ways to attach CSS to HTML documents:
► Included in the STYLE attribute of HTML tags.
► Included in the STYLE tag inside the HEAD tag.
► Included in an external file and specify it in the LINK tag inside the HEAD tag.
3 :: How To Include CSS Inside a HTML Tag?
If you want to include CSS inside a HTML tag, you can use the STYLE attribute as <TAG STYLE="css_definition" ...>. Of course, the CSS definition will only apply to this instance of this tag. The following tutorial exercise shows you how to set background to gray on a <PRE> tag:
<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
black #000000
white #ffffff
gray #7f7f7f
red #ff0000
green #00ff00
blue #0000ff
</pre>
Read More<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
black #000000
white #ffffff
gray #7f7f7f
red #ff0000
green #00ff00
blue #0000ff
</pre>
4 :: How To Include CSS Inside the HEAD Tag?
If you want to include CSS inside the HEAD tag and apply to the entire HMTL docuemnt, you can use the STYLE tag as <STYLE TYPE="text/css">css_definition</STYLE>. The following tutorial exercise shows you how to set body background to black and paragraph text to yellow:
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {color: yellow}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
Read More<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {color: yellow}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
5 :: How To Store CSS Definitions in External Files?
If you want to share a set of CSS definitions with multiple HTML documents, you should those CSS definitions in an external file, and link it to those HTML documents using the LINK tag in the HEAD tag as:
<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>
Below is a CSS file called, GlobalGuideLine.css, that stores the same CSS definitions used in the previous exercise:
BODY {background-color: black}
P {color: yellow}
If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:
<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="GlobalGuideLine.css"/>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
Read More<HEAD>
...
<LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/>
...
</HEAD>
Below is a CSS file called, GlobalGuideLine.css, that stores the same CSS definitions used in the previous exercise:
BODY {background-color: black}
P {color: yellow}
If you modify the HTML document with the LINK tag instead of the STYLE tag, you can get the same result:
<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="GlobalGuideLine.css"/>
</head><body>
<p>Welcome to GlobalGuideLine.com.
You should see this text in yellow on black background.</p>
</body></html>
6 :: How Many Ways to Select HTML Tag Instances?
If you define a style property for a HTML tag, this definition will apply to all instances of that tag in the entire document. If you want to apply different style property values to different instances of the same tag, you need to use the tag selection mechanisms defined in CSS:
► Tag Selector - Selects all instances of a HTML tag.
► Contextual Selector - Selects all instances of a HTML tag nested inside other specified tags.
► Class Selector - Selects all HTML tags that matches the class name defined in the tag attribute of class="class_name".
► ID Selector - Selects all HTML tags that matches the id name defined in the tag attribute of id="id_name".
► Group Selector - Selects multiple HTML tags.
► Mixed Selector - Selects instances of HTML tags mixed with other selectors.
Read More► Tag Selector - Selects all instances of a HTML tag.
► Contextual Selector - Selects all instances of a HTML tag nested inside other specified tags.
► Class Selector - Selects all HTML tags that matches the class name defined in the tag attribute of class="class_name".
► ID Selector - Selects all HTML tags that matches the id name defined in the tag attribute of id="id_name".
► Group Selector - Selects multiple HTML tags.
► Mixed Selector - Selects instances of HTML tags mixed with other selectors.
7 :: What Is a Class Selector in CSS?
A class selector selects all HTML tags that matches the class name defined in the tag attribute of class="class_name". Class selectors are specified with a leading dot like (.class_name). For example, the following CSS definition uses a class selector:
/* set text to italic to all tags with class="quote" */
.quote {font-style: italic}
If you apply the above CSS definition to the following HTML document, you will get two blocks in italic, one from the <p> tag and one from the <pre> tag:
<p>Normal paragraph...</p>
<p class="quote">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre class="quote">Special pre-formatted text...</pre>
Read More/* set text to italic to all tags with class="quote" */
.quote {font-style: italic}
If you apply the above CSS definition to the following HTML document, you will get two blocks in italic, one from the <p> tag and one from the <pre> tag:
<p>Normal paragraph...</p>
<p class="quote">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre class="quote">Special pre-formatted text...</pre>
8 :: What Is a ID Selector in CSS?
A ID selector selects all HTML tags that matches the id name defined in the tag attribute of id="id_name". ID selectors are specified with a leading hash like (#id_name). For example, the following CSS definition uses an ID selector:
/* set text to red to all tags with id="onSale" */
#onSale {color: red}
If you apply the above CSS definition to the following HTML document, you will get two blocks in red, one from the <p> tag and one from the <pre> tag:
<p>Normal paragraph...</p>
<p id="onSale">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre id="onSale">Special pre-formatted text...</pre>
Read More/* set text to red to all tags with id="onSale" */
#onSale {color: red}
If you apply the above CSS definition to the following HTML document, you will get two blocks in red, one from the <p> tag and one from the <pre> tag:
<p>Normal paragraph...</p>
<p id="onSale">Special paragraph...</p>
<pre>Normal pre-formatted text...</pre>
<pre id="onSale">Special pre-formatted text...</pre>
9 :: What Is a Contextual Selector in CSS?
A contextual selector selects a HTML tag that is nested inside another specified tag. Contextual selectors are specified with two tags separated with a space like (outer_tag inner_tag). For example, the following CSS definition uses a contextual selector:
/* set paragraph inside a table to use arial font family */
FORM P {font-family: arial}
Read More/* set paragraph inside a table to use arial font family */
FORM P {font-family: arial}
10 :: What Is a Group Selector in CSS?
A group selector selects multiple HTML tags. Group selectors are specified with multiple tags separated with a comma like (tag, tag, tag). For example, the following CSS definition uses a group selector:
/* set background color to gray for all instances
of three tags: <UL>, <OL>, and <DL> */
UL, OL, DL {background-color: gray}
Read More/* set background color to gray for all instances
of three tags: <UL>, <OL>, and <DL> */
UL, OL, DL {background-color: gray}
11 :: What Is a Mixed Selector in CSS?
A mixed selector is a selector that uses a combination of all other selectors. The following CSS shows some good examples:
/* selects <p class="quote"> tags */
P.quote {font-style: italic}
/* selects <p class="quote" id="onSale"> tags */
P.quote#onSale {color: red}
/* selects <p class=quote id=onSale> tags inside <table> */
TABLE P.quote#onSale {background-color: red}
/* selects <pre class=quote id=onSale> tags inside <table>
and <pre id="onSale"> tags */
TABLE P.quote#onSale, PRE#onSale {background-color: red}
Read More/* selects <p class="quote"> tags */
P.quote {font-style: italic}
/* selects <p class="quote" id="onSale"> tags */
P.quote#onSale {color: red}
/* selects <p class=quote id=onSale> tags inside <table> */
TABLE P.quote#onSale {background-color: red}
/* selects <pre class=quote id=onSale> tags inside <table>
and <pre id="onSale"> tags */
TABLE P.quote#onSale, PRE#onSale {background-color: red}
12 :: What Are the Pseudo Classes on <A> Tags?
Pseudo classes are classes used by Web browsers to differentiate statuses of a HTML tag. CSS definitions can use pseudo classes as selectors with a leading colon like (:visited). There are 3 pseudo classes on the <A> tag:
► A:link - A hyper link that has not been visited.
► A:visited - A hyper link that has been visited before.
► A:active - A hyper link that is currently under the mouse pointer.
If you want to the alter the default style sheets of the browser, you could define something like this:
/* show un-visited links in blue */
A:link {color: blue}
/* show visited links in yellow */
A:visited {color: yellow}
/* change background color gray when mouse over links */
A:active {background-color: gray}
Read More► A:link - A hyper link that has not been visited.
► A:visited - A hyper link that has been visited before.
► A:active - A hyper link that is currently under the mouse pointer.
If you want to the alter the default style sheets of the browser, you could define something like this:
/* show un-visited links in blue */
A:link {color: blue}
/* show visited links in yellow */
A:visited {color: yellow}
/* change background color gray when mouse over links */
A:active {background-color: gray}
13 :: How To Group CSS Definitions Together?
If you have multiple CSS definitions to be applied to the same HTML tag, you can write them together delimited with semicolon (;). The following CSS provides you a good example of CSS definition groups:
pre.code {background-color: #efefef; width: 502px;
margin: 4px; padding: 4px}
The above CSS code is identical to the following CSS code:
pre.code {background-color: #efefef}
pre.code {width: 502px}
pre.code {margin: 4px}
pre.code {padding: 4px}
Read Morepre.code {background-color: #efefef; width: 502px;
margin: 4px; padding: 4px}
The above CSS code is identical to the following CSS code:
pre.code {background-color: #efefef}
pre.code {width: 502px}
pre.code {margin: 4px}
pre.code {padding: 4px}
14 :: What Is Style Property Inheritance in CSS?
Style property Inheritance is a rule that allows a style property of a child HTML tag to inherit the same property of the parent HTML tag, if that property is not defined on the child tag. This inheritance rule is very important because a lots of style properties are defined on the parent tags and inherited to the child tags. The CSS below shows you how to define most of the font properties on <P> tags and let <STRONG> and <EM> to inherit them:
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {font-family: arial; font-size: 12pt; color: yellow}
STRONG {font-weight: bold}
EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>GlobalGuideLine.com</strong>.
You should see this text in <em>yellow</em>
on black background.</p>
</body></html>
As you can, the font family, size and color in <STRONG> and <EM> are inherited from <P>.
Read More<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {font-family: arial; font-size: 12pt; color: yellow}
STRONG {font-weight: bold}
EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>GlobalGuideLine.com</strong>.
You should see this text in <em>yellow</em>
on black background.</p>
</body></html>
As you can, the font family, size and color in <STRONG> and <EM> are inherited from <P>.
15 :: What Is CSS Cascading?
CSS cascading is another rule that allows multiple definitions on the same style property of the same HTML tag instance. The Web browser will use cascading order rules to determine the winning definition. Multiple definitions of the same property could happen because:
► Multiple CSS files can be attached to a single HTML document.
► CSS selectors can overlap on HTML tag instances.
► External CSS definitions can mixed with CSS definitions included inside HTML Tag instances.
Read More► Multiple CSS files can be attached to a single HTML document.
► CSS selectors can overlap on HTML tag instances.
► External CSS definitions can mixed with CSS definitions included inside HTML Tag instances.
16 :: What Are the CSS Cascading Order Rules?
The most important cascading order rules are:
► A specified CSS definition wins over a default CSS definition in the browser.
► A CSS definition with a contextual selector wins over a CSS definition with a tag selector.
► A CSS definition with a class selector wins over a CSS definition with a contextual selector.
► A CSS definition with an id selector wins over a CSS definition with a class selector.
► A CSS definition included in the HTML tag instance wins over other CSS definitions.
► A later CSS definition wins over an earlier CSS definition.
Note that cascading order rules are applied in the order as listed above.
Read More► A specified CSS definition wins over a default CSS definition in the browser.
► A CSS definition with a contextual selector wins over a CSS definition with a tag selector.
► A CSS definition with a class selector wins over a CSS definition with a contextual selector.
► A CSS definition with an id selector wins over a CSS definition with a class selector.
► A CSS definition included in the HTML tag instance wins over other CSS definitions.
► A later CSS definition wins over an earlier CSS definition.
Note that cascading order rules are applied in the order as listed above.
17 :: How To Remove the Top White Space of Your Web Page using CSS?
The top white space of your Web page is provided by the browser's default CSS definition of the margin-top property on the BODY tag. You can remove this white space by adding your own margin-top definition. Because of the cascading order rules, your definition wins over the default definition. Here is a CSS example:
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {margin-top: 0px}
BODY {background-color: white}
P {font-family: arial; font-size: 12pt; color: black}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.<br>
This paragraph should appear right below the top edge
of the browser window without any white space.</p>
</body></html>
Read More<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {margin-top: 0px}
BODY {background-color: white}
P {font-family: arial; font-size: 12pt; color: black}
</style>
</head><body>
<p>Welcome to GlobalGuideLine.com.<br>
This paragraph should appear right below the top edge
of the browser window without any white space.</p>
</body></html>
18 :: How To Set Different Text Fonts Inside Tables in CSS?
If want to set the text font inside tables different than outside tables, you can use CSS definitions with contextual selectors. In the CSS example below, Both selectors "TABLE P" and "P" match those <P> tags inside the table, but the contextual selector "TABLE P" wins the tag selector "P" based on the cascading order rules. So you will see text inside the table in blue "serif":
<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 20px;
font-family: serif; font-size: 12pt; color: blue}
/* matches all instances of tag P */
P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to www.GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>
Read More<html><head>
<title>CSS Included</title>
<style type="text/css">
/* matches P instances inside TABLE only */
TABLE P {margin-top: 0px; margin-left: 20px;
font-family: serif; font-size: 12pt; color: blue}
/* matches all instances of tag P */
P {font-family: arial; font-size: 14pt; color: black}
</style>
</head><body>
<p>Welcome to www.GlobalGuideLine.com resource listings:<br>
<table>
<tr><td><p>www.w3.org - W3 home page.<p></td></tr>
<tr><td><p>www.php.net - PHP home page.<p></td></tr>
<tr><td><p>www.google.com - Google search.<p></td></tr>
</table>
</body></html>
19 :: How To Use Class Selectors to Differentiate Tag Instances in CSS?
A more reliable way to identify tag instances is to use the class attributes and class selectors. In the CSS example below, class="url" is added to <P> tags for Web addresses, with a new CSS definitions using a class selector "P.url". All three selectors match the Web address text, but the class selector "P.url" wins because of the cascading order rules. So you will see Web addresses in bold "sans-serif":
Read More20 :: How To Use IDs to Override Classes in CSS?
Class is a nice way to separate a group of tag instances. To identify one or two special instances, you can use the ID attributes and ID selectors. In the CSS example below, the ID selector "P#hot" wins over all other selectors, so the third row in the table will be in red:
Read More21 :: What Is the HTML Element Formatting Model in CSS?
An HTML document is divided into HTML elements. Each element is considered as a formatting unit using a box-oriented formatting model, which has:
► Content Box - A rectangular area for displaying the element content.
► Padding Box - A rectangular area surrounding the content box acting as padding space.
► Border Box - A rectangular area surrounding the padding box acting as border lines.
► Margin Box - A rectangular area surrounding the border box acting as margin space.
Read More► Content Box - A rectangular area for displaying the element content.
► Padding Box - A rectangular area surrounding the content box acting as padding space.
► Border Box - A rectangular area surrounding the padding box acting as border lines.
► Margin Box - A rectangular area surrounding the border box acting as margin space.
22 :: What Are the Formatting Behaviors of HTML Elements?
From a formatting behavior point of view, HTML elements can be divided into 2 categories:
► Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.
► Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.
Read More► Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.
► Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.
23 :: What Is a Block Element in CSS?
A block element is formatted as a rectangular block occupying the entire width of the parent content box. Examples of block elements are:
► <P> - A paragraph of text and/or inline elements.
► <PRE> - A paragraph of text with white spaces preserved.
► <LI> - A list item. Identical to <P; except that it has list-item marker on the left.
► <TABLE> - A table of cells. Each cell is identical to <P>
► <FORM> - An input form. Identical to <P> except that it has no margins.
► <DIV> - A container to group elements into a block element.
► <H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
► <HR> - A horizontal ruler.
Read More► <P> - A paragraph of text and/or inline elements.
► <PRE> - A paragraph of text with white spaces preserved.
► <LI> - A list item. Identical to <P; except that it has list-item marker on the left.
► <TABLE> - A table of cells. Each cell is identical to <P>
► <FORM> - An input form. Identical to <P> except that it has no margins.
► <DIV> - A container to group elements into a block element.
► <H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
► <HR> - A horizontal ruler.
24 :: What Is Inline Element in CSS?
An inline element is formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. Examples of inline elements are:
► <IMG> - A tag to insert an image into the current line.
► <STRONG> - A tag to make the text stronger.
► <EM> - A tag to emphasize the text
► <INPUT> - A tag to allow user entering input data to a form.
► <SPAN> - A container to group inline elements into a unit.
► <A> - A tag to create a hyper link.
► <BR> - A tag to break the current line.
Read More► <IMG> - A tag to insert an image into the current line.
► <STRONG> - A tag to make the text stronger.
► <EM> - A tag to emphasize the text
► <INPUT> - A tag to allow user entering input data to a form.
► <SPAN> - A container to group inline elements into a unit.
► <A> - A tag to create a hyper link.
► <BR> - A tag to break the current line.
25 :: What Is a Floating Element in CSS?
A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
If "float: right" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
Below is a good example of a floating block element and a floating inline element:
Read MoreIf "float: right" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
Below is a good example of a floating block element and a floating inline element: