CSS Interview Questions

CSS Interview Questions

by John Vincent


Posted on February 20, 2017



Let’s describe some of the potential interview questions.

Some references

There are many excellent references. Let’s list a few:

Normalize vs Reset

The main differences are: Normalize.css preserves useful defaults rather than “unstyling” everything. For example, elements like sup or sub “just work” after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.

box-sizing

The box-sizing property can be used to adjust this behavior:

content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Specificity

Equal specificity: the latest rule is the one that counts

<div>Name</div>

div {
  background-color: red;
}

div {
  background-color: green;		// will be green
}

ID selectors have a higher specificity than attribute selectors.

<div id="name">Name</div>
#name {
  background-color: green;		// will be green
}

div {
  background-color: red;
}

A class selector beats any number of element selectors. .introduction beats html body div div h2 p

The universal selector has a specificity of 0, 0, 0, 0.

*, body * and similar selectors have a zero specificity. Inherited values also have a specificity of 0, 0, 0, 0.

The !important declaration overrides normal declarations, but is unstructured and rarely required in an author’s style sheet.

Selectors

A selector is the element that is linked to a particular style.

p { padding: 10px; }

A class selector is a selector that uses a defined class

p.section { padding: 10px; }

An ID selector is a selector that uses an individually assigned identifier (one per page)

CSS: #section { padding: 10px; }
(X)HTML: <p id="section">Text</>

An attribute selector matches elements which have a specific attribute or its value

p[title] { font-weight: bold; }

matches all p-elements which have a title attribute.

Pseudo-classes are special classes that are used to define the behavior of HTML elements. They are used to add special effects to some selectors, which are applied automatically in certain states. E.g. :visited

a:visited { text-decoration: underline; }

Pseudo-elements provide designers a way to assign style to content that does not exist in the source document. Pseudo-element is a specific, unique part of an element that can be used to generate content “on the fly”, automatic numbering and lists. E.g. :first-line or :after

p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }

How to align a block element inside another element

<div class="out">
  <div class="in"></div>
</div>
.out {
  width: 300px;
  height: 300px;
  background-color:yellow;
  position: relative;
}

