CSS Basics for Testers

Why it matters

Visual defects are what users notice first. A price wrapped under its button or a field hidden behind a sticky header makes a product look broken even when every function works, and some are accessibility failures: removing the focus outline without a replacement fails WCAG 2.2 success criterion 2.4.7 Focus Visible.

CSS knowledge turns "the layout is broken on mobile" into a report a developer can act on: the element, the viewport width, the computed sizes and the rule involved. It also tells you what else to retest, because one rule can style every page that uses the same class.

Rules, selectors and the cascade

A stylesheet is a list of rules. Each rule has a selector, which chooses elements, and a declaration block in braces with property: value pairs. In #checkout .btn:hover { background-color: #0a58ca; } the selector picks elements with the class btn inside the element with the id checkout, while the pointer is over them. CSS comes from linked stylesheets, <style> elements and the style attribute, on top of the browser's own default styles.

When several rules set the same property on one element, the cascade picks one. Simplified: !important wins; then a style attribute beats stylesheet rules; then the more specific selector wins; at equal specificity, the later rule wins. Specificity counts ids, then classes, attributes and pseudo-classes, then element types and pseudo-elements, so #checkout .btn is 1,1,0 and one id outweighs any number of classes. Some properties, such as color and font-family, are also inherited by child elements.

• button (type: every <button>), .btn-primary (class: every element that has btn-primary among the classes in its class attribute) and #email (id: the one element with id="email").
• [type="email"] and [data-testid="pay-now"] (attribute); [href^="https"] matches values that start with https.
• Combinators join selectors: a space means "anywhere inside" (form .error), and > means "a direct child of" (ul > li).
• :hover, :focus-visible, :disabled, :checked and :invalid are pseudo-classes for states; each state has its own styles and needs its own check.
• ::before and ::placeholder are pseudo-elements: they style parts that are not elements in the HTML.

