Scribd
Upload
2 views

CSS_Details

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in controlling the layout and presentation of HTML elements. It covers various types of CSS, the CSS box model, selectors, properties like opacity and float, and concepts such as responsive web design and font-related attributes. Additionally, it explains the differences between visibility and display properties, as well as inline, inline-block, and block elements.

Uploaded by

rahulharyan2002
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

CSS_Details

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in controlling the layout and presentation of HTML elements. It covers various types of CSS, the CSS box model, selectors, properties like opacity and float, and concepts such as responsive web design and font-related attributes. Additionally, it explains the differences between visibility and display properties, as well as inline, inline-block, and block elements.

Uploaded by

rahulharyan2002
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

1. **What is CSS?

**
CSS (Cascading Style Sheets) is a style sheet language used to control the layout,
design, and presentation of HTML elements. It allows developers to apply styles to
HTML elements, including colors, fonts, spacing, positioning, and more.

2. **What are the Types of CSS and How to Use It?**


There are several types of CSS:
- **Inline CSS**: Applied directly to an HTML element using the `style` attribute.
```html
<p style="color: red;">This is inline CSS.</p>
```
- **Internal CSS**: Defined within a `<style>` tag in the HTML document’s `<head>`
section.
```html
<style>
p { color: blue; }
</style>
```
- **External CSS**: A separate CSS file linked to the HTML file using the `<link>`
tag.
```html
<link rel="stylesheet" href="style.css">
```

3. **What is CSS Box Modeling?**


The CSS box model describes how elements are structured. Every HTML element is
treated as a rectangular box that includes:
- **Content**: The text and images inside the box.
- **Padding**: Space between the content and the border.
- **Border**: Surrounds the padding and content.
- **Margin**: Space outside the border, separating the element from others.

```css
p {
margin: 10px;
padding: 5px;
border: 1px solid black;
width: 200px;
}
```

4. **What is a CSS Selector?**


A **CSS selector** is a pattern used to select HTML elements and apply styles to
them. Common selectors include:
- **Universal Selector**: `*` selects all elements.
- **Class Selector**: `.` selects elements with a specific class.
- **ID Selector**: `#` selects elements with a specific ID.
- **Type Selector**: Selects elements by their tag name.

```css
p { color: red; } /* Type selector */
.example { color: blue; } /* Class selector */
#header { color: green; } /* ID selector */
```

5. **What is the Use of CSS Opacity?**


The `opacity` property controls the transparency of an element. A value of `1`
makes the element fully visible, while `0` makes it fully transparent.
- **Syntax**: `opacity: value;`
```css
.example { opacity: 0.5; } /* 50% opacity */
```

6. **What is the Difference Between Class Selectors and ID Selectors?**


- **Class Selector (`.`)**: Targets multiple elements with a common class. Useful
for styling multiple elements.
```css
.example { color: blue; }
```
- **ID Selector (`#`)**: Targets a single, unique element. Use when you need
specific styling for one element.
```css
#header { color: red; }
```

7. **What is the Float Property of CSS?**


The `float` property is used to position elements to the left or right within their
container, pushing other elements to flow around them.
- **Syntax**: `float: left;` or `float: right;`
```css
.left { float: left; }
```

8. **Explain CSS Position Property?**


The `position` property controls how an element is positioned in relation to its
container.
- **Static** (default): Elements are positioned according to the normal document
flow.
- **Relative**: Positioned relative to its normal position.
- **Absolute**: Positioned relative to its closest positioned ancestor.
- **Fixed**: Positioned relative to the viewport and does not move.

```css
.example { position: relative; }
```

9. **Explain the Difference Between `visibility: hidden` and `display: none`?**


- **visibility: hidden**: The element is hidden but still occupies space in the
document flow.
```css
.hidden { visibility: hidden; }
```
- **display: none**: The element is removed from the document flow, and no space is
taken.
```css
.hidden { display: none; }
```

10. **What is the Difference Between Inline, Inline-block, and Block?**


- **Inline Elements**: Do not start on a new line and only take as much width as
necessary.
```css
p, a { display: inline; }
```
- **Inline-Block Elements**: Take the full width of their container, like block
elements, but flow like inline elements.
```css
.example { display: inline-block; }
```
- **Block Elements**: Take up the full width of the container and start on a new
line.
```css
div, h1 { display: block; }
```

11. **What is z-index in CSS?**


The `z-index` property controls the stacking order of elements. A higher `z-index`
value places the element above others.
- **Syntax**: `z-index: value;`
```css
.above { z-index: 10; }
```

12. **What is the Overflow Property in CSS Used For?**


The `overflow` property controls how content is displayed if it exceeds the
element’s dimensions.
- **visible**: Shows all content.
- **hidden**: Hides content that exceeds the container’s dimensions.
- **scroll**: Adds scrollbars to view the hidden content.
- **auto**: Adds scrollbars only when necessary.

```css
.example { overflow: auto; }
```

13. **What is Responsive Web Design?**


Responsive Web Design (RWD) ensures that a website looks and works well on
different screen sizes and devices. It uses flexible grids, media queries, and
flexible images to adjust layouts based on viewport size.

```css
@media (max-width: 768px) {
body { font-size: 14px; }
}
```

14. **What are the Various Font-Related Attributes in CSS?**


- **font-family**: Specifies the font to be used.
```css
font-family: Arial, sans-serif;
```
- **font-size**: Sets the size of the font.
```css
font-size: 16px;
```
- **font-weight**: Specifies the weight (boldness) of the font.
```css
font-weight: bold;
```
- **font-style**: Specifies the style (normal, italic, or oblique).
```css
font-style: italic;
```
- **text-align**: Aligns the text (left, center, right, justify).
```css
text-align: center;
```
- **line-height**: Sets the height of a line of text.
```css
line-height: 1.5;
```

You might also like