Beginner CSS Interview Preparation Structure

 Level                Type

    Beginner                           Basics (syntax, selectors, colors, units, box model)


🎯 Key CSS Topics You Must Prepare

📌 Basics & Syntax

  • What is CSS?

  • Types of CSS (inline, internal, external)

  • CSS Syntax: selector, property, value

  • How to link CSS to HTML

📌 Selectors

  • Universal (*), element (p), class (.btn), ID (#header)

  • Descendant (div p), child (div > p), sibling (p + p)

  • Attribute selectors (input[type="text"])

📌 Box Model

  • content → padding → border → margin

  • Use of width, height, border, outline

📌 Units

  • Absolute: px, cm, in

  • Relative: em, rem, %, vw, vh

📌 Typography & Color

  • font-family, font-size, color, text-align, line-height

  • background-color, background-image, gradients

📌 Layout & Positioning

  • display: block/inline/inline-block/flex/grid/none

  • position: static, relative, absolute, fixed, sticky

  • float, clear, z-index

📌 Flexbox

  • display: flex, justify-content, align-items, flex-direction

📌 Grid

  • display: grid, grid-template-columns, gap

📌 Responsive Design

  • Media Queries: @media (max-width: 768px) {...}

📌 Pseudo-classes and Elements

  • :hover, :focus, :nth-child(), ::before, ::after

📌 Transitions and Animations

  • transition, animation, @keyframes

📌 CSS Variables

  • Declaring & using custom properties: --main-color: #333;

📌 Specificity & Inheritance

  • Inline > ID > Class > Element

  • Importance of !important

📌 Accessibility & Best Practices

  • :focus, outline, readable font sizes

  • Avoiding !important unless necessary

  • Mobile-first design

🚀 Bonus Tips

🔹 2–3 Practical UI tasks to prepare:

  • A card component with image, title, button using Flexbox

  • A responsive navbar with hover effect

  • A two-column layout using Grid or Flexbox

🔹 Use Live Editors:
Practice on CodePen, JSFiddle, or PlayCode

🔹 Keep practicing these snippets:

  • Hover effects on buttons

  • Create a full-page layout (header, main, sidebar, footer)

  • Center a div vertically and horizontally


1. What is CSS?
Ans:
 CSS (Cascading Style Sheets) is used to style HTML elements — controlling layout, colors, fonts, spacing, etc.

2. What are the types of CSS?
Ans:
  • Inline CSS (within element using style="")
  • Internal CSS (inside <style> tag in <head>)
  • External CSS (linked .css file)
3. How do you link CSS to an HTML file?
Ans:
By using the <link> tag with the href attribute in the <head> section of the HTML.

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



4. What is the syntax of a CSS rule?
Ans:
selector {
    property: value;
}

5. What is the difference between id and class in CSS?
Ans:
  • #id is unique, used once per page
  • .class can be reused multiple times
6. What are the different types of selectors in CSS?
Ans:
  • Universal (*)

  • Element (p, div)

  • Class (.box)

  • ID (#header)

  • Group (h1, p)

  • Descendant (div p)

7. What is the use of the color property?
Ans:
It sets the text color of an element.

8. How do you change the background color?
Ans:
body {
  background-color: lightblue;
}

9. What is the difference between margin and padding?
Ans:
  • Margin: Take space outside the element
  • Padding: space inside the element (between content and border)
10. How do you make text bold and italic in CSS?
Ans:
font-weight: bold;
font-style: italic;

 













Comments

Post a Comment

Popular posts from this blog

SQL Questions

  SQL Interview Questions Only (Organized for Preparation) Beginner Level (20 Questions) What is SQL? What are the different types of SQL commands? What is the difference between DDL and DML? What is a Primary Key? What is a Foreign Key? What is a Unique Key? What is the difference between WHERE and HAVING clause? What is a NULL value in SQL? What is a constraint? What are indexes in SQL? How to fetch unique records from a table? What is the difference between DELETE and TRUNCATE? What is the purpose of the GROUP BY clause? What is a View in SQL? What is normalization? What are the types of normalization? What is the use of the ORDER BY clause? What are aggregate functions in SQL? What is a default constraint? What are aliases in SQL? Intermediate Level (20 Questions) What are the types of JOINs in SQL? Explain INNER JOIN with an example. Explain LEFT JOIN with an example. Explain RIGHT JOIN with an examp...
Read more

SQL Beginner Interview Preparation

 Level                  Type      Beginner                             Basics (Database, Tables, Basic Queries) 📌 Key Topics You Must Prepare for SQL: SQL Basics – What is SQL, Commands (DDL, DML, DCL, TCL, DQL) Tables and Keys – Primary Key, Foreign Key, Composite Key Basic Queries – SELECT, WHERE, ORDER BY, GROUP BY, HAVING Joins – INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL JOIN Subqueries – Simple and Correlated Constraints – NOT NULL, UNIQUE, CHECK, DEFAULT Normalization – 1NF, 2NF, 3NF Indexes – Clustered, Non-Clustered Transactions – COMMIT, ROLLBACK, SAVEPOINT, Isolation Levels Views – Virtual tables using SELECT queries Stored Procedures, Functions, and Triggers Optimization Techniques – Indexing, Query Tuning Window Functions – ROW_NUMBER(), RANK(), DENSE_RANK() Backup and R...
Read more

SQL Intermediate Interview Preparation

 Level               Type 1. Difference between INNER JOIN and LEFT JOIN? ➤ INNER JOIN returns matching rows, LEFT JOIN returns all rows from the left table. 2. What is a stored procedure? ➤ A saved collection of SQL statements that can be executed repeatedly. 3. What is a trigger? ➤ A trigger automatically performs actions in response to events on a table. 4. What is an alias in SQL? ➤ Temporary name for a table or column. 5. What is UNION and UNION ALL? ➤ UNION removes duplicates, UNION ALL includes all records. 6. How to prevent SQL injection? ➤ Use prepared statements and parameterized queries. 7. What is ACID property? ➤ Atomicity, Consistency, Isolation, Durability — ensures safe database transactions. 8. What is a transaction? ➤ A sequence of operations performed as a single logical unit of work. 9. How to update data in a table? ➤ Using UPDATE statement. 10. What is a composite key? ➤ A key made of two or more colum...
Read more