.in {
  width: 100px;
  height: 100px;
  background-color:green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center using Flex

<div>Name</div>
display: flex;
align-items: center;
justify-content: center;
height: 100%;

Center Text

<header class="heading">
    <h1>Hello, my name is Polka</h1>
</header>

.heading {
    background-color: black;
    background-image: url(https://images.unsplash.com/photo-1451444635319-e5e247fbb88d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=704d9fef9d122240e6e467de7755fc5c);
    width: 100%;
    height: 500px;
    position: relative;
}

h1 {
    text-align: center;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Center Image in a Grid:

Use margin-left: 50% and transform: translateX(-50%)

div {
  height: 300px;
  width: 100%;    // as grid size is set in figure
  overflow: hidden;  // hide what cannot be shown

  img {
    height: 100%;    // use all of the height, determined by containing div
    width: auto;    // width is based on the image height

    margin-left: 50%;    // shift right 50% of the parent
    transform: translateX(-50%);    // shift left 50% of this element
    }
}

Positioning Text in an Image

<div class="outer">
  <div class="a">Top Left</div>
  <div class="b">Top Right</div>
  <div class="center">Centered</div>
  <div class="d">Bottom Left</div>
  <div class="e">Bottom Left</div>
  <img src="https://via.placeholder.com/150">
</div>
.outer {
  position: relative;
  border: 2px solid red;
  height: 400px;
}

img {
  height: 100%;
  width: auto;
  margin-left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
}
.a {position: absolute; top: 0; left: 0;}
.b {position: absolute; top: 0; right: 0;}
.d {position: absolute; bottom: 0; left: 0;}
.e {position: absolute; bottom: 0; right: 0;}

To center the text, either

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

or

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

display: inline-block

main {
    width: 800px;
    font-size: 0;
    margin: 60px auto 0 auto;
}
.box {
    display: inline-block;
    border: 1px solid black;
}

Float

.image {
    width: 320px;
}
.image-1 {
    float: left;
    padding: 15px 15px 15px 0;
}

.image-2 {
    float: right;
    padding: 15px 0px 15px 15px;
}

background image

body {
    background-image: url(../images/outerspace_landscape.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 1000px;
}

fixed nav

nav {
    position: fixed;
    height: 80px;
    width: 100%;
    background-color: lightgray;    /* get a darker gray */
}

nav .logo {
    border-radius: 50%;
    height: 80%;
    margin: 5px 0;
    border: 1px solid black;
    vertical-align: middle;        /* does this do anything ? */
}

nav ul {
    display: inline-block;
    list-style: none;
    margin-left: 50px;
}
nav li {
    display: inline-block;
}
nav li::after {
    content: '|';
    margin-left: 3px;
}
footer {
    //    flex: none;
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    background-color: palette(dashboard, footer);
    color: palette(dashboard, footer-text);
    padding: 10px;
    text-align: center;
}

Absolute

.box {
    width: 600px;
    height: 300px;
    border: 10px dotted green;
    margin: 150px auto 0 auto;
    position: relative;
}
.pet {
    width: 200px;    /* this also sets height: 200px; */
}
.cat {
    left: -100px;
    top: -100px;
    position: absolute;
}
.dog {
    position: absolute;
    right: -100px;
    bottom: -100px;
}

Center Heading

.heading {
    background-color: black;
    background-image: url(https://images.unsplash.com/photo-1451444635319-e5e247fbb88d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=704d9fef9d122240e6e467de7755fc5c);
    width: 100%;
    height: 500px;
    position: relative;
}

h1 {
    text-align: center;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
header nav {
    position: absolute;
    right: 10px;
    top: 10px;
}
header nav ul li {
    display: inline-block;
    margin: 10px 7px;
}
header nav ul li a {
    font-weight: 500;
    color: purple;
}
header nav ul li a:hover {
    color: blue;
    font-size: 120%;        /* because I can */
}

Anchor Pseudo-classes

a:link {
  color: green;
}

a:hover {
  font-size: 20px;
}

a:visited {
  color: red;
}

a:active {
  color: black;
}

Display

The display property specifies the display behavior (the type of rendering box) of an element. The default value is inline

display: inline

An inline element – for example, a, strong, em, or span– doesn’t start on a new line and usually does not contain additional elements, but instead just contains text. Any height and width properties will have no effect.

display: block

A block-level element has the opposite qualities. It gets displayed on a new line (and takes up the whole width), may contain additional block-level or inline elements, and its height and width can be explicitly set.

display: inline-block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can give it an explicit width, height, margin, and padding.

This can be a good approach when you need to create elements with a set width, but you also need them to display side by side.

display: none

The element is completely removed

display: flex

Displays an element as a block-level flex container

display: grid

Displays an element as a block-level grid container

display: inline-flex

Displays an element as an inline-level flex container

display: inline-grid

Displays an element as an inline-level grid container

Position

The position property specifies the type of positioning method used for an element. The default is static

position: static

Any HTML element with the position: static is not positioned in any special way; it is always positioned according to the normal flow of the page

position: fixed

When an element’s position is set to fixed, it will stay in place even when the user scrolls. Fixed elements are taken out of the normal flow and other elements will position themselves as if the fixed element does not exist.

position: relative

When an element’s position property is set to relative, it is still in the normal flow (in other words, relatively positioned elements are rendered in the order they appear in HTML), but unlike with static elements, we can use offset properties (left, right, top, bottom) with relative elements.

position: absolute

Like fixed elements, absolute elements are outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a relative position.

position: sticky

An element with position: sticky; is positioned based on the user’s scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed)

z-index

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.

Note: z-index only works on positioned elements, ie position:absolute, position:relative, or position:fixed

visibility

The visibility property specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

visible Default value. The element is visible

hidden The element is hidden but still takes up space

visibility: hidden vs display: none

display: none The element is completely removed

visibility: hidden The element is hidden but still takes up space

iFrame

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website.

The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page. Although an IFrame behaves like an inline image, it can be configured with its own scrollbar independent of the surrounding page’s scrollbar.

What is Shadow DOM

CSS is global.

Web Components are built to be independent and use their own CSS.

Shadow DOM is a new DOM feature that helps you build components.

You can think of shadow DOM as a scoped subtree inside your element.

Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript.

Shadow DOM is designed as a tool for building component-based apps. Therefore, it brings solutions for common problems in web development:

  • Isolated DOM: A component’s DOM is self-contained (e.g. document.querySelector() won’t return nodes in the component’s shadow DOM).

  • Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don’t leak out and page styles don’t bleed in.

  • Composition: Design a declarative, markup-based API for your component.

  • Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts.

  • Productivity - Think of apps in chunks of DOM rather than one large (global) page.

How to Make a Circle

<div></div>

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
}

How to Make a Triangle

<div class="tri"></div>

.tri {
  width: 0;
  height: 0;
  border-top: 100px solid blue;
  border-bottom: 100px solid transparent;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  background-color: white;
}

What are Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element.

For example, ::first-line can be used to change the font of the first line of a paragraph.

selector::pseudo-element {
  property: value;
}
p::first-line {
  color: blue;
  text-transform: uppercase;
}
h1::after {
  content: url(smiley.gif);
}
p:hover::after {
content: "Injected to a P tag";
}

What are Data Attributes

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

<ul>
 <li data-id="1" data-name="alpha">Alpha</li>
 <li data-id="2" data-name="beta">Beta</li>
 <li data-id="3" data-name="gamma">Gamma</li>
</ul>

li:hover::before {
  display: inline-block;
  content: attr(data-name);
}

li:hover::after {
  display: inline-block;
  content: "-" attr(data-id);
}