Css interview questions

1.What is CSS?
CSS stands for Cascading Style Sheets. It is a styling language used to design and control the appearance of HTML web pages.
HTML is used to create the structure of a webpage, while CSS is used to make the webpage beautiful and user-friendly.
CSS can be used to change:
Text color
Font size and style
Background color
Width and height
Margin and padding
Borders
Page layout
Responsive design
Example:
p { color: blue; font-size: 20px; }
Here, the paragraph text becomes blue and its font size becomes 20px.

What are the types of CSS? **There are three types of CSS:

1. Inline CSS
CSS is written directly inside an HTML element using the style attribute.
HTML
HelloIt is useful when we want to apply a style to a single element.

**2. Internal CSS
**CSS is written inside the tag in the HTML document. HTML <code><style> p { color: blue; } </style></code> It is useful when styling a single webpage. 3. External CSS CSS is written in a separate .css file and connected to the HTML file. HTML <code><link rel="stylesheet" href="style.css"></code> This is commonly preferred for larger websites because the same CSS file can be used for multiple webpages. 3. What is a CSS Selector? **A CSS selector is used to select HTML elements that we want to style. **For example: <code>p { color: red; }</code> Here, p is the selector, and the style is applied to all elements. Common selectors include: Element selector: p Class selector: .title ID selector: #header Universal selector: * Attribute selector: [type="text"] Example: <code>.title { color: green; }</code> This applies the style to elements having the class title. 4. What is the difference between Class and ID in CSS? Both class and ID are used to identify HTML elements, but they are used differently. Class: Written using . in CSS. Can be used on multiple elements. Useful when applying the same style to several elements. .student { color: blue; } ID: Written using # in CSS.tq Normally used for one unique element. Useful when identifying a specific element. <h1> <a name="header-" href="#header-" class="anchor"> </a> header { </h1> color: red; } **Simple difference: **Class → Multiple elements ID → One unique element 5. What is the CSS Box Model? The CSS Box Model describes how every HTML element is represented as a rectangular box. It consists of four parts: Content – The actual text or image. Padding – Space between the content and border. Border – The line around the padding and content. Margin – Space outside the border. The order is: Content → Padding → Border → Margin *Example: *.<code>box { width: 200px; padding: 20px; border: 2px solid black; margin: 10px; }</code> The Box Model is very important for controlling the size and spacing of elements. 6. What is Padding in CSS? Padding is the space between the content and the border of an element. For example: .<code>box { padding: 20px; }</code> This creates 20px of space between the content and the border. We can also specify padding for individual sides: <code>.box { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }</code> Simple example: If a box contains the word "Hello", padding creates space around "Hello" inside the box. 7. What is Margin in CSS? **Margin is the space outside the border of an element. It is used to create space between elements. **Example: <code>.box { margin: 20px; }</code> This creates 20px of space around the outside of the element. We can also use: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; Padding vs Margin **Padding: **Space inside the border. **Margin: **Space outside the border. 8. What is display: flex in CSS? Flexbox is a CSS layout system used to arrange elements in a row or column. To use Flexbox: <code>.container { display: flex; }</code> By default, the child elements are arranged in a row. Some important Flexbox properties are: display: flex flex-direction justify-content align-items gap flex-wrap Example: <code>.container { display: flex; justify-content: center; align-items: center; }</code> Flexbox is commonly used to create navigation bars, cards, buttons, and page layouts. 9. What is CSS Grid? **CSS Grid is a layout system used to arrange elements in rows and columns. **Example: <code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }</code> This creates three columns of equal size. Grid is useful for creating: Website layouts Image galleries Product cards Dashboard layouts Rows and columns Flexbox vs Grid Flexbox: **Mainly works in one direction — row or column. **Grid: Works in two directions — rows and columns. 10. What is the difference between Flexbox and Grid? **Both Flexbox and Grid are CSS layout systems, but they are designed for different purposes. **Flexbox Flexbox is mainly a one-dimensional layout system. It is useful when arranging elements in: A row A column Example: **<code>.container { display: flex; justify-content: space-between; }</code> Grid Grid is a two-dimensional layout system. It is useful when working with: Rows Columns Complete page layouts **Example: <code>.container { display: grid; grid-template-columns: 1fr 1fr; }</code>

DEV Community

Css interview questions

Top comments (0)