CSS Interview Questions

  • 1
    What is the full form of CSS? 

    CSS stands for Cascading Style Sheets. It is a technology developed by the World Wide Web Consortium or W3C. It was developed to streamline the styling of webpages into a separate technology.

  • 2
    What are the major versions of CSS?

    The following are the major versions of CSS

    1. CSS 1
    2. CSS 2
    3. CSS 2.1
    4. CSS 3
    5. CSS 4
  • 3
    Tell us about the use of the ruleset.

    The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

    • Declaration block: contains one or more semicolon-separated declarations
    • Sector: indicates the HTML element needed to be styled
  • 4
    What are the elements of the CSS Box Model?

    The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

  • 5
    Differentiate between CSS3 and CSS2.

    The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements. 

  • 6
    How can CSS be integrated into an HTML page?

    There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag. 

  • 7
    Explain a few advantages of CSS. 

    With CSS, different documents can be controlled using a single site, styles can be grouped in complex situations using selectors and grouping methods, and multiple HTML elements can have classes. 

  • 8
    What is meant by RGB stream?

    RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The intensity of colors is represented using numbers 0 to 256. This allows CSS to have a spectrum of visible colors.

  • 9
    What was the purpose of developing CSS?

    CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before. 

  • 10
    What is the difference between a class and an ID?

    Class is a way of using HTML elements for styling. They are not unique and have multiple elements. Whereas ID is unique and it can be assigned to a single element. 

  • 11
    What are the advantages of CSS?

    CSS plays a crucial role in the overall presentation of a web page. The advantages of CSS are as follows:

    • Faster page speed
    • Easy to maintain
    • Saves time
    • Device Compatibility
    • Enhanced user experience
    • Numerous formatting options
    • Lightweight code
    • Great accessibility
  • 12
    List the components of a CSS Style?

    CSS Style is composed of the following elements:

    • Selector: It is an HTML tag at which a style will be applied.
    • Property: It is a type of attribute of HTML tag.
    • Value: These are assigned to properties.
  • 13
    Explain Grouping and Nesting in CSS.

    Grouping allows you to give the same properties to different selectors without repeating them. It reduces the code by grouping selectors that have the same properties or values. To group them, separate them with a comma, and the same properties will get applied to them all. Nesting allows you to have elements nested inside other elements.

  • 14
    How to integrate CSS on a web page?

    How to integrate CSS on a web page?There are three ways to integrate CSS on a web page:

    • Inline: To add CSS rules to an HTML element (tag)
    • Embedded: To add a unique style to a single document.
    • Linked/Imported/External: To make changes on multiple pages of the website.
  • 15
     Explain Embedded Style Sheet.

    An Embedded style sheet lets you define styles for the whole HTML document in one place. You can embed style sheet information into an HTML document using the <style> element. This is done by embedding the style sheet information within <style></style> tags in the head of the document.

  • 16
    Name some CSS frameworks.

    CSS frameworks are libraries that make web page styling easier. Some of them are Foundation, Bootstrap, Gumby, Ukit, Semantic UI, etc.

  • 17
    Which property is used to set the width of a box?

    The width property is used to set the width of a box.

  • 18
    How CSS style overriding works?

    Following is the rule to override any Style Sheet Rule −

    • Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
    • Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
    • Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.
  • 19
    What are the various ways of using CSS in an HTML page?

    There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

    • Embedded CSS − The <style> Element: You can put your CSS rules into an HTML document using the <style> element.
    • Inline CSS − The style Attribute: You can use style attribute of any HTML element to define style rules.
    • External CSS − The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document.
    • Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element.
  • 20
    What are the advantages of CSS language?

    The advantages of CSS are listed below.

    • Site-wide consistency
    • Different document can be controlled
    • To group style in a complex situation
    • Page reformatting
    • Accessibility
    • Page reformatting
  • 21
    What are the limitations of CSS language?

    The limitations of CSS are listed below.

    • Limitations of vertical control
    • For rendering extra document CSS is needed
    • No expression
    • Pseudo-class not controlled by dynamic behavior
    • For small style document, it is not practical
    • No column declaration
  • 22
    Explain the CSS frameworks in brief.

    CSS frameworks are the predefined libraries which make the styling of the web pages easy and systematic.

    • Bootstrap
    • Foundation
    • Semantic UI
    • Gumby
    • Ulkit
  • 23
    What are the advantages of embedded style sheets?

     Embedded style sheet has the following advantages.

    • Use selectors and group style in a complicated situation
    • Extra download is unnecessary for importing information.
    • Classes can be created for use with different HTML tags
  • 24
    Explain the CSS selector in brief.

    A CSS selector provides the link between the HTML tags and CSS styles. It is a string that identifies the element to which the style declaration applies. Different CSS selectors are as follows.

    • CSS Element Selector
    • CSS Id Selector
    • CSS Class Selector
    • CSS Universal Selector
    • CSS Group Selector
  • 25
    Explain the logical tag.

    Logical tags are mainly used to indicate by the visually impaired and put emphasis on the text. They are useless for appearances. They are old and concentrate on the content.

  • 26
    Explain the physical tag.

    Physical tags are mainly used to indicate how a particular character is to be formatted. They are also referred to as presentational markup. It is a newer version.

  • 27
    Enlist the font attributes.

    Font attributes are:

    • font-weight
    • font-size
    • font-type
    • font-variant
    • font-style
    • font-family
    • caption
    • item
  • 28
    What is W3C?

    W3C is the world wide web consortium. Its main work is to deliver the information to the worldwide web. It develops the guideline and rules for the web.

  • 29
    What is the ruleset and CSS selector?

    The ruleset is used to identify the selector that we can attach with another selector.

    CSS selectors are used to selecting the content we want to style. It is the part of the CSS ruleset. It selects the elements according to its id, class, and attribute, etc.

  • 30
    How to control the image positions using CSS in the background.

    The background-position property is responsible for controlling the position of the background image. We can set the following values.

    • Center: set image at the center position
    • Bottom: set image at the bottom position
    • Top: set image at the top position
    • Left: set image at the left position
    • Right: set image at the right position

    Example

    <style>
    div {
    background-image:url(errorsea.jpeg);
    background-repeat:no-repeat;
    background-position:center;
    }
    </style>
    
  • 31
    What is the universal selector?

    The universal selector is used for selecting all the HTML elements, and it applies the style declaration to all the elements.

    <style>
    *{
    font-size:15px;
    text-align:justify;
    Padding: 2px 0;
    }
    </style>
    
  • 32
    Which command is used to select all of the paragraph’s elements?

    The p[lang] command is used to determine all paragraph components. You must know such tricky things while preparing for CSS interview questions and answers for freshers.

  • 33
    Which property in CSS is used to control the location of the image in the backdrop?

    The background-position parameter specifies the position of the backdrop picture at the start. The background image is usually placed in the top-left corner of the webpage.

    You can configure the following positions:

    • center
    • top
    • bottom
    • left
    • right
  • 34
    What are the benefits of using external style sheets?

    The external style sheets in CSS provide the following benefits:

    • You can construct classes to reuse them in several documents.
    • It allows you to control the styles of several documents from a single file.
    • It is great for applying styles in complex scenarios.
  • 35
    What is the benefit of using CSS sprites?

    A web page containing many photos will take longer to load because each image sends out an HTTP request separately. CSS sprites minimize the loading time of a web page by combining multiple small pictures into a single image. The number of HTTP requests is reduced, as is the loading time.

  • 36
    Explain the CSS Box model and what are its components.


