CSS Basics and Syntax Quiz

Definition: CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML.
Purpose: Controls layout, colors, fonts, and overall visual style of web pages.

Selector: Targets HTML elements (e.g., h1, .class, #id).
Declaration Block: Contains one or more declarations, each with a property and value (e.g., color: blue;).

Example:

h1 {
    color: blue;
    font-size: 20px;
}

Inline CSS: Styles applied directly within HTML elements using the style attribute.
- Example: <h1 style="color: blue;">Hello</h1>
Internal CSS: Styles defined within a <style> tag in the HTML <head>.
- Example:
```
<style>
    h1 { color: blue; }
</style>
```
External CSS: Styles stored in an external .css file linked to the HTML document.
- Example: <link rel="stylesheet" href="styles.css">

Element Selector: Targets all instances of an element (e.g., p).
Class Selector: Targets elements with a specific class (e.g., .classname).
ID Selector: Targets a unique element with a specific ID (e.g., #idname).
Attribute Selector: Targets elements based on attributes (e.g., [type="text"]).
Pseudo-classes: Styles applied in specific states (e.g., :hover, :focus).
Pseudo-elements: Styles applied to specific parts of elements (e.g., ::before, ::after).

Flexbox: Layout model for one-dimensional layouts; aligns items in a container.
- Key properties: display: flex;, flex-direction, justify-content, align-items.
CSS Grid: Layout model for two-dimensional layouts; defines rows and columns.
- Key properties: display: grid;, grid-template-columns, grid-template-rows.

Allow for responsive design by applying styles based on device characteristics (e.g., screen size).

Example:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Cascading: Styles can override each other based on specificity and order.
Specificity: Hierarchy of selectors determines which style is applied.
Inheritance: Some properties are inherited from parent elements (e.g., font properties).

CSS (Cascading Style Sheets) is a stylesheet language that defines the visual presentation of documents in HTML or XML.
The primary function of CSS is to control layout, color schemes, fonts, and the overall aesthetic of web pages.

A selector identifies which HTML elements to style (e.g., h1, .class, #id).
A declaration block consists of one or more declarations that specify properties and values (e.g., color: blue;).

Example of CSS syntax includes:

h1 {
    color: blue;
    font-size: 20px;
}

Inline CSS: Styles applied directly to HTML elements using the style attribute (e.g., <h1 style="color:blue;">Hello</h1>).
Internal CSS: Styles embedded within a <style> tag in the HTML document (e.g., <style> h1 { color: blue; } </style>).
External CSS: Styles placed in a separate .css file linked to the HTML document via <link> tag.

Element Selector: Targets all occurrences of an element type (e.g., p).
Class Selector: Styles elements with a specific class (e.g., .classname).
ID Selector: Targets a unique element with a specific ID (e.g., #idname).
Attribute Selector: Selects elements based on defined attributes (e.g., [type="text"]).
Pseudo-classes: Styles defined for specific states (e.g., when hovering with :hover).
Pseudo-elements: Styles applied to particular parts of elements (e.g., ::before, ::after).

Content: Represents the actual content within the box (like text or images).
Padding: The space between the content and the border of the box.
Border: An optional boundary surrounding the padding.
Margin: Space outside the border that separates elements.

Static: The default positioning where elements are placed in the natural order of the document.
Relative: Elements are positioned relative to their initial location.
Absolute: Elements positioned relative to the closest positioned ancestor (not statically positioned).
Fixed: Elements are anchored to the viewport, remaining in place during scrolling.
Sticky: Elements toggle between relative and fixed positioning depending on the scroll position.

Flexbox: A one-dimensional layout model allowing item alignment in a flexible container; utilizes properties like display: flex;, flex-direction, and justify-content.
CSS Grid: A two-dimensional layout model that organizes items in rows and columns; uses properties like display: grid;, grid-template-columns, and grid-template-rows.

Enable responsive designs by applying different styles based on device characteristics (e.g., screen width).

Example of a media query:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Cascading: The order and specificity of styles determine which rules take precedence.
Specificity: Hierarchical structure of selectors dictates the application of styles.
Inheritance: Certain properties are automatically inherited from parent elements (commonly font-related properties).