CSS Full Notes PDF (Quality Assurance Testers)

Module 1: Introduction to CSS

1. What is CSS?

2. Why should a QA tester learn CSS?

• Check whether text, buttons, images, and forms look correct.
• Identify alignment, spacing, color, and font issues.
• Verify that a webpage works on mobile, tablet, and desktop.
• Find elements using CSS selectors in Selenium or Playwright.
• Identify hidden, disabled, overlapping, or incorrectly positioned elements.
• Inspect hover effects, error messages, responsive layouts, and navigation menus.
• Debug UI issues using browser Developer Tools.

3. Difference between HTML, CSS, and JavaScript

• HTML = Structure
• CSS = Appearance
• JavaScript = Behavior

4. How CSS works

h1 {  color: blue;  font-size: 32px;}

• h1 is the selector. It identifies which HTML element to style.
• color and font-size are properties.
• blue and 32px are values.

Types of CSS

1. Inline CSS

<button style="background-color: blue; color: white;">  Login</button>

• Useful for a quick, individual style change.
• The style is written directly on the element.

• Difficult to maintain when many elements need the same style.
• Can make HTML harder to read.
• Can be difficult to override because inline styles generally have higher priority than normal stylesheet rules.

2. Internal CSS

<head>  <style>    h1 {      color: green;    }    button {      padding: 10px 20px;    }  </style></head>

3. External CSS

<link rel="stylesheet" href="style.css">

h1 {  color: green;}button {  padding: 10px 20px;}

• The same stylesheet can be reused across multiple pages.
• Easier to maintain and update.
• Keeps the HTML structure separate from presentation.

• Check whether the stylesheet loads successfully.
• Verify that the correct styles are applied on all relevant pages.
• Check for missing CSS files, broken paths, and unexpected style overrides.

 CSS Selectors

1. What is a CSS selector?

2. Basic CSS selectors

p {  color: black;}

<input id="username" type="text">

#username {  border: 1px solid blue;}

// Playwrightpage.locator("#username");

<button class="login-btn">Login</button>

.login-btn {  background-color: blue;}

page.locator(".login-btn");

* {  box-sizing: border-box;}

h1, h2, p {  font-family: Arial, sans-serif;}

3. Attribute selectors

<input type="email" placeholder="Enter email">

input[type="email"] {  border: 1px solid gray;}

4. CSS combinators

<div class="form">  <p>Enter your details</p>  <section>    <p>Additional information</p>  </section></div>

• .form > p matches the first paragraph.
• .form p matches both paragraphs.

5. Pseudo-classes

button:hover {  background-color: darkblue;}input:focus {  border-color: blue;}input:invalid {  border-color: red;}

6. Pseudo-elements

p::first-letter {  font-size: 24px;}.required::after {  content: " *";  color: red;}

• ::before — inserts generated content before an element’s content.
• ::after — inserts generated content after an element’s content.
• ::first-letter — styles the first letter.
• ::first-line — styles the first line.
• ::placeholder — styles placeholder text.

7. CSS specificity

<p id="message" class="warning">Invalid password</p>

p {  color: black;}.warning {  color: orange;}#message {  color: red;}

1. Inline styles
2. ID selectors
3. Class, attribute, and pseudo-class selectors
4. Element and pseudo-element selectors

.warning {  color: orange !important;}

8. CSS selectors for automation testing

<input id="email" type="email"><input id="password" type="password"><button class="submit-btn">Login</button>

page.locator("#email");page.locator("#password");page.locator(".submit-btn");page.locator('input[type="password"]');

driver.findElement(By.cssSelector("#email"));
driver.findElement(By.cssSelector("#password"));
driver.findElement(By.cssSelector(".submit-btn"));
driver.findElement(By.cssSelector("input[type='password']"));

CSS Colors, Backgrounds, and Borders

1. Color properties

.heading 
{ 
 color: red;
}
.success 
{ 
 color: #008000;
}
.info
 { 
 color: rgb(0, 0, 255);
}
.overlay
 { 
 background-color: rgba(0, 0, 0, 0.5);}

