You can check all 50 CSS interview questions here 👉 https://devinterview.io/dev/css-interview-questions
Using the inline style attribute on an element
<div>
<p style="color: maroon;"></p>
</div>Using a <style> block in the <head> section of your HTML
<head>
<title>CSS Refresher</title>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
</style>
</head>Loading an external CSS file using the <link> tag
<head>
<title>CSS Refresher</title>
<link rel="stylesheet" href="/css/styles.css" />
</head>CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS was intended to allow web professionals to separate the content and structure of a website's code from the visual design.
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
$font-stack: Helvetica, sans-serif; $primary-color: #333;
body { font: 100% $font-stack; color: $primary-color; }
CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it).
- Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
- Each image would have a corresponding CSS class with
background-image,background-positionandbackground-sizeproperties defined. - To use that image, add the corresponding class to your element.
Advantages:
- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon
:hoverpseudo-states. Blinking wouldn't be seen.
The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:
- Content - The content of the box, where text and images appear
- Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
- Border - A border surrounding the padding (if any) and content
- Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:
- A set of properties, which have values set to update how the HTML content is displayed,
- A selector, which selects the element(s) you want to apply the updated property values to.
A set of CSS rules contained within a stylesheet determines how a webpage should look.
Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very dry.
Consider:
%message-shared { border: 1px solid #ccc; padding: 10px; color: #333; }.message { @extend %message-shared; }
.success { @extend %message-shared; border-color: green; }
.error { @extend %message-shared; border-color: red; }
.warning { @extend %message-shared; border-color: yellow; }
CSS output:
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; }.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: yellow; }
Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn't a nice experience.
Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.
With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents.
When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
- Bootstrap - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
- Semantic UI - Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
- Bulma - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
Float is a CSS positioning property. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage.
#sidebar {
float: right; // left right none inherit
}The CSS clear property can be used to be positioned below left/right/both floated elements.
Sass let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. CSS, on the other hand, doesn't have any visual hierarchy.
Consider example (scss):
.parent { color: red;
.child { color: blue; } }
Result (css):
.parent { color: red; }
.parent .child { color: blue; }
Key features for Sass include
- Full CSS3-compatible
- Language extensions such as nesting, variables, and mixins
- Many useful functions for manipulating colors and other values
- Advanced features like control directives for libraries
- Well-formatted, customizable output
IDs — Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one id attribute.
Classes — Can be reused on multiple elements within the document. Mainly for styling and targeting elements.
Sass supports seven main data types:
- Numbers - most of the time they are accompanied by a unit of some sort but they are still technically numbers. You can perform basic mathematical operations on these values.
$size: 18; // A number
$px-unit: $size * 1px; // A pixel measurement
$px-string: $size + px; // A string
$px-number: $px-unit / 1px; // A number- Strings - just like CSS, accepts both quoted and unquoted strings, even if they contain spaces
$website: 'SitePoint'; // Stores SitePoint
$name: 'Gajendar' + ' Singh'; // 'Gajendar Singh'
$date: 'Month/Year : ' + 3/2016; // 'Month/Year : 3/2016'
$date: 'Month/Year : ' + (3/2016); // 'Month/Year : 0.00149'
// This is because 3/2016 is evaluated first.
$variable: 3/2016; // Evaluated to 0.00149- Colors - CSS color expressions come under the
colordata type. You can refer to the colors in hexadecimal notation, asrgb,rgba,hslandhslavalues or use native keywords likepink,blue, etc.
$color: yellowgreen; // #9ACD32
color: lighten($color, 15%); // #b8dc70
color: darken($color, 15%); // #6c9023
color: saturate($color, 15%); // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red); // #ff8000- Booleans - has only two possible values:
trueandfalse
$i-am-true: true;
body { @if not $i-am-true { background: rgba(255, 0, 0, 0.6); } @else { background: rgba(0, 0, 255, 0.6); // expected } }
- Null - is commonly used to define an empty state, neither
trueorfalse. This is typically the value you want to set when defining a variable without a value, only to prevent the parser from crashing.
.foo {
content: type-of(null); // null
content: type-of(NULL); // string
$bar: 'foo' + null; // invalid null operation: "foo plus null”.
}- Lists - are just the Sass version of arrays. You can store multiple types of values in a list.
$font-list: 'Raleway','Dosis','Lato'; // Three comma separated elements
$pad-list: 10px 8px 12px; // Three space separated elements
$multi-list: 'Roboto',15px 1.3em; // This multi-list has two lists.- Maps - Sass maps are like associative arrays. A map stores both keys and values associated with those keys.
$styling: ( 'font-family': 'Lato', 'font-size': 1.5em, 'color': tomato, 'background': black );
h1 { color: map-get($styling, 'color'); background: map-get($styling, 'background'); }
If you want to use variables inside a string, you will have to use a process called variable interpolation. To use it you will have to wrap your variables in #{}.
Consider:
$name: 'Gajendar'; $author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}'; // 'Author : Gajendar'
The interpolation method could be useful in situations where the value of a variable is determined by some conditional statements.
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.
The second and older syntax, known as the indented syntax (or sometimes just Sass), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.
Consider example.sass:
$color: red=my-border($color) border: 1px solid $color
body background: $color +my-border(green)
Consider example.scss:
$color: red;@mixin my-border($color) { border: 1px solid $color; }
body { background: $color; @include my-border(green); }
The table-layout property defines the algorithm used to lay out table cells, rows, and columns.
table-layout: auto|fixed|initial|inherit;- auto - Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout.
- fixed - The layout is fixed based on the first row. Set the width of those, and the rest of the table follows. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.
- initial - Sets this property to its default value.
- inherit - Inherits this property from its parent element.
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
static- The default position; the element will flow into the page as it normally would. Thetop,right,bottom,leftandz-indexproperties do not apply.relative- The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).absolute- The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.fixed- The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.sticky- Sticky positioning is a hybrid of relative and fixed positioning. The element is treated asrelativepositioned until it crosses a specified threshold, at which point it is treated asfixedpositioned.
Retina is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices retina defacto displays.
Browsers by default render DOM elements according to the device resolution, except for images.
In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute srcset and optionally sizes, for instance:
<div responsive-background-image>
<img src="/images/test-1600.jpg"
sizes="
(min-width: 768px) 50vw,
(min-width: 1024px) 66vw,
100vw"
srcset="
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w">
</div>It is important to note that browsers which don't support HTML5's srcset (i.e. IE11) will ignore it and use src instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. Picturefill (link in the references).
For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
Advantages:
- CSS is made more maintainable.
- Easy to write nested selectors.
- Variables for consistent theming. Can share theme files across different projects.
- Mixins to generate repeated CSS.
- Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
Disadvantages:
- Requires tools for preprocessing. Re-compilation time can be slow.
Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
Responsive design works on the principle of flexibility — a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.
Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used, and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.
A CSS selector is the part of a CSS rule set that actually selects the content you want to style.
Consider some types of CSS selectors:
- Universal selector:
* - Element type selector:
ul,td - ID Selector:
#id - Class selector:
.box - Descendant combinator:
#id .box. The .box element doesn’t have to be an immediate child of #id. - Child combinator:
#id > .box. Unlike the descendant combinator, there can’t be another element wrapping .box - General Sibling Combinator:
~ - Adjacent Sibling Combinator:
+. The difference from general sibling combinaltor is that the targeted element must be an immediate sibling, not just a general sibling. - Attribute Selector:
input[type="text"] - Pseudo-class:
a:hover. A pseudo-class uses a colon character to identify a pseudo-state that an element might be in. - Pseudo-element:
.container::before. This selector inserts an imaginary element into the page, inside the targeted element, before its contents.
Accessibility (a11y) is a measure of a computer system's accessibility is to all people, including those with disabilities or impairments. It concerns both software and hardware and how they are configured in order to enable a disabled or impaired person to use that computer system successfully.
Accessibility is also known as assistive technology.
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
Here are a few of the most popular CSS preprocessors:
- SASS (SCSS)
- LESS
- Stylus
- PostCSS
- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
- Use libraries like Bootstrap that already handles these styling issues for you.
- Use
autoprefixerto automatically add vendor prefixes to your code. - Use Reset CSS or Normalize.css.
- Resetting — is meant to strip all default browser styling on elements. For e.g.
margins,paddings,font-sizesof all elements are reset to be the same. You will have to redeclare styling for common typographic elements. - Normalizing — preserves useful default styles rather than “unstyling” everything. It also corrects bugs for common browser dependencies.
It's a good idea to choose resetting when you have very a customized or unconventional site design such that I need to do a lot of my own styling do not need any default styling to be preserved.
The CSS box model is responsible for calculating:
- How much space a block-level element takes up.
- Whether or not borders and/or margins overlap, or collapse.
- A box’s dimensions
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}The box model has the following rules:
- The dimensions of a block element are calculated by
width,height,padding,borders, andmargins. - If no height is specified, a
blockelement will be as high as the content it contains, plus padding (unless there are floats, for which see below). - If no width is specified, a non-floated
blockelement will expand to fit the width of its parent minus padding. - The
heightof an element is calculated by the content's height. - The
widthof an element is calculated by the content's width. - By default,
paddingsandbordersare not part of the width and height of an element.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: ...) without having to modify the markup (:before, :after).
Example of usage:
:first-lineand:first-lettercan be used to decorate text.- Used in the
.clearfixhack to add a zero-space element withclear: both. - Triangular arrows in tooltips use
:beforeand:after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM, but not really possible to draw a triangle with just CSS styles.
Thanks 🙌 for reading and good luck on your next tech interview!
Explore 3800+ dev interview question here 👉 Devinterview.io