3.1- web



What is CSS?

  • CSS (Cascading Style Sheets) defines web page appearance and layout, separating presentation from structure with rules comprised of selectors, properties, and values.

How Browsers Load a Page

  1. Load and parse HTML

  2. Create DOM Tree

  3. Attach and load CSS

CSS Example

  • E.g., p { color: blue; font-weight: bold; } turns paragraphs blue and bold.

Adding CSS to a Page

  • Inline Styles: Within HTML tags.

  • Embedded Styles: In the head section via style tags.

  • External Styles: From an external CSS file.

Advantages of External CSS

  • Better content management, code reuse across pages, and easier updates.

CSS Validation

  • Ensures adherence to CSS standards, helps catch errors, and improves performance.

CSS Selectors and Properties

  • Types: Universal, element, class, ID selectors; combinators like descendant, child, adjacent, and sibling selectors.

  • Common properties: Font, text, color, background, and borders.

Development Tips

  • Use class selectors for reusability; ID selectors for unique elements. Prioritize consistency and meaningful naming.

CSS Inheritance

  • Property values propagate from parent to child elements. Not all properties inherit; text-related properties usually do.

Conflicting Styles

  • Conflicts arise from multiple rules targeting the same element. Style priority is inline > embedded > external > default, influenced by specificity.