The web we have today would not look like it does without CSS. Knowing CSS is a vital skill for web designers, web developers, and anyone working on the front end of a website. Therefore, many companies will want to make sure that you have a clear understanding of CSS before they hire you. We’ve prepared a list of some of the most asked CSS questions, along with a clear definition of the term.
What is CSS?
CSS stands for Cascading Style Sheets. It controls how an HTML document displays when a user loads a website. The color of the page, fonts, layout, background color, menu, plus hundreds of other aesthetic options are controlled by CSS. It also allows for content and design to be separated, which means one CSS template can be used for an entire website.
CSS Interview Questions
Q: What are the variations of CSS?
A: The different variations of CSS include:
- CSS1
- CSS2
- CSS2.1
- CSS3
- CSS4
Q: What are the three ways to integrate CSS on a web page?
A: Here are the three ways to apply CSS:
- Inline Style:
The inline method means applying CSS to individual HTML elements on a web page, such as a paragraph or the footer. - Internal Style:
Internal CSS is called with the ‘style’ tag and it applies changes to the entire web page. - External Style Sheet:
External CSS involves the use of a separate CSS document that can apply changes to a number of web pages.
Q: What are the advantages of CSS?
A:
- CSS is easily maintained
- It’s simple to learn and write
- It allows for separation of content and style, making templating easier
- High compatibility
Q: What are the disadvantages of CSS?
A:
- Easy to learn, difficult to master
- Can be messy
- Pages with CSS are slightly slower, but this aspect is made nearly moot by today’s internet standards.
Q: What is the z-index?
A: The z-index determines which elements, when overlapping, appear on top in CSS. The default value for the z-index is zero.
Q: What are hexadecimals, and what are they used for in CSS?
A: A hexadecimal is a numbering system that uses a 16 base, as opposed to the more commonly used 10 base system. In hexadecimal numbers 10-16 are represented as letters A-F. Hexadecimals are most used to represent colors in CSS.
Q: What are pseudo-elements?
A: A pseudo-element allows you to style a particular or special part of an element, such as the first line in a paragraph or spelling errors.
Q: What are the elements attached to fonts?
A: They include:
- Font-style
- Font-family
- Font-weight
- Font-variant
- Font-size/line-height
- Icon
- Caption
Q: What is a selector in CSS?
A: Selectors are used for selecting exactly which HTML elements you would like to style.
Q: Which is better, inline CSS or external CSS?
A: They are both useful in different situations. Inline CSS lets us define a single element that might need to be unique, such as changing the word spacing of a particular paragraph to make it fit in a particular area.
External CSS keeps us from defining the same basic rules over and over again. With an external CSS file, we can set standards like background color or a particular font style for the entire website with ease, and change those standards at a later date with just as easy.
Q: What is a gradient in CSS?
A: CSS gradients allow us to smoothly transition between two colors.
Q: What is a flexbox?
A: Flexboxes allow for a flexible and dynamic website layout that doesn’t require float or positioning properties.
Q: What is the difference between padding and margins?
A: Padding is used to create space on the outside of elements; for example padding applied to two tables would create space between the two tables. Margins create space inside of an element; in the same example after adding space in the margins the two tables would be touching, but the content inside the tables would be farther away from the borders of the table.
Q: What is the box model?
A: The box model means putting all of the HTML content into table-like boxes, giving them properties like padding, margins, and borders.
Q: How do you add icons?
A: One can add icons to their webpage using an icon library.
Q: What is the opacity of an element?
A: The opacity controls the transparency of an element.
Q: What are the different position states in CSS?
A: These are the positions states, with ‘static’ being the default:
- Static
- Relative
- Absolute
- Fixed
Q: What is the static position state?
A: Static means that the element will stick with the page flow, and it will be unaffected by text position.
Q: What is the relative position state?
A: Relative is much like static, however, it is affected by text position; either left, right, top, or bottom.
Q: What is the absolute position state?
A: Absolute means it is detached from the flow of the page and will float wherever it is positioned. It is unaffected by any other elements, and all other elements ignore it.
Q: What is the fixed position state?
A: Fixed is nearly the same as absolute, however, the element will be unaffected by scrolling—it will always appear on the screen.
Q: What is the important declaration?
A: If an attribute is marked as important it will override any other assignment of that attribute later in the style sheet—it combats inheritance.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Q: What is the difference between a block element and an inline element?
A: Block elements start on a new line and they stretch to fill all of the available space given to it. Text is usually a block element, it continues until the end of the space given to it before it starts a new line.
Q: What is a CSS sprite?
A: A CSS sprite is a large image that contains many smaller images, also called a sprite sheet. This way a web page can use multiple images by cropping the large image, but the page only has to download a single image. This increases a web page’s performance.
Q: Is CSS case sensitive?
A: Most of CSS is not case sensitive, however URLs, font names, and file names are.
Q: How is CSS different from HTML?
A: HTML lays out a basic structure and content, while CSS is only used for styling that content. If HTML is the meat, then CSS is the seasoning that makes the meat palatable.
Q: What are the units of measurement that are used in CSS
A: These are the most common units of measurements used in CSS:
- cm – centimeters
- em – elements, which multiples of the font-size of the element
- in – inches
- mm – millimeters
- pc – picas which is 12 pt
- pt – points, which is equal to 1/72nd of an inch (when printed)
- px – this is not equal to one pixel, but is the smallest unit of measurement in CSS equal (when printed) to 1/96th of an inch.
Q: What is tweening?
A: Tweening is an animation process, where images are inserted between two distinct frames of an animation to make the animation seem smoother.
Q: What are some popular CSS frameworks?
A: Some popular CSS frameworks are:
- Bootstrap
- Material Design
- Foundation
Q: What is the difference between a CSS id and a class?
A: An id is a specific element, which is unique to that element on the page. A class is a general category of elements, and changes made to the class will affect every element underneath it.
Q: What is the float property used for?
A: Float changes where the content in your element is located, on the left, right, top, or bottom.
Q: What is the overflow property used for?
A: The overflow property controls if and how the content in an element should spill out of its container, assuming the content is larger than the container. The options for this property are:
- Hidden – This means the content is clipped so the overflow is not shown.
- Scroll – This means that scrollbars are added so the additional content can be scrolled through.
- Auto – This is almost the same as scroll, except the scroll bars only show if the content is too large for the container.
- Visible – This means the content can escape the box holding it freely as soon as it gets too big.
These few interview questions won’t give you a degree in web design. However, they can still aid you in refreshing your knowledge about CSS before an interview. Any career in handling web pages requires trust, and every employer will want to know that their new employee knows their way around the inner workings of a website.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
