Enlist the various Media types used?
Different media has different properties as they are case insensitive.
They are:
- Aural – for sound synthesizers and speech
- Print – gives a preview of the content when printed
- Projection- projects the CSS on projectors.
- Handheld- uses handheld devices.
- Screen- computers and laptop screens.
WHAT INSPIRED THE CREATION OF CSS?
CSS was created in 1997 to allow web developers to describe the visual design of the web pages they were developing. It was designed to allow developers to decouple the functionality and layout of a website’s programming from its graphic design, which had previously been impossible.
The distinction of structure and style enables HTML to focus on its original purpose — content markup — without needing to think about the architecture and functionality of the website, generally referred to as the page’s “look and feel.”
WHAT ARE THE VARIOUS METHODS FOR INCORPORATING CSS INTO YOUR HTML PAGE?
There are three forms to incorporate a particular CSS style:
- You may incorporate your design into your HTML page by using style tags in the headline.
- You can incorporate your own design by using inline styling.
- You should write your CSS in a separate file and then connect to it from your HTML tab.
CSS Interview Questions
WHAT DOES THE TERM “CASCADING” MEAN? WHAT IS THE CASCADING EFFECT OF STYLE SHEETS?
CSS revolutionized web creation and how users see the concept of creating a website. Prior to the advent of CSS, components had to be styled in-line or in the head portion of an HTML page. This was modified to represent CSS’s cascading form. The three primary mechanisms by which CSS cascades are as follows:
- Components – Multiple elements will share the same CSS type.
- Numerous Styles in a Single Element – Multiple styles may be added to a single HTML feature to create a truly unique appearance.
- Numerous Pages in the Same Format – The same stylesheet can be added to several HTML pages simultaneously to easily achieve template styling.
WHAT ARE THE BENEFITS OF CSS?
The following are some of the benefits of CSS:
- By using them, the style of several documents may be managed from a single location.
- Multiple HTML components may have multiple records, each of which may have groups.
- Selector and sorting approaches are used to group types in dynamic contexts.
HOW DO YOU ADD A SPECIFIC COLOR TO AN ELEMENT IN CSS?
CSS may be used to add a large variety of colors to elements through various notations. There are currently three notations in use, which are explained below:
- Notation in hexadecimal
In hexadecimal string notation, color is often preceded by the character “#”. Following that, the color code’s hexadecimal digits are written. The case is irrelevant in this string.
- RGB notation for functionality
As with hexadecimal string notation, the RGB (Red/Green/Blue) functional notation describes colors by their red, green, and blue elements (as well as, optionally, an alpha channel component for opacity). However, rather than utilizing a string, the CSS function RGB is used to describe the color (). This feature accepts as input parameters the red, green, and blue variable values, as well as an optional fourth parameter specifying the alpha channel value.
- Functional notation in HSL
Oftentimes, designers and developers tend to deal with using the HSL (Hue/Saturation/Luminosity) color system. HSL colors are depicted on the web using the HSL functional notation. In terms of usage, the HSL() CSS method is quite similar to the RGB() function.
Advance CSS Interview Questions
DESCRIBE THE CSS BOX MODEL AND ITS VARIOUS COMPONENTS.
The CSS box model specifies the rectangular boxes that are created and arranged according to the visual formatting model for elements in the document tree. Each box contains a content area (for example, text or an image) and optional padding, border, and margin areas.
The CSS box model is in charge of computing the following:
- The amount of space that a block feature consumes.
- Borders and/or margins can overlap or collapse.
- Dimensions of a box.
WHAT EXACTLY IS RWD?
Responsive Web Design is an expression for RWD. This method is used to ensure that the layout page displays flawlessly in all screen sizes and devices, including smartphone, phone, desktop, and laptop. You are not required to build separate pages for each computer.
HOW ARE LOGICAL AND PHYSICAL TAGS DIFFERENT?
Physical tags are referred to as presentational markup, while logical tags are rendered ineffective in terms of display.
Physical tags are more recent versions; logical tags, on the other hand, are older and focus on substance.
CSS Interview Questions
WHAT DO YOU MEAN WHEN YOU SAY W3C?
The W3C is a short form for the World Wide Web Consortium. Its goal is to deliver the World Wide Web’s content. Additionally, it sets web standards and recommendations.
HOW ARE CSS2 AND CSS3 DIFFERENT?
The primary distinction between CSS2 and CSS3 is that CSS3 is separated into distinct pieces, often referred to as modules. In comparison to CSS2, CSS3 modules are provided by a wide variety of browsers. CSS3 introduces new General Sibling Combinators that are responsible for associating sibling elements with assigned elements.
WHY ARE BACKGROUND AND COLOR TREATED AS DISTINCT PROPERTIES?
This is based on primarily two reasons:
- It improves the legibility of the style sheets. The background property, which is complex in and of itself, becomes exponentially more complicated when combined with color.
- Although the color is an inherent property, the background is not. And this may create a great deal of confusion.
Advance CSS Interview Questions
WHAT ARE THE BENEFITS AND DRAWBACKS OF USING EXTERNAL STYLE SHEETS?
Benefits
- Numerous documentation can exist for various HTML components, as well as numerous groups.
- Similar formats may be used to manage several documents of varying types.
- In composite contexts, selector and grouping approaches may be used to group types.
Drawbacks
- External style sheets must be loaded in order to make the pdf.
- It is incompatible with short-form descriptions.
- A separate download is needed to import documents that provide style material.
EXPLAIN THE CSS DEFINITION OF SPECIFICITY.
Specificity is the criterion used by browsers to determine which CSS property values are more relevant to a feature and therefore should be added. Specificity is determined by matching rules consisting of various types of CSS selectors.
Specificity is a weight assigned to a particular CSS declaration based on the number of instances of each selector type in the corresponding selector. When many declarations have the same precision, the feature is added with the most recent declaration contained in the CSS. Specificity is only required where several declarations target the same element. CSS rules state that elements that are explicitly attacked take priority over elements that derive rules from their descendant.
WHAT PURPOSE DOES AN EMBEDDED STYLE SHEET SERVE?
The embedded style sheet enables us to identify styles in a single location inside an HTML text. Multiple classes may be created using an embedded style sheet for use on multiple tag styles on a web page, and there is no additional downloading needed for the details to be imported.
CSS Interview Questions
WHAT IS THE DIFFERENCE BETWEEN PADDING AND MARGIN?
Margin is a CSS property that allows one to build space around elements. We may also construct space outside of predefined external boundaries.
Padding is a CSS property that allows one to create space around the content of an element as well as along some defined boundary.
HOW IS INHERITANCE IMPLEMENTED IN CSS?
Inheritance is a term that refers to the process by which a child class inherits the assets of its parent class. It is a definition that has been used in a variety of languages and is a convenient way to define the same property several times.
It is used in CSS to specify the hierarchy from top to bottom. If the child class uses the same name as the inherited property, the child’s class will override it.
WHAT ARE CSS’S DISADVANTAGES?
The drawbacks of CSS are the following:
- Texts, styling, and laws that are unique to a certain audience are not permitted.
- There are no idioms.
- There is no dynamic action that can be used to manage pseudo-classes.
- Selectors cannot be used to ascend.
- Vertical regulation is severely limited.
- There is no column declaration.
Advance CSS Interview Questions
HOW ARE CSS SPECIFICATIONS MAINTAINED?
The World Wide Web Consortium is responsible for its maintenance.
WHAT ARE THE METHODS FOR INCORPORATING CSS INTO A WEB PAGE?
There are three ways to incorporate CSS into a web page:
- Embedded: Inside the head element, there might be a style element where we may put the code.
- Inline: Style attributes are used to locate CSS-applied HTML objects.
- Imported or associated: As CSS is connected or imported, it is put in an external file and linked using a connection element.
WHAT DOES THE TERM “EMBEDDED STYLE SHEETS” MEAN?
These are the sheets that describe the style sets for the whole HTML text in a single location. This is accomplished by embedding the style sheet details contained inside the style tags into HTML text.
CSS Interview Questions
WHAT IS FLEXBOX IN CSS?
Flexbox design, also known as CSS flexible box layout module, is a modern layout module introduced in CSS3. It is designed to enhance the alignment, orientation, and order of objects inside a container, even though their sizes are dynamic or even uncertain. The primary property of the flex container is its capacity to adjust the width and height of the children in order to maximize the usable room on various screen sizes.
Many designers and developers like this flexbox style because it simplifies element placement, allowing for more complicated layouts to be done with minimal code, resulting in a faster creation phase. In contrast to block or inline layout algorithms, which are vertically and horizontally oriented, the flexbox layout algorithm is direction-based. This flexbox layout can be used for small application elements, while the newly introduced CSS Grid Style Module can accommodate large-scale layouts.
WHAT FACTORS WOULD A BROWSER INCLUDE WHEN DETERMINING WHICH ELEMENTS FIT A CSS SELECTOR?
Browsers arrange selectors from right to left, starting with the rightmost (key selector). Browsers search the DOM for items matching the main selector and traverse up to their parent elements to decide matches. The shorter the selector chain, the more quickly the browser will decide whether or not an entity fits the selector.
For instance, when using the selector p span, browsers first locate all span> elements and then traverse up their parent hierarchy all the way to the root to locate the p> element. Once it detects a p> for a given span>, it understands that the span> fits and may avoid matching.
JUSTIFY THE DECISION TO USE TRANSLATE() RATHER THAN ABSOLUTE POSITIONING.
Translate is a CSS transform value. Changing transform or opacity does not cause the browser to reflow or repaint but does cause compositions to be created; while, changing the utter placement causes the browser to reflow. Although the transform operation allows the browser to build a GPU layer for the product, modifying the element’s absolute positioning properties utilizes the CPU. As a consequence, translate() is more effective, resulting in faster painting times and smoother animations.
Advance CSS Interview Questions
WHAT MEDIA TYPES ARE SUPPORTED BY CSS?
Expression, audio, video, and tactile devices, paged or continuous media, bitmap or grid media, and even digital media are all supported by CSS.
CSS IS CASE-SENSITIVE TO WHAT EXTENT?
CSS is case-insensitive, but the picture and font family URLs are case-sensitive. CSS is case-sensitive only when XML declarations are used with an XHTML DOCTYPE on the document.
PSEUDO-ELEMENTS – WHAT ARE THEY?
These elements are used to give those selectors unique effects. CSS may be used to add styles to HTML markups. If additional styling or markup for the document isn’t possible, this function of pseudo-elements will aid by enabling extra markup without affecting the original document.
CSS Interview Questions
WHAT IS CSS’S FLOAT PROPERTY?
It is used to adjust the orientation of an image to the left or right and the text that wraps around it. The preceding elements’ properties remain unchanged.
WHAT IS THE DEFINITION OF A DECLARATION BLOCK?
It is essentially a catalog of the property’s instructions, supplemented by a colon and the value enclosed in braces.
WHAT FONT ATTRIBUTES ARE AVAILABLE?
Font-variant, font-weight, font-style, font-family, line-height of font size, caption, symbol, and font-family are all available attributes.
Advance CSS Interview Questions
In how many ways can a CSS be integrated as a web page?
CSS can be integrated in three ways:
- Inline: term is used when the CSS code have attribute of HTML elements<p style=”colour:skyblue;”> hello world!</p>
- External: separate CSS file is created in the workspace and later linking them in every web page that is created<head> <link rel=”text/css” href=”your_CSS_file_location”/> </head>
- Internal: the head element of the web page has internal CSS implemented in it<head> <style> p{ color:lime; background-color:black; } </style> </head>
What benefits and demerits do External Style Sheets have?
The advantages of External Style sheets are:
- The style of several documents can be controlled from site by using them.
- Multiple HTML elements can have many documents, where classes can be created.
- To group styles in complex situations, selector and grouping methods are used.
Demerits of external CSS are as follows:
- Extra download is needed to import documents having style information.
- To render the document, the external style sheet should be loaded.
- Not practical for small style definitions.
Discuss the merits and demerits of Embedded Style Sheets?
There are several merits and demerits of embedded style sheets:
Merits of Embedded Style Sheets:
- Multiple tag types can be created in a single document.
- Styles, in complex situations, can be applied by using Selector and Grouping methods.
- Extra download is unnecessary.
Demerits of Embedded Style Sheets:
- Multiple documents cannot be controlled.
CSS Interview Questions
What is the purpose of the z-index and how is it used?
The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
- Auto: Sets the stack order equal to its parents.
- Number: Orders the stack order.
- Initial: Sets this property to its default value (0).
- Inherit: Inherits this property from its parent element.
How can you integrate CSS on a web page?
CSS can be integrated in three ways:
- Inline: term is used when the CSS code have attribute of HTML elements
<p style="colour:skyblue;"> My Sky!</p>
- External: separate CSS file is created in the workspace and later linking them in every web page that is created
<head> <link rel="text/css" href="your_CSS_file_location"/> </head>
- Internal: the head element of the web page has internal CSS implemented in it
<head>
<style>
p{
color:lime;
background-color:black;
}
</style>
</head>
Compare RGB values with Hexadecimal color codes?
A color can be specified in two ways:
- A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #. e.g.: g {color: #00cjfi}
- A mixture of red, green and blue represents a color. The value of a color can also be specified.
e.g.: rgb(r,g,b):
In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown.
Advance CSS Interview Questions
Enlist the various Media types used?
Different media has different properties as they are case insensitive.
They are:
- Aural – for sound synthesizers and speech
- Print – gives a preview of the content when printed
- Projection- projects the CSS on projectors.
- Handheld- uses handheld devices.
- Screen- computers and laptop screens.
What is Pseudo-elements?
Pseudo-elements are keyword added to the selector that allows one o style a specific part of the selected element. CSS is used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document. It can be used for;
- To style the first letter, line or element
- To insert a content
Syntax
Selector: :pseudo-element {
property1 :value;
property2 :value;
}
What is the usage of Class selector?
A name preceded by a full stop is considered as a class selector in CSS. Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. An ID identifies a single element whereas a class identifies more than one element.
Syntax for the class selector:
Classname:it can be A-Z, a-z or digits.
.top {font: 14em ;} //class selector
<Body class= "top"> //this class is associated with element </body>CSS Interview Questions
Enlist the various fonts’ attributes?
They are:
- Font-style
- Font-variant
- Font-weight
- Font-size/line-height
- Font-family
- Caption
- Icon
Comment on the Case-sensitivity of CSS ?
Basically it is not case sensitive but the class names are considered as case sensitive in HTML 4.01 nevertheless font families, URL’s of images, etc. is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.
Enlist the media types CSS allows?
Media is one of the most important features of CSS. The media renders the design and customization of documents. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network. Some of the media types are:
- All – for all devices
- Aural – speech synthesizers
- Braille – feedback devices
- Embossed – paged braille printers
- Handheld – typically small screen, limitation of bandwidth
- Projection – basically for projectors
- Tv – television type devices
- Screen – color computer screens
Advance CSS Interview Questions
Differentiate logical tags from physical tags?
There are several pointers that make local tags different from physical tags:
| Physical Tags | Local Tags |
| Physical tags are used to indicate how a particular character is to be formatted | logical tags are used to indicate by the visually impaired and put emphasis on the text. |
| Physical tags are also referred to as presentational mark-up | Logical tags are useless for appearances |
| Physical tags are newer versions | Logical tags are old and concentrate on content |
What are conditional comments?
Conditional comments are developed by Microsoft. And it only worked with IE browser. The conditional comments help to target IE browser & comments can be written to target the different version of IE 5-IE 9. CSS rules or code embedded inside of the comments will be used by Internet explorer based browser. Whereas from IE10 & above the support for conditional comments has been dropped.
<p class=“conditional-comments“>
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>