CSS Definition and Implementation

CSS (Cascading Style Sheets) is a styling language used to describe the presentation of HTML documents. It is written within <style> tags placed under the <title> tag in the document head. CSS is a core web technology standardized by W3C for cross-browser compatibility.

Implementation Methods

• Internal Styles: CSS code written inside <style> tags within the HTML document.
• External Styles: CSS stored in separate .css files, linked using <link rel="stylesheet" href="style.css">.
• Inline Styles: Applied directly to HTML elements using the style attribute, e.g., <div style="color: blue;">Content</div>.

Selectors

Selectors target HTML elements to apply styles. Basic selectors include:

• Element Selector: Targets all instances of a tag, e.g., p { color: red; }.
• Class Selector: Selects elements with a specific class, e.g., .highlight { background: yellow; }.
• ID Selector: Targets a unique element by ID, e.g., #header { font-size: 24px; }.
• Universal Selector: Applies to all elements, e.g., * { margin: 0; }.

Font and Text Properties

Common text styling properties include:

p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  color: #333;
}

Advanced Selectors

• Descendant Selector: Targets nested elements, e.g., div p { color: green; }.
• Child Selector: Selects direct children, e.g., ul > li { list-style: square; }.
• Grouping Selector: Applies styles to multiple selectors, e.g., h1, h2 { margin: 10px; }.
• Pseudo-classes: Styles elemnets in specific states, e.g., a:hover { text-decoraiton: underline; }.

Box Model

The CSS box model consists of content, padding, border, and margin. Example:

.container {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px auto;
  box-sizing: border-box;
}

Layout and Positioning

CSS provides several layout techniques:

• Normal Flow: Default block and inline element positioning.
• Floats: Elements taken out of normal flow, e.g., float: left;.
• Positioning: Relative, absolute, fixed, and sticky positioning for precise control.

Additional Styling Features

• Backgrounds: Set colors, images, and positioning.
• Shadows and Effects: Apply box-shadow and opacity.
• Transitions: Animate property changes, e.g., transition: all 0.3s ease;.