Fundamentals Of CSS

 

1. CSS Syntax:

CSS (Cascading Style Sheets) uses a syntax that consists of a selector followed by one or more declarations enclosed in curly braces. Each declaration includes a property and a value separated by a colon. Here's a basic example:

selector { property: value; }

2. Selectors:

Selectors are patterns that select the elements you want to style. Common types of selectors include:

• Element selectors: p, h1, div, etc.
• Class selectors: .classname
• ID selectors: #idname
• Attribute selectors: [attribute="value"]
• Pseudo-classes: :hover, :active, :nth-child(), etc.
• Pseudo-elements: ::before, ::after, etc.

3. Properties and Values:

CSS properties define the appearance and behavior of elements, while values specify the settings for those properties. Some common properties and values include:

• color: Specifies the text color.
• font-size: Sets the size of the font.
• background-color: Defines the background color of an element.
• margin, padding: Controls the spacing around elements.
• border: Sets the border properties (width, style, color).
• display: Determines how an element is displayed (e.g., block, inline, inline-block).

4. Box Model:

The box model describes how elements are rendered on the web page. It consists of four parts:

• Content: The actual content of the element.
• Padding: Space between the content and the border.
• Border: The border surrounding the padding.
• Margin: Space outside the border, affecting the element's placement relative to other elements.

5. Cascading and Specificity:

CSS follows rules of cascading and specificity to determine which styles should be applied to an element when conflicts arise. Specificity is determined by the type of selector used, along with any inline styles or !important declarations.

6. Inheritance:

Some CSS properties are inherited by child elements from their parent elements. This means that if a parent element has a certain style applied, its child elements will inherit that style unless explicitly overridden.

7. Units:

CSS supports various units for specifying lengths, including pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), and more. Understanding how to use these units effectively is crucial for creating responsive designs.

8. Media Queries:

Media queries allow you to apply different styles based on characteristics of the device or viewport, such as screen width, height, orientation, and resolution. They are essential for creating responsive designs that adapt to various devices and screen sizes.

9. Vendor Prefixes:

Vendor prefixes are used to apply experimental or browser-specific CSS features. While they're becoming less common due to browser standardization, they're still sometimes necessary for certain properties or features.

10. Comments:

CSS allows you to add comments using /* */. Comments are useful for documenting your code and explaining its purpose to yourself and other developers.

Mastering these fundamentals will give you a solid foundation in CSS and empower you to create beautiful and responsive web designs. Practice by experimenting with different styles and layouts, and don't hesitate to reference documentation or seek help from online resources when needed.