|
Question: What are the different ways to include CSS in a web page?
|
Answer: CSS can be included in a web page using three main methods:
• Inline styles: Using the style attribute directly within HTML elements
• Internal styles: Using the <style> element within the <head> section of the HTML document
• External styles: Linking to an external CSS file using the <link> element within the <head> section
|
|
Question: What is the purpose of the 'box-sizing' property in CSS?
|
Answer: The box-sizing property in CSS determines how the width and height of an element
are calculated, including the content, padding, and border.
By default, the box-sizing property is set to content-box, which means the width and height only apply
to the content area. Setting it to border-box includes both padding and border in the width and height calculations.
|
|
Question: Explain the difference between 'position: relative', 'position: absolute', and 'position: fixed' in CSS?
|
Answer: Below please find the difference:
• 'position: relative' positions an element relative to its normal position in the document flow. It can be moved using the top, right, bottom, and left properties.
• 'position: absolute' positions an element relative to its closest positioned ancestor (an ancestor with a position other than static). It is taken out of the normal document flow.
• 'position: fixed' positions an element relative to the viewport (browser window), so it remains fixed in its position even when the page is scrolled.
|
|
Question: What is the difference between a class and an ID selector in CSS?
|
Answer: Below please find the differences:
• Class selectors are preceded by a dot (.) and can be applied to multiple elements on a page. They are used to apply styles to groups of elements.
• ID selectors are preceded by a hash (#) and are used to uniquely identify a single element on a page. They should be used sparingly and should only apply to one element per page.
|
|
Question: What is the float property in CSS, and how does it work?
|
Answer: The float property in CSS is used to move an element to the left or right and allow content to flow around it.
It is commonly used for creating layouts with multiple columns.
Elements floated left or right will be removed from the normal document flow and will align horizontally.
|
|
Question: Can you explain the difference between 'display: inline' and 'display: inline-block' in CSS?
|
Answer: Below please find the differences:
• Elements with 'display: inline' behave like inline elements and do not start on a new line. However, they do not respect width and height properties.
• Elements with 'display: inline-block' behave like inline elements but can have a width, height, padding, and margin applied to them. They still flow inline but can have block-level properties.
|
|
Question: What is the purpose of the '@media' rule in CSS?
|
Answer: The '@media' rule in CSS is used to apply different styles based on the characteristics of the device,
such as screen size, resolution, orientation, etc. It allows developers to create responsive designs
that adapt to different devices and screen sizes.
|