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.
- 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; }
- 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).
- Comments: CSS allows comments using /* */ syntax.cssCopy code/* This is a CSS comment */
- Element Selectors: Selects HTML elements by their tag name. { color: blue; }
- Class Selectors:Selects elements with a specific class attribute. .highlight { background-color: yellow; }
- ID Selectors:Selects a single element with a specific ID attribute#header { font-size: 24px; }
- Descendant Selectors:Selects an element that is a descendant of another specified element.article p { font-style: italic; }
- Attribute Selectors:Selects elements based on their attributes.input[type="text"] { border: 1px solid black; }
C. Properties and Values:
- Color: Specifies the color of text or background.color: red; background-color: #e0e0e0;
- Font: Controls the font properties.font-family: "Arial", sans-serif; font-size: 16px; font-weight: bold;
- Margin and Padding: Sets the spacing around elements.margin: 10px; padding: 5px;
- Border: Defines the border of an element.codeborder: 1px solid black;
- 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; }
- Box Sizing:Determines how the total width and height of an element are calculated.box-sizing: border-box;
- Width and Height:Sets the width and height of an element.width: 200px; height: 150px;