CSS Question & Answer

CSS stands for Cascading Style Sheets. It is used to style the layout of web pages, including design, colors, and fonts.

  • Inline CSS – Applied directly to an element using the style attribute.
  • Internal CSS – Defined within <style> tags inside the <head> section of an HTML document.
  • External CSS – Linked via an external .css file using the <link> tag.
  • id is unique and used for one specific element (#idName).
  • class can be used for multiple elements (.className).
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->
<style>
  body { background-color: lightblue; }
</style>

<!-- Inline CSS -->
<p style="color: red;">Hello</p>

The CSS Box Model describes the rectangular boxes generated for elements. It consists of:

  • Content – The actual text or image.
  • Padding – Clears space around content.
  • Border – Surrounds padding.
  • Margin – Clears space outside the border.

Specificity determines which CSS rule is applied when multiple rules match the same element. Calculated as:

  • Inline styles > IDs > Classes/Pseudo-classes > Elements
  • px – Absolute unit.
  • em – Relative to the element's font size.
  • rem – Relative to the root (html) font size.
  • % – Relative to the parent element.
  • relative – Moves relative to its normal position.
  • absolute – Positioned relative to the nearest positioned ancestor.
  • fixed – Fixed position relative to the viewport.
  • sticky – Scrolls until it reaches a threshold, then sticks.

Media queries are used for responsive design.

@media screen and (max-width: 600px) {
  body { font-size: 14px; }
}
  • visibility: hidden – Element is invisible but still occupies space.
  • display: none – Element is removed from the layout (no space taken).

Pseudo-classes define the special state of an element.

a:hover { color: red; }
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }
  • min-width: The element will never be smaller than the specified width.
  • max-width: The element will never be larger than the specified width.

z-index defines the stacking order of elements. Elements with a higher z-index appear on top.

.box1 { z-index: 1; }
.box2 { z-index: 2; }

Only works on positioned elements (relative, absolute, fixed, or sticky).

  • auto – Automatically determines value (default behavior).
  • inherit – Inherits value from parent.
  • initial – Resets to browser default.
div {
  margin: auto;
  color: inherit;
  font-size: initial;
}

Flexbox is a CSS layout module that makes it easier to design flexible responsive layouts.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • justify-content – Aligns items horizontally (main axis).
  • align-items – Aligns items vertically (cross axis).
  • Flexbox is 1-dimensional (row or column).
  • Grid is 2-dimensional (rows and columns).
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
  • %, em, rem, vw, vh units
  • media queries
  • flexbox or grid
  • max-width: 100% for images
img {
  max-width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
  • relative: Positions the element relative to its normal flow.
  • absolute: Positions the element relative to the nearest positioned ancestor (not static).
  • fixed: Positions the element relative to the viewport and it stays fixed during scrolling.

CSS transitions allow smooth changes in property values over time.

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: blue;
}
  • Transitions need a trigger (like :hover).
  • Animations can run automatically using @keyframes.
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.box {
  animation: slide 1s infinite;
}

calc() allows dynamic calculations in CSS.

width: calc(100% - 50px);

CSS variables allow reusability and dynamic theming.

:root {
  --main-color: #ff6600;
}
h1 {
  color: var(--main-color);
}

It defines a visible area of an element by clipping it to a shape.

img {
  clip-path: circle(50%);
}

It defines how an <img /> or <video> should fit into its container. Values: fill, contain, cover, none, scale-down </video>

img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

It hints the browser what properties might change, helping performance optimizations (like GPU acceleration).

.box {
  will-change: transform;
}
  • Reflow: Happens when the layout of the page is recalculated (e.g., DOM size changes).
  • Repaint: Happens when styles like color change without affecting layout.
  • Set fixed width and height on images, ads, iframes.
  • Use min-height for dynamic content.
  • Reserve space for fonts or lazy-loaded content.

margin: auto only works horizontally in block-level elements by default. To center vertically, use Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}
  • :nth-child(n) selects the nth child regardless of type.
  • :nth-of-type(n) selects the nth child of a specific type.
p:nth-child(2) {} /* 2nd element

*/ p:nth-of-type(2) {} /* 2nd

tag only */

It selects all elements.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
  • inline: No width/height; flows inline (<span>)
  • block: Starts on a new line; can set width/height (<div>)
  • inline-block: Behaves inline but accepts width/height
[title] {
  color: red;
}
input[type="text"] {
  border: 1px solid blue;
}
li:last-child {
  font-weight: bold;
}
  • Minify CSS files
  • Combine files (reduce HTTP requests)
  • Use shorthand properties
  • Avoid complex selectors
  • Load only required styles (critical CSS)

It helps isolate an element from the rest of the document for performance.

.card {
  contain: layout style;
}

It includes padding and border inside the element’s total width/height, making layouts predictable.

* {
  box-sizing: border-box;
}
  • Use browser prefixes: -webkit-, -moz-, -ms-
  • Test with tools like BrowserStack
  • Use feature queries:
@supports (display: grid) {
  div {
    display: grid;
  }
}

They add support for experimental or non-standard features.

-webkit-transform: rotate(45deg); /*Chrome*/
-moz-transform: rotate(45deg);/* Firefox */
-ms-transform: rotate(45deg);/* IE */
transform: rotate(45deg);
background: linear-gradient(90deg, red, yellow);
  • Text Shadow:
text-shadow: 2px 2px 5px gray;
  • Box Shadow:
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  • visibility: hidden: Hides element but reserves space.
  • opacity: 0: Makes element fully transparent but still interactive.

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.