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

PHP INTERVIEW QUESTIONS

      PHP INTERVIEW QUESTIONS 1. WHAT IS PHP? PHP (Hypertext Preprocessor) is a server site scripting language designed for web development. It is widely used foe creating dynamic and interactive website.  2 . Difference between echo and print? echo is faster then print, can print multiple values,  No return value. print slower, return 1 (true) prints on;y one value echo "Hello", " World!";  // ✅ Works print "Hello", " World!"; // ❌ Error 3. Difference between variable and constants?  Both variables and constants store data, but they behave differently.  variable can changeable constants cannot be modify after declaration  variable have local and global scope, while constants are always global  4. what are the different data type in PHP? PHP has 8 primary data types       Data Type Example Description String "Hello"    Sequence of characters Integer 10    Whole number Float 10.5   ...
Read more

PHP Intermediate Questions Interview Preparation

Level          Type Level                                    Arrays, forms, sessions, cookies, file handling, string/date functions 1. What is a PHP session? ➤ Used to store user data across multiple pages. 2. How do you start a session? ➤ Use session_start(); 3.What is a cookie? ➤ Stores small data on the client-side; use setcookie() . 4. How to send a form using PHP? ➤ Use method="post" or method="get" and handle with $_POST or $_GET . 5. How to upload a file in PHP? ➤ Use enctype="multipart/form-data" and handle with $_FILES . 6. How to handle a checkbox or radio in PHP? ➤ Use isset($_POST['checkbox_name']) to check selection. 7. What is the use of explode() function? ➤ Splits a string into an array using a delimiter. 8. What is implode() ? ➤ Joins array elements into a string. 9. How to redirect a page in PHP? ➤ Using h...
Read more

PHP Interview Questions (Beginner Level) – Short Answers

  🔹 PHP Interview Questions (Beginner Level) – Short Answers What is PHP? → PHP is a server-side scripting language used to create dynamic websites. When and why is it used? → Used for web development to handle forms, sessions, databases, and more. What are the main features of PHP? → Open-source, server-side, platform-independent, supports databases. Difference between echo and print ? → echo is faster and can print multiple values; print returns 1 (used in expressions). How do you declare variables in PHP? → With $ symbol. Example: $name = "John"; What are data types in PHP? → String, Integer, Float, Boolean, Array, Object, NULL. Difference between == and === ? → == compares values, === compares value + data type. What are superglobals? → Built-in global variables like $_GET , $_POST , $_SESSION , etc. How does PHP handle forms (GET vs POST)? → $_GET shows data in URL; $_POST hides data. POST is safer for sensitive data. Diff...
Read more