Basic and Advance CSS Examples and Concepts Interview Preparation Guide
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:
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.
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.
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.
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.
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>
<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>
<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>
<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.
► 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>
/* 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>
/* 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}
/* 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}
/* set background color to gray for all instances
of three tags: <UL>, <OL>, and <DL> */
UL, OL, DL {background-color: gray}