# Introduction to Cascading Style Sheets (CSS) ## Week 4(Blockfuse Labs Cohort IV) ## Introduction to Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) is a stylesheet language used to control the appearance and layout of web pages. While HTML is responsible for the structure of a webpage, CSS is used to make that structure look good. In simple terms: HTML = structure CSS = design What CSS Is Used For CSS allows you to: Change text colors and fonts Set background colors and images Control spacing and alignment Create layouts (columns, grids, flexible designs) Make websites responsive across different screen sizes Without CSS, websites would look plain and unorganized. ## How CSS Works CSS works by selecting HTML elements and applying styles to them. A basic CSS rule looks like this: ``` p { color: blue; font-size: 16px; } ``` p → selector (targets all paragraph elements) color and font-size → properties blue and 16px → values Ways to Add CSS to HTML There are three main ways to apply CSS: ### 1. Inline CSS Applied directly inside an HTML tag. ``` <p style="color: red;">Hello World</p> ``` ### 2. Internal CSS Written inside a <style> tag in the HTML <head>. <style> p { color: green; } </style> ### 3. External CSS (Most recommended) Written in a separate .css file and linked to HTML. <link rel="stylesheet" href="style.css"> This method keeps code clean and reusable. ### Why CSS Is Important Improves user experience Makes websites visually appealing Helps separate content from design Essential for modern web development ### Conclusion CSS is a core web technology that works alongside HTML and JavaScript. Learning CSS is a crucial step in becoming a front-end or full-stack developer.