CSS Basics: Styling, Layouts, and Responsive Design

Introduction

CSS (Cascading Style Sheets) is the language used to style and design web pages. While HTML builds the structure of a website, CSS makes it visually appealing by controlling colors, fonts, layouts, and more. Without CSS, all websites would look plain and unstyled just text and images on a white background.

Why is CSS important?

Improves Appearance: Adds colors, layouts, and animations.
Separates Design from Structure: Keeps HTML clean by focusing only on content while CSS handles styling.
Makes Websites Responsive: Ensures websites look good on all devices (mobile, tablet, desktop).
Saves Time: One CSS file can style multiple web pages at once.

How CSS Works?

CSS works by selecting HTML elements and applying styles to them. It uses selectors to target elements and properties to define styles.

Example

h1 {
  color: blue;
  font-size: 24px;
}

This code makes all <h1> headings blue with a font size of 24px.

Types of CSS

Inline CSS: Style is written directly in HTML tags.
```
<p style="color: red;">This is red text</p>
```
Internal CSS: Style is written inside <style> tags in the HTML file.
External CSS: Style is kept in a separate .css file and linked to HTML. (Most recommended)

Core Concepts in CSS

Selectors: Target HTML elements (e.g., p, .class, #id).
Properties & Values: Define what style to apply (e.g., color: blue).
Box Model: Every element has margin, border, padding, and content.
Positioning: Controls where elements appear (static, relative, absolute, fixed, sticky).
Flexbox & Grid: Modern layout systems for responsive design.

Advanced CSS Features

Animations & Transitions: Add smooth effects to elements.
Media Queries: Make layouts responsive for different screen sizes.
Variables: Store reusable values.

Custom Fonts

Import unique fonts using @font-face or Google Fonts.