.png)
CSS Fundamentals
CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall visual appearance of web pages.1. CSS Syntax :-
CSS consists of selectors and declaration blocks:
‣ Selector: Targets HTML elements (e.g., `h1`, `.class`, `#id`).
‣ Declaration Block: Contains one or more declarations, each consisting of a property and a value, enclosed in curly braces.
2. Selectors :-
‣ Element Selector: Targets all instances of a specific element (e.g., `p`).
‣ Class Selector: Targets elements with a specific class (e.g., `.classname`).
‣ ID Selector: Targets a single element with a specific ID (e.g., `#idname`).
‣ Attribute Selector: Targets elements based on attributes (e.g., `[type="text"]`).
‣ Pseudo-classes and Pseudo-elements: Targets elements in a specific state (e.g., `:hover`, `::before`).
3. Box Model :-
The CSS box model describes how elements are structured and displayed. It consists of:
‣ Content: The inner part where text and images appear.
‣ Padding: Space between the content and the border.
‣ Border: Surrounds the padding and content.
‣ Margin: Space outside the border, separating the element from others.
4. Positioning :-
CSS provides several positioning methods:
‣ Static: Default positioning; elements are placed in the normal flow.
‣ Relative: Positioned relative to its normal position.
‣ Absolute: Positioned relative to the nearest positioned ancestor.
‣ Fixed: Positioned relative to the viewport; it remains in the same position when scrolling.
‣ Sticky: A hybrid of relative and fixed; it behaves like a relative element until it reaches a certain point in the viewport.
5. Flexbox and Grid :-
‣ Flexbox: A layout model that allows responsive design by distributing space along a single axis.
‣ Grid: A two-dimensional layout model that uses rows and columns, providing greater control over the arrangement of elements.
6. Colors and Backgrounds :-
CSS allows for a wide range of color formats:
‣ Named colors (e.g., `red`)
‣ Hexadecimal (e.g., `#FF5733`)
‣ RGB (e.g., `rgb(255, 87, 51)`)
‣ RGBA (e.g., `rgba(255, 87, 51, 0.5)` for transparency)
Backgrounds can include colors, images, gradients, and more.
7. Fonts and Text :-
CSS provides control over typography:
‣ Font Family: Specifies the typeface (e.g., `font-family: Arial, sans-serif;`).
‣ Font Size: Controls the size of the text (e.g., `font-size: 16px;`).
‣ Text Align: Aligns text (e.g., `text-align: center;`).
‣ Line Height: Controls the spacing between lines of text.
8. Media Queries :-
Media queries enable responsive design by applying styles based on device characteristics like width, height, and orientation.
9. CSS Best Practices :-
‣ Keep styles organized and modular.
‣ Use comments for clarity.
‣ Minimize specificity to avoid complexity.
‣ Optimize for performance by reducing CSS file size.
These fundamentals provide a strong foundation for working with CSS, allowing for the creation of visually appealing and responsive web designs.
