Basics CSS Questions Part 1

Namya Shah's photo
Namya Shah
·

3 min read

  1. What does CSS stand for?

    • Cascading Style Sheets.

  2. What is the purpose of CSS?

    • It's used to style the layout and appearance of web pages.

  3. How do you link an external CSS file to an HTML document?

    • Using the <link> tag within the HTML <head> section, like this: <link rel="stylesheet" href="styles.css">.

  4. What is the difference between padding and margin in CSS?

    • Padding is the space inside an element, while margin is the space outside the element.

  5. How do you select an element by its ID in CSS?

    • Using # followed by the ID name. For instance, #myElement { ... }.

  6. Explain the box model in CSS.

    • The box model describes how elements are rendered on a web page, including content, padding, border, and margin.

  7. What is the default display property for most elements in CSS?

    • display: block; for elements like <div>, <p>, etc., and display: inline; for elements like <span>.

  8. How do you center an element horizontally in CSS?

    • Using margin: 0 auto; with a fixed width or text-align: center; for inline elements within a container.

  9. What are pseudo-classes in CSS?

    • They are keywords added to selectors that specify a special state of the selected elements.

  10. What is the difference between inline and block elements in CSS?

    • Inline elements do not start on a new line and only take up as much width as necessary, while block elements start on a new line and take up the full width available.

  11. Explain the difference between padding and margin.

    • Padding is the space inside an element, while margin is the space outside the element.

  12. What is the purpose of z-index in CSS?

    • It determines the stacking order of positioned elements.

  13. How do you include comments in CSS?

    • Using /* */ around the comment text.

  14. What is the difference between em and rem units in CSS?

    • em units are relative to the font size of the nearest parent element, while rem units are relative to the root element's font size.

  15. How do you make a text italic in CSS?

    • Using the font-style: italic; property.

  16. What is the use of the float property in CSS?

    • It's used to position elements to the left or right inside their container.

  17. How do you apply a background color to an element in CSS?

    • Using the background-color property.

  18. What is the purpose of the position property in CSS?

    • It defines the type of positioning method used for an element.

  19. Explain the difference between class and id in CSS.

    • Class can be used multiple times in a document, while id must be unique within a document.

  20. How do you hide an element in CSS?

    • Using display: none;.

  21. What does the overflow property do in CSS?

    • It specifies what should happen if content overflows its containing element.

  22. What is the purpose of the box-sizing property in CSS?

    • It defines how the total width and height of an element are calculated.

  23. How do you set the text color in CSS?

    • Using the color property.

  24. What is the purpose of the @media rule in CSS?

    • It is used to apply different styles for different media types/devices.

  25. How do you select all paragraphs in CSS?

    • Using the p selector: p { ... }.

Did you find this article valuable?

Support Namya Shah by becoming a sponsor. Any amount is appreciated!

css purposebasicsCSSCSS3questionsCss padding property box-modelCSS Box Modelcss display property #css-displayPseudo-classes css pseudo-classesinlineinline-blockpadding vs margin