CSS Interview Questions and Answers
CSS (Cascading Style Sheets) is a technical specification that allows HTML document authors to attach formatting style sheets to HTML documents. We have listed of CSS interview Questions and Answers that have been designed for CSS professionals who are preparing interviews on CSS.
Best CSS Interview Questions and Answers
What Is CSS (Cascading Style Sheets)?
CSS (Cascading Style Sheets) is a technical specification 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.
How to Include CSS Inside the HEAD Tag?
If you want to include CSS inside the HEAD tag and apply to the entire HMTL document, 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 Technosap.com.
You should see this text in yellow on black background.</p> </body></html>
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.
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).
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>
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}
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}
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}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.
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’:
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:
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.
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:
Hot To Specify the Content Box Size of a Block Element?
If you want to control the size of the content box of a block element, you can use the “width” and “height” properties as shown below:
- {width: 300px} – Specifies the content box to be 300px wide.
- {height: 200px} – Specifies the content box to be 200px high.
The HTML and CSS document below shows you a good example of how to specify content box size of on a <P> tag:
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}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.
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’:
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:
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.
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 subsequent 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 subsequent blocks will be floated on the right side of this floating element.
Thus, the compilation of these questions includes some of the major points that can be asked during an CSS interview. The interviewers generally check the base knowledge of a candidate, which can be gained by practicing these questions prior interview. We have prepared simple CSS Interview Questions and Answers that helps you in getting your dream career as CSS expert.
Online Training Tutorials
SAP Third Party Process Step by StepThird Party Order process, your company does not deliver the items requested by a customer. Instead, you pass the order along to a third party vendor who then ships the goods directly to […]
SAP Advantages and Disadvantages ExplainSAP is the world’s leading provider of business software – enterprise resource planning, business intelligence, and related applications and services that help companies of all sizes and […]
SAP EHS Types of Compositions and TutorialsSAP EHS : One of the significant aspects to the success of Safety Datasheet Generation / distribution projects is to use and adopt the eixsting data structures. Even for meeting regulatory […]
Profit Center Accounting – SAPA profit center accounting is a division within the entity that is treated separate from the corporation. A profit center is a stand-alone section of the corporation that is required to […]
Migration to New General Ledger Accounting – OverviewMany different migration scenarios are imaginable for the transition from classic General Ledger Accounting to New General Ledger Accounting, ranging from the straightforward merge of […]
SAP HR Table listSAP Training Tutorials gives the to know ore on the SAP HR tables which frequently using SAP HR Module.The list of SAP Human Resources tables as below, DD01L Domains
DD02L SAP […]
Servlet Filter and Servlet ChainServlet Filter and Servlet Chain -We've looked at servlets that take requests from the server and provide results to the client. Servlets, on the other hand, were created as a generic […]
Main Components of R/3 ArchitectureComponents of R3 Architecture Database Server The database server is the most powerful server in an R/3 system. R/3 uses the database management system as central storage for all R/3 […]