Fundamentals of CSS

CSS, or Cascading Style Sheets, is a fundamental technology used in web development to control the presentation and layout of HTML documents. Understanding the basics of CSS is essential for creating visually appealing and responsive web pages.

A. Syntax and Structure:

1. Syntax: CSS rules consist of a selector and a declaration block.The selector targets HTML elements, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property (attribute) and a value, separated by a colon. Example: codeselector { property: value; }
2. Selectors: Selectors target HTML elements to apply styling.Types of selectors include: Element selectors (e.g., p for paragraphs).Class selectors (e.g., .my-class).ID selectors (e.g., #my-id).Descendant selectors (e.g., div p selects all paragraphs inside a div). Attribute selectors (e.g., input[type="text"] selects text input elements).
3. Comments: CSS allows comments using /* */ syntax.cssCopy code/* This is a CSS comment */

B. Selectors:

1. Element Selectors: Selects HTML elements by their tag name. { color: blue; }
2. Class Selectors:Selects elements with a specific class attribute. .highlight { background-color: yellow; }
3. ID Selectors:Selects a single element with a specific ID attribute#header { font-size: 24px; }
4. Descendant Selectors:Selects an element that is a descendant of another specified element.article p { font-style: italic; }
5. Attribute Selectors:Selects elements based on their attributes.input[type="text"] { border: 1px solid black; }

C. Properties and Values:

1. Color: Specifies the color of text or background.color: red; background-color: #e0e0e0;
2. Font: Controls the font properties.font-family: "Arial", sans-serif; font-size: 16px; font-weight: bold;
3. Margin and Padding: Sets the spacing around elements.margin: 10px; padding: 5px;
4. Border: Defines the border of an element.codeborder: 1px solid black;

D. Box Model:

1. Content, Padding, Border, Margin:Every HTML element is considered a box with content, padding, border, and margin.The box model is crucial for understanding and controlling layout..box { content: value; padding: 10px; border: 1px solid black; margin: 20px; }
2. Box Sizing:Determines how the total width and height of an element are calculated.box-sizing: border-box;
3. Width and Height:Sets the width and height of an element.width: 200px; height: 150px;