• Named colors: red, blue, black.
• HEX: #ff0000.
• RGB: rgb(255, 0, 0).
• RGBA: rgba(255, 0, 0, 0.5).
• HSL: hsl(0, 100%, 50%).

2. Background properties

.card 
{ 
 background-color: white; 
 background-image: url("banner.jpg"); 
 background-repeat: no-repeat; 
 background-position: center; 
 background-size: cover;
}

3. Border properties

input {  border: 1px solid gray;  border-radius: 6px;}

• border-width: thickness.
• border-style: solid, dashed, dotted, and others.
• border-color: border color.
• border-radius: rounds corners.

QA testing checklist

• Verify that the correct color appears in each state.
• Check that text is readable against the background.
• Confirm that buttons, cards, and input fields have the expected borders.
• Check whether background images load and crop correctly.
• Test error, success, hover, focus, and disabled states.
• Verify color contrast and do not rely on color alone to communicate an error or success.

Text and Font Properties

1. Font properties

body {  font-family: Arial, sans-serif;  font-size: 16px;  font-weight: 400;  font-style: normal;}

2. Text alignment and decoration

h1 {  text-align: center;  text-decoration: none;}a {  text-decoration: underline;}p {  text-transform: none;  overflow-wrap: anywhere;}

• text-align: left, right, center, or justify.
• text-decoration: underline, overline, or line-through.
• text-transform: uppercase, lowercase, or capitalize.
• text-indent: indentation of the first line.
• white-space: controls how whitespace and line breaks are handled.
• overflow-wrap: helps long words or strings wrap instead of overflowing.

3. CSS units used in text styling

4. Typography testing checklist

• Confirm that the correct font loads.
• Check font size, weight, color, and alignment.
• Verify that headings and paragraphs wrap properly.
• Check long words, URLs, and large numbers.
• Test text at browser zoom levels and on small screens.
• Confirm that buttons and form labels remain readable.
• Check that translated or longer text does not overlap nearby elements.

The CSS Box Model

1. Content

.card {  width: 300px;  height: 150px;}

2. Padding

.card {  padding: 20px;}

.card {  padding-top: 10px; 
 padding-right: 20px;  
padding-bottom: 10px; 
 padding-left: 20px;
}

3. Border

.card {  border: 2px solid black;}

4. Margin

.card {  margin: 20px;}

.card {  margin: 10px;  padding: 20px;  border: 2px solid black;}

5. The box-sizing property

* {  box-sizing: border-box;}

6. Margin vs padding

7. Box model testing

• The width and height match the design.
• Cards have consistent internal spacing.
• Buttons have enough padding for their labels.
• Form fields align correctly.
• Margins do not create unwanted gaps or overlap.
• Elements do not overflow their containers.
• Layouts remain correct when text length changes.

 CSS Display Properties

1. display: block

div {  display: block;}

2. display: inline

span {  display: inline;}

3. display: inline-block

button {  display: inline-block;  width: 120px;  height: 40px;}

4. display: none

.popup {  display: none;}

5. visibility: hidden

.popup {  visibility: hidden;}

6. opacity: 0

.popup {  opacity: 0;}

Important QA comparison

 CSS Positioning and Z-Index

1. Static positioning

.card {  position: static;}

2. Relative positioning

.card {  position: relative;  top: 10px;  left: 20px;}

3. Absolute positioning

.parent {  position: relative;}.close-btn {  position: absolute;  top: 10px;  right: 10px;}

4. Fixed positioning

.help-btn
 { 
 position: fixed;  
right: 20px; 
 bottom: 20px;
}

5. Sticky positioning

.header
 { 
 position: sticky; 
 top: 0;
}

6. Z-index

.modal
{ 
 position: fixed;  
z-index: 1000;
}
.header 
{  
position: relative;  
z-index: 10;
}

QA test scenarios

• Check whether a sticky header hides page content.
• Verify that modal dialogs appear above the page.
• Check whether dropdowns are cut off or covered by other elements.
• Verify that a fixed help button does not cover the Submit button.
• Check whether close buttons stay inside their intended containers.
• Scroll the page to test sticky and fixed elements.

 Flexbox

