6 CSS interview questions and answers

Looking for CSS freelancers to build your team? Review Toogit's top CSS expert

Get Started

Hire Trusted CSS Freelancers for your project

More than 150,000 freelancers ready to tackle any kind of project



  

HTML elements can have either id attribute or class attribute, or even both attributes.

The id selector assigns a unique name to the element it is applied to. For CSS to be valid, there can be only one element with a given name. An id selector is usually used when you want to restrict styling rules to a specific HTML element, or a block of elements. By the CSS specification, id selectors are defined with the # character, followed by the name.

On the other hand, the class attribute assigns a class name to the element, and that name can be used on any number of elements within the document. A class-specific style is used when you want to apply styling rules to more than one of blocks and elements within the document. Similar to id selectors, classes are defined by a period (.) and followed by the class name.

To summarize, an id selector identifies and sets style to only one occurrence of an element, while class can be attached to any number of elements. CSS best practice is to to use classes as much as possible, and to reserve the use of id attributes for specific uses. This will result with smaller style sheet files which are more performant and easier to maintain.
There are three ways to include CSS to a web page:

Inline: CSS is applied directly to the HTML elements by use of the style attribute.

Embedded: CSS is added within the head element of the web page by placing the CSS code in a style element.

External style sheets: CSS is placed in an external file and added to a web page by use of a link element.

Inline styles have more disadvantages than advantages. Inline styles are useful for small numbers of style definitions and they have the ability to override other style specifications. The disadvantages are they don’t separate the style from the content, styles can’t be controlled from one place, and it is hard to create more complex styles.

Embedded and external CSS share most of the advantages over the inline styles. It is possible to create classes that will be used by multiple elements in the document, they allow complex styling by using selector and grouping methods, and styling is controlled from only one place.

By using embedded style sheets no extra download is required, while external CSS files offer style control of multiple HTML documents from a single file. Disadvantage of the external CSS file is until the external style sheet file is loaded, the HTML document can not be properly rendered.
RWD is an abbreviation for Responsive Web Design, and it is the practice of building web pages to work on any device and every screen size; no matter how large or small they are, be it a mobile phone, tablet, laptop or desktop. Benefit of the RWD is you don’t need to create a different page version for each mentioned device. Responsive web design uses only HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look best on any given screen. RWD is achieved by using CSS media queries - media queries are simple filters which make the content style change based on the characteristics of the device like the display type, width, height, orientation and even resolution.
Sprites are essentially multiple raster images merged into a single image. The main reason for their usage is to help with performance. The fewer different requests a browser needs to make, the faster the web page will load. Term “sprites” dates from the old times and was first used in video games. The idea was that it is faster to load one image into graphic memory, and then only display parts of that image at a time, than continually load new images. This same principle is used in web today.

In CSS, image sprites are used with a background-image property, and then adjusted by setting the background position and dimensions of the individual classes to display a single portion of the complete image sprite.
Less, Sass, and Stylus are all CSS preprocessors. CSS preprocessors are an abstraction layer on top of CSS, written in a special syntax compiled back to CSS.

CSS preprocessor offer powerful features on top of the CSS, with variables, extends, and mixins being the most notable. Variables store information that can be reused later, like colors or other commonly used values. Extends help you create “classes” that allow inheritance for the rules. Mixins, you can think of like “function”. There are some other features in comparison with vanilla CSS, like the use of logic statements (conditionals and loops), custom functions, integration with other libraries like Compas, and many more.

When talking about advantages and disadvantages, personal preferences offer great opportunity to discuss with the candidate their own view on the use of CSS preprocessors and reasons why a specific one could be used. Basically, there is no right or wrong answer why which one could be used.
CSS vendor prefixes are extensions to the CSS standards. They are used by browsers to offer experimental and non-standard features. Since the vendor prefixes are not included in the official CSS specification, by adding specific prefixes browsers are preventing future incompatibilities which could arise when the standard is extended.

The CSS vendor prefixes are:

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Hire Top CSS Freelancers

CSS At A Glance


Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript

 

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

 

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader). CSS also has rules for alternate formatting if the content is accessed on a mobile device.

 

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

 

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.

 

In addition to HTML, other markup languages support the use of CSS, including XHTML, plain XML, SVG, and XUL.

Skills related to CSS

Are you a start-up founder or planning to create a website?

Get it done with Toogit's powerful project management tool.