📓 Cascading style sheets (CSS)

What is CSS?
CSS is a styling language used to control the layout and appearance of web pages written in HTML or XML. CSS is used to separate the presentation of a document from its structure, making it easier to maintain and update the layout and design of a website.

Types of CSS
1. Internal CSS: CSS code is written directly in the HTML document.
2. External CSS: CSS code is written in a separate file with a .css extension and linked to the HTML document.
3. Inline CSS: CSS code is written directly in the HTML element.

CSS Selectors
CSS selectors are used to target specific HTML elements and apply styles to them.

1. Element Selectors: Select elements by their tag name (e.g., p, h1, img).
2. Class Selectors: Select elements by their class attribute (e.g., .header, .footer).
3. ID Selectors: Select elements by their ID attribute (e.g., #header, #footer).
4. Attribute Selectors: Select elements by their attribute values (e.g., [hreflang="en"]).
5. Pseudo-Class Selectors: Select elements based on their state (e.g., :hover, :active).

CSS Properties
CSS properties are used to define the styles applied to selected elements.

1. Color Properties: color, background-color, border-color.
2. Font Properties: font-family, font-size, font-style.
3. Layout Properties: width, height, margin, padding.
4. Border Properties: border-style, border-width, border-color.
5. Background Properties: background-image, background-repeat, background-position.

CSS Box Model
The CSS box model is a fundamental concept in CSS that describes the structure of an HTML element as a rectangular box.

1. Content Area: The area where the element's content is displayed.
2. Padding: The space between the content area and the border.
3. Border: The visible outline of the element.
4. Margin: The space between the element and other elements.

CSS Preprocessors
CSS preprocessors are tools that allow you to write CSS code in a more efficient and modular way.

1. Sass: A popular CSS preprocessor that allows you to write CSS code using variables, nesting, and mixins.
2. Less: A CSS preprocessor that allows you to write CSS code using variables, mixins, and functions.

Best Practices
1. Use a consistent naming convention: Use a consistent naming convention for your CSS classes and IDs.
2. Use a preprocessor: Use a CSS preprocessor like Sass or Less to write more efficient and modular CSS code.
3. Use a CSS framework: Use a CSS framework like Bootstrap or Tailwind CSS to speed up your development process.
4. Test and iterate: Test your CSS code in different browsers and devices, and iterate on your design until it looks and works as expected.