CSS box models specify the design and layout of CSS elements.

The components are as follows:

  • Margin: Margin is the area around the border that is removed. It is unmistakable.
  • Border: This is the area around the cushioning.
  • Padding: It eliminates the area around the content. It is transparent.
  • Content: It means content like text, images, etc.
  • 37
    What exactly is an RGB stream?

    CSS uses RGB to represent colors. Red, Green, and Blue are the three streams. Color intensity is expressed by values ranging from 0 to 256. CSS can now have a wide range of visible colors.

  • 38
    What was the goal of creating CSS?

    CSS was created to specify how web pages look visually. It enables developers to segregate the structure and content of a website, which was previously impossible.

  • 39
    What is the difference between a class and an ID?

    Class is a method of customizing HTML components. They are not unique and contain several elements. ID, on the other hand, is unique and can only be assigned to a single element.

  • 40
     Is it necessary to test the website on several browsers?

    Testing a website in multiple browsers is critical when developing a website or making significant modifications. However, because browsers undergo frequent upgrades and modifications, it is vital to conduct these tests regularly.

  • 41
     What is a responsive web design?

    A responsive web design is about design and development that responds to the user activities and the components involved such as screen size, platform, and orientation. It comprises a mix of flexible grids, layouts, images, and intellectual use of CSS media queries.

  • 42
    What is the use of CSS image sprites?

    It is a group of images placed into one image. A web page with multiple images can take a lot of time to load and uses multiple server requests to project the same. With the help of image sprites, we can decrease the number of requests to the server and save time and bandwidth as well.

  • 43
    What are the advantages of using CSS?

    The main advantages of using CSS are:

    • Separation of Content from Presentation: CSS enables presentation of the same content in multiple formats for mobile, desktop, or laptop.
    • Bandwidth: When CSS is used effectively, the browser cache can store the style sheets and these can be used on multiple pages without the need to redownload.
    • Easy to Maintain: By making small changes, CSS can be used to completely change the look and feel of a web page. For a global change, we simply have to change the style, and all elements in all web pages will be automatically updated.
  • 44
    When should translate () be used instead of absolute positioning?

    Translate is a CSS transform value. Changing the opacity or transform does not trigger the browser reflow or repaint. Transform requires the browser to create a GPU layer for elements. However, CPU usage changes absolute positioning properties.

    translate() involves reduced paint times and is more efficient. Unlike when changing absolute positioning, the element occupies original space when translate () is used.

  • 45
    What are mixins?

    A mixin returns a single value and is somewhat similar to a function block of code. It allows us to make groups of CSS declarations that may be reused throughout the site. It helps keep the SASS very DRY. The values can be passed on to make the mixins more flexible. To create a mixin, the @mixin directive is used and given a name.

  • 46
    What is comment in css?

    Comment is nothing but it is a statement which is not display on browser window. It is useful to understand about particular code, which code is written for what purpose.

  • 47
    What are pseudo classes?

    Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. For example the :link and :visited pseudo classes for the HTML A element.

  • 48
    What is z-index in CSS?

    The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

  • 49
    What is the current version of CSS?

    CSS3 is the latest version of CSS

  • 50
    What is the difference between CSS border and outline?

    • CSS border properties allow you to set the style, color, and width of the border.
    • CSS outline property allows you to draw a line around the element, outside the border.