Introduction to CSS Basics

What is CSS?

• CSS (Cascading Style Sheets) is a W3C standard for styling HTML elements, encompassing features like font properties, colors, sizes, borders, and animations.
• CSS can be applied inline within HTML, embedded in the HTML document, or stored in external CSS files.
• Key benefits of CSS include improved formatting control, site maintainability, accessibility, and reduced page-load time.

CSS Versions

• The first CSS standard, CSS Level 1, was published in 1996; CSS Level 2 followed in 1997.
• CSS2.1 was officially recommended in June 2011, while CSS3 was drafted concurrently.

Browser Adoption

• Various web browsers have had inconsistent support for CSS standards, leading to its reputation as frustrating for developers.

CSS Syntax

• A CSS document comprises style rules with selectors identifying affected HTML elements, followed by declaration blocks consisting of property:value pairs.
• Basic selector types include Element Selectors (e.g., p), Class Selectors (prefixed with a period), and ID Selectors (prefixed with a hash).

The Document Object Model (DOM)

• The DOM represents an HTML document in a tree-like structure, important for understanding element relationships and hierarchy.

Selectors

• Element selectors affect all instances of a specific HTML element.
• Class selectors allow targeting multiple elements with the same class attribute.
• ID selectors target a unique element via its ID attribute.
• Specificity hierarchy dictates that ID selectors take precedence over class selectors, which take precedence over element selectors.

The CSS Cascade

• When rules have identical specificity, the latest declared rule takes effect, with inline styles overriding external styles.

The Box Model

• All HTML elements are contained within boxes defined by the CSS box model, which includes margins, borders, padding, and content area.
• Block-level elements are displayed on separate lines, while inline elements flow within the document's text.

Margins and Padding

• Margins provide external spacing between elements, while padding provides internal spacing.
• Collapsing margins occur when adjacent vertical margins combine, showing only the largest value.

Box Dimensions

• Block-level elements can have width, height, min/max dimensions, reflecting their content area plus padding, borders, and margins.
• The border-box property simplifies calculations by including padding and borders in the element's total dimensions.

Overflow Property

• The overflow property manages content display when an element's box is not large enough to contain its content.

CSS Text Styling

• CSS offers font properties (e.g., font-family, font-size) and paragraph properties affecting text appearance independently of font type.
• A web font stack provides fallback font options for better compatibility across users' systems.

Font Sizes

• Use relative units (like ems or rems) for responsive typography, with rems set relative to the root element.
• Some developers advocate for pixels as a unit due to browser scaling capabilities.

@font-face

• The @font-face rule allows the use of custom fonts not installed on users' systems, promoting web font usage through services like Google Fonts.

Font Weight

• Google Fonts popularized diverse font weights; each weight is specified numerically from 100 to 900, with larger numbers indicating bolder styles.

Paragraph Properties

• Various CSS properties can be used to alter paragraph text independently of font characteristics.

This quiz covers the fundamentals of CSS, including its history, syntax, and how it is applied to HTML. Learn about different CSS versions, browser support issues, and the benefits of using CSS for web design.