HTML Styles ā€“ CSS

Subject: html

HTML Styles ā€“ CSS

CSS (Cascading Style Sheets) is used to style and layout HTML documents. It enables developers to apply colors, fonts, spacing, alignment, and responsive designs efficiently.

šŸŽØ CSS = Styling, Fonts, Colors, Layout

With CSS, you can:

  • Set colors for text and backgrounds
  • Control font type, size, and style
  • Adjust spacing between elements
  • Create borders, margins, and padding
  • Align elements and format layout across devices

šŸ“– What is CSS?

CSS separates content (HTML) from presentation (CSS), making web pages more maintainable and scalable.

Note: "Cascading" means styles applied to parent elements are inherited by child elements unless overridden.

Example:

šŸš€ Try it in Compiler

šŸ“Œ Ways to Apply CSS

1. Inline CSS

Applied directly inside HTML elements via the style attribute.

šŸš€ Try it in Compiler

āœ… Quick but hard to maintain for large projects.

2. Internal CSS

Defined inside a <style> tag in the HTML <head>.

šŸš€ Try it in Compiler

3. External CSS

Linked from an external .css file, best for maintaining larger websites.

šŸš€ Try it in Compiler
šŸš€ Try it in Compiler

āœ… Highly recommended for scalability and reuse.

šŸ”§ Common CSS Properties & Examples

1. color

Sets the text color.

šŸš€ Try it in Compiler

2. font-family

Sets the font style.

šŸš€ Try it in Compiler

3. font-size

Sets the size of the text.

šŸš€ Try it in Compiler

4. background-color

Sets background color.

šŸš€ Try it in Compiler

5. border

Applies border to elements.

šŸš€ Try it in Compiler

6. padding

Controls spacing inside elements.

šŸš€ Try it in Compiler

7. margin

Controls spacing outside elements.

šŸš€ Try it in Compiler

8. text-align

Aligns text within the element.

šŸš€ Try it in Compiler

9. width & height

Defines size of an element.

šŸš€ Try it in Compiler

10. display

Defines element display behavior.

šŸš€ Try it in Compiler

āš–ļø CSS Specificity and Priority

CSS rules follow a hierarchy:

  • Inline Styles > Internal Styles > External Styles

Specificity Score:

  • ID selectors > Class selectors > Element selectors
  • When multiple rules apply, the last declared rule with the highest specificity wins.

āœ… Key Takeaways

  • Use CSS to control layout and appearance across pages.
  • Inline CSS: single elements
  • Internal CSS: one-page styles
  • External CSS: full website styling
  • Master properties like color, font-family, margin, padding, border, and display.
  • Understand specificity to resolve styling conflicts and ensure maintainable code.
Next: HTML Style Attribute