/* Three rules set one property on the same button */
.btn           { background-color: #0b5ed7; }  /* 0,1,0                      */
#checkout .btn { background-color: #6c757d; }  /* 1,1,0: wins, it has an id  */
.btn           { background-color: #198754; }  /* 0,1,0: later, still loses  */

Try it: CSS Formatter Try it: Color Converter

The box model

Every element is drawn as a box with four layers, from the inside out: the content; the padding, which shows the background and still counts as the element when clicked; the border; and the margin, transparent space that keeps neighbours apart.

box-sizing decides what width measures. With the default content-box it sets the content only, so padding and border are added: width: 300px with padding: 16px and a 2px border gives a box 336 pixels wide. With border-box the box stays 300 pixels and the content shrinks to 264. Margins are never part of width. Many sites set border-box on every element; a component that misses it produces boxes slightly too wide.

Hiding an element is also a question of its box. Three declarations all make an element invisible, but they behave differently:

• display: none removes the element: no space, no clicks, hidden from screen readers.
• visibility: hidden keeps its space but hides it from sight, clicks and screen readers.
• opacity: 0 only makes it transparent: it still takes clicks and is still announced, so an invisible layer over a button can block it.

Layout, media queries and the defects they cause

Block elements such as <div> stack vertically; inline elements such as <a> flow along a line. Flexbox (display: flex) arranges children in one row or column and controls how they grow, shrink, wrap and align; grid (display: grid) places them in rows and columns at once, so grid-template-columns: repeat(3, 1fr) makes three equal columns. Both follow the writing direction, so a flex row starts on the right in an Arabic page. position: absolute and fixed take elements out of the flow, sticky keeps one in view while the page scrolls, and z-index decides which overlapping element is on top.

A media query applies rules only when a condition is true. @media (max-width: 600px) { … } applies when the viewport, the area of the browser window that shows the page, is 600 CSS pixels wide or less, so 600 gets the phone layout and 601 does not. CSS pixels are not device pixels; a high-density phone uses several device pixels for each. On phones this works only when the page has the viewport <meta> element from the page skeleton in the HTML lesson; without it, the phone lays the page out as if on a wide screen and shrinks it. Each breakpoint is a boundary to test on both sides. Queries also react to prefers-color-scheme: dark, prefers-reduced-motion and printing.

Most visual defects trace back to these properties or to the box model:

• Clipped or overflowing text: a fixed height or width, overflow: hidden, white-space: nowrap; long names, translations and enlarged text expose it.
• Overlap: absolute or fixed positioning, negative margins, a wrong z-index. A sticky header that completely hides the focused field also fails WCAG 2.2 criterion 2.4.11 Focus Not Obscured (Minimum).
• Sideways scrolling on phones: fixed widths, images without max-width: 100%, flex rows that never wrap (flex-wrap defaults to nowrap), box-sizing arithmetic.
• Misalignment: similar elements with different margins, padding or alignment settings.
• Unreadable text: a colour too close to the background, often only in dark mode or on hover.
• No visible focus: outline: none with no replacement style.
• Mirroring defects in right-to-left pages: physical properties such as margin-left do not flip, while flex, grid and logical properties such as margin-inline-start do.

Try it: Lorem Ipsum Generator Try it: Multilingual Test Data Generator

Worked example: a card that scrolls sideways

A teammate reports that the checkout page scrolls sideways on a phone. You open the browser's developer tools with F12 and switch on device mode (Ctrl+Shift+M in Chrome, Edge and Firefox), which sets the viewport to any width. At 360 pixels the promotion card sticks out past the edge of the screen; at desktop widths it looks fine. The CSS is below, and the card's parent is as wide as the viewport.

Right-click the card and choose Inspect. The Styles pane lists the rules that apply to it, with overridden declarations crossed out: the media query is active, so width: 100% applies. The box-model diagram in the Computed pane shows 16 pixels of padding and a 2-pixel border on each side. With the default content-box, 360 + 2 × 16 + 2 × 2 = 396 pixels: 36 pixels wider than the screen. The same 36 pixels are added at every width up to 480; from 481 the card is 320 + 36 = 356 pixels wide and fits.

The bug report states facts: page, element (.promo-card), browser, viewport (every width up to 480 pixels; 481 is fine), expected (the card fits the screen) and actual (a 396-pixel box and a horizontal scrollbar at 360), with a screenshot and the computed values. Mention box-sizing as the likely cause; the developer chooses the fix. Then retest at 480 and 481 pixels, in English and Arabic, and on the other pages that use .promo-card.

.promo-card {
  width: 320px;
  padding: 16px;
  border: 2px solid #d0d7de;
}

@media (max-width: 480px) {
  .promo-card { width: 100%; }
}

/* Viewport 360px, box-sizing: content-box (the default):
   360 + 2 × 16 + 2 × 2 = 396px wide, 36px wider than the screen */

Try it: Lorem Ipsum Generator Try it: Multilingual Test Data Generator

CSS selectors as locators: a preview

An automated test must find an element before it can click or check it, and a CSS selector is one way to describe it: Selenium's By.cssSelector, Cypress's cy.get and Playwright's page.locator all accept one. In the Console tab of the developer tools, document.querySelectorAll('[data-testid="pay-now"]').length counts the matches; a locator should match exactly one element.

A good styling selector is not always a good locator. Styling classes change with a redesign, long paths break when a wrapper is added, and generated names such as css-1q2w3e change between builds. Prefer short selectors on attributes meant for identification: a stable id, a field's name, or a test attribute such as data-testid. Playwright's documentation recommends user-facing locators (role, label, text) and test ids, and advises against CSS and XPath because they break when the page structure changes. In Selenium and Cypress, a test id is itself normally found with a CSS attribute selector.

• Brittle: div.col-md-6 > div:nth-child(3) > button.btn-primary.
• Better: [data-testid="pay-now"], #email or input[name="email"].

Try it: HTML Formatter

Frequently asked questions

References

• CSS: Cascading Style Sheets — MDNMDN Web Docs (Mozilla)MDN's CSS reference and guides: selectors, the cascade, properties and the layout systems that decide how a page looks and adapts.
• Responsive web design — MDNMDN Web Docs (Mozilla)Responsive design in practice: flexible layouts with flexbox and grid, media queries and the viewport meta tag, so one page works across screen sizes.
• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024The W3C Recommendation that defines the testable success criteria for accessible web content, organised under four principles and three conformance levels (A, AA, AAA).
• Locators — PlaywrightMicrosoft (Playwright)How Playwright finds elements, why locators re-resolve and auto-wait, and why role-based locators are recommended first.