1. Flex container and flex items

<div class="container"> 
 <div>Home</div> 
 <div>About</div>  
<div>Contact</div></div>

.container {  display: flex;  gap: 20px;}

2. Important Flexbox properties

3. Flex direction

.container {  display: flex;  flex-direction: row;}

• row: left to right in the usual horizontal writing mode.
• row-reverse: reverse row direction.
• column: vertical direction.
• column-reverse: reverse column direction.

4. Justify content

.container {  display: flex;  justify-content: space-between;}

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

5. Align items

.container {  display: flex;  align-items: center;}

6. Flex wrap

.cards {  display: flex;  flex-wrap: wrap;  gap: 16px;}

7. Flex grow and shrink

.left {  flex-grow: 1;}.right {  flex-grow: 2;}

.item {  flex-shrink: 1;}

Real-time QA example

1. Is display: flex applied to the correct parent?
2. Is flex-wrap set appropriately?
3. Is the gap too large for the available width?
4. Are the items allowed to shrink?
5. Is the parent width constrained?
6. Is a media query changing the layout?

Flexbox interview questions

CSS Grid

1. Creating a grid

<div class="grid">  <div>Card 1</div>  <div>Card 2</div>  <div>Card 3</div>  <div>Card 4</div></div>

.grid {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 20px;}

2. Important Grid properties

3. The fr unit

.grid {  display: grid;  grid-template-columns: 1fr 2fr;}

4. Responsive grid using minmax()

.products {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 16px;}

.products {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 16px;}

5. Flexbox vs Grid

QA testing scenario

• The number of columns at each viewport size.
• Consistent card gaps and alignment.
• No overlapping or clipped content.
• Long titles do not break the grid.
• Images maintain the expected proportions.
• Cards remain readable when text or prices change.

 Responsive Web Design and Media Queries

1. What is a media query?

@media (max-width: 600px)
 { 
 .container
 {   
 padding: 12px;  
}  
h1
 { 
   font-size: 24px; 
 }}

2. Example: Responsive layout

.cards {  display: grid; 
 grid-template-columns: repeat(3, minmax(0, 1fr)); 
 gap: 20px;}@media (max-width: 900px)
{
  .cards 
{   
 grid-template-columns: repeat(2, minmax(0, 1fr)); 
 }}
@media (max-width: 600px) 
{  
.cards
 {  
  grid-template-columns: 1fr; 
 }}

• Large screens: three columns.
• Medium screens: two columns.
• Small screens: one column.

3. Viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

4. Common responsive testing breakpoints

5. Responsive testing checklist

• Check horizontal scrolling at narrow widths.
• Verify that the navigation menu works on mobile.
• Check that buttons remain visible and tappable.
• Confirm that text does not overlap images or other text.
• Verify that forms fit the screen.
• Test portrait and landscape orientation.
• Check modal dialogs and dropdowns.
• Verify that images scale without distortion.
• Test at intermediate widths, not only predefined breakpoints.
• Check browser zoom and enlarged text.
• Confirm that sticky headers and footers do not hide important content.

6. How to test responsive layouts in Chrome

1. Open the website in Google Chrome.
2. Press F12 or Ctrl + Shift + I.
3. Click the device toolbar icon, or press Ctrl + Shift + M.
4. Select a device profile or enter a custom viewport width and height.
5. Test the page at different widths.
6. Check portrait and landscape orientation.
7. Inspect any overlapping, missing, or clipped elements.
8. Compare the result with the expected design.

CSS Overflow

1. Main overflow values

.container {  overflow: visible;}

2. Horizontal and vertical overflow

.container {  overflow-x: auto;  overflow-y: hidden;}

• overflow-x controls horizontal overflow.
• overflow-y controls vertical overflow.

3. Text overflow

.title {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

QA scenarios

• A long username extends outside a profile card.
• A table’s last columns are inaccessible on mobile.
• A button label is cut off.
• A dropdown menu is clipped by its parent.
• A modal’s content cannot be scrolled.
• A long URL causes horizontal scrolling across the entire page.

CSS Transitions, Transforms, and Animations

1. Transitions

button { 
 background-color: blue; 
 transition: background-color 0.3s ease;
}
button:hover 
{ 
 background-color: darkblue;
}

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

2. Transforms

.card:hover {  transform: scale(1.05);}

.box {  transform: translateX(10px);}.image {  transform: rotate(5deg);}

3. Animations

@keyframes fadeIn {  from {    opacity: 0;  }  to {    opacity: 1;  }}.message {  animation: fadeIn 0.5s ease;}

4. Reduced motion

@media (prefers-reduced-motion: reduce) {  .animated-element {    animation: none;    transition: none;  }}

QA testing checklist

• Verify that hover effects appear only when expected.
• Check transitions for sudden jumps or unwanted delays.
• Confirm that animations do not hide important content.
• Check for overlapping elements during movement.
• Verify that animations do not block clicks or keyboard interaction.
• Test the reduced-motion preference.
• Confirm that animation timing does not interfere with automated tests.

CSS Variables, Inheritance, and the Cascade

1. CSS custom properties (variables)

:root 
{ 
 --primary-color: #2563eb; 
 --text-color: #222222; 
 --spacing: 16px;
}
button 
{ 
 background-color: var(--primary-color);
}
p 
{ 
 color: var(--text-color); 
 margin-bottom: var(--spacing);
}

• Shared colors and spacing are easier to maintain.
• Themes can be changed centrally.
• Repeated values can be kept consistent.

2. Inheritance

body 
{ 
color: #222; 
 font-family: Arial, sans-serif;
}

3. The cascade

• Origin and importance.
• Cascade layers.
• Selector specificity.
• Scoping proximity where applicable.
• Source order when the earlier factors are tied.

 CSS Forms and Interactive States

1. Styling form fields

input 
{ 
 width: 100%; 
 padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

2. Focus state

input:focus 
{ 
 border-color: blue; 
 outline: 2px solid lightblue;
}

3. Disabled state

button:disabled
 { 
 opacity: 0.5;
  cursor: not-allowed;
}

4. Validation states

input:invalid
 {
 border-color: red;
}
input:valid
 { 
 border-color: green;
}

QA form scenarios

1. Verify the default appearance of every input.
2. Click each field and check its focus indicator.
3. Enter valid and invalid values.
4. Check required-field messages.
5. Verify the disabled state of Submit where appropriate.
6. Check checkbox and radio selection styles.
7. Confirm that error messages are readable and positioned correctly.
8. Test form layouts at different viewport sizes.
9. Verify keyboard navigation.
10. Confirm that visual validation matches actual form behavior.

CSS Tables, Images, and Cards

1. Tables

table 
{ 
 width: 100%; 
 border-collapse: collapse;
}
th,
td 
{  
padding: 12px;
border: 1px solid #dddddd;
text-align: left;
}

• Column headings align correctly.
• Rows do not overlap.
• Text remains readable.
• Wide tables are usable on mobile.
• Borders and row spacing are consistent.
• Long content does not break the layout.

2. Images

img {  max-width: 100%;  height: auto;}

.thumbnail {  width: 300px;  height: 180px;  object-fit: cover;}

• cover: fills the container, potentially cropping.
• contain: fits the whole image, potentially leaving empty space.
• fill: stretches the image to the container dimensions and may distort it.

• Images load correctly.
• Images do not become distorted.
• Cropping matches the design.
• Alternative text is available where appropriate.
• Image containers do not overflow.
• Layout shifts caused by image loading are investigated when relevant.

3. Cards

.card {  padding: 20px;  border: 1px solid #dddddd;  border-radius: 8px;  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}

CSS and Browser Developer Tools

1. Inspect an element

1. Open the webpage in Chrome.
2. Right-click the element.
3. Select Inspect.
4. Review the HTML in the Elements panel.
5. Check the Styles panel for applied CSS rules.
6. Review computed values in the Computed panel.
7. Toggle CSS declarations to investigate the issue.

2. Inspect computed styles

• color
• display
• width
• height
• margin
• padding
• font-size
• position
• z-index
• overflow

3. Test media queries

4. Check CSS loading problems

• Open the Network panel.
• Reload the page.
• Filter by CSS resources.
• Check for failed stylesheet requests.
• Inspect the Console for related errors.

5. Temporary changes vs permanent fixes

CSS Selectors for Selenium and Playwright — Advanced Practice

<form id="login-form">  
<input id="email" type="email" name="email"> 
 <input id="password" type="password" name="password"> 
 <button class="submit-btn" type="submit">Login</button> 
 <p class="error-message">Invalid credentials</p></form>

Common selectors with examples

Playwright example

const email = page.locator("#email");
const password = page.locator("#password");
const loginButton = page.locator(".submit-btn");
await email.fill("tester@example.com");
await password.fill("Test@123");
await loginButton.click();

Selenium with Java example

WebElement email =    driver.findElement(By.cssSelector("#email"));
WebElement password =    driver.findElement(By.cssSelector("#password"));
WebElement loginButton =    driver.findElement(By.cssSelector(".submit-btn"));
email.sendKeys("tester@example.com");
password.sendKeys("Test@123");
loginButton.click();

How to identify a good selector

• Specific enough to locate the intended element.
• Stable when the design changes.
• Easy for other testers to understand.
• Unlikely to match several unintended elements.

body > div:nth-child(2) > div > form > button

#login-form .submit-btn

<button data-testid="login-submit">Login</button>

page.getByTestId("login-submit");

page.getByRole("button", { name: "Login" });page.getByLabel("Email");

 CSS Accessibility Testing

1. Color contrast

• Normal text: 4.5:1.
• Large text: 3:1.
• Essential visual information for UI components and graphical objects: generally 3:1 against adjacent colors, where the criterion applies.

2. Keyboard focus

button:focus-visible {  outline: 3px solid blue;  outline-offset: 2px;}

• Links and buttons.
• Form fields.
• Dropdown menus.
• Dialogs and popups.
• Navigation menus.
• Custom controls.

3. Avoid removing focus indicators

*:focus {  outline: none;}

4. Text resizing and zoom

• The browser is zoomed in.
• Text is enlarged.
• Content wraps onto additional lines.
• Buttons have longer labels.
• The user changes device orientation.

5. Do not rely only on color

6. Reduced motion

Accessibility testing scenario

CSS Bug Reporting for QA

Example 1: Mobile layout issue

Example 2: Text overlap

• Steps: Open the homepage, set the viewport to a tablet-sized width, and inspect the header.
• Expected: The heading and navigation should remain separate and readable.
• Actual: The heading overlaps the navigation links.
• Possible CSS causes: Incorrect positioning, fixed widths, insufficient flex space, or a missing breakpoint.

Example 3: Incorrect button state

• Steps: Open the registration form and leave a required field empty.
• Expected: The button should follow the specified disabled-state appearance and behavior.
• Actual: The button appears identical to an enabled button.
• Investigation: Check whether the disabled attribute is applied, whether the CSS selector matches, and whether another style overrides the expected appearance.

CSS Interview Questions and Answers

Beginner-level questions

Intermediate-level questions

Advanced QA-focused questions

Practical CSS Testing Exercise

<div class="login-card">  <h2>Login</h2>  <label for="email">Email</label> 

.login-card {  width: 320px;  padding: 20px;  border: 1px solid #cccccc; 

Your testing tasks

1. Verify that the login card is centered.
2. Check that the email field fits within the card.
3. Verify that the button has the expected background and text colors.
4. Test the layout at 320px viewport width.
5. Check whether the input and button overlap.
6. Inspect the focus state of the email field.
7. Test the page at 200% browser zoom.
8. Inspect the computed width, padding, margin, and border properties.

.login-card {  width: 100%;  max-width: 320px;  box-sizing: border-box;  margin: 20px auto;}