CSS Basics

CSS (Cascading Style Sheets) is used to style and design HTML elements on a web page.

It controls layout, colors, fonts, spacing, and overall visual appearance of websites.

What is CSS?

CSS is a stylesheet language used to describe how HTML elements should be displayed.

It separates content (HTML) from design (CSS), making websites easier to maintain.

Why CSS is Important

CSS improves user experience by making websites visually appealing and responsive.

Without CSS, websites would look plain and unstructured.

Ways to Add CSS

There are three ways to include CSS in a web page: inline, internal, and external.

Inline CSS: inside HTML tag
Internal CSS: inside <style> tag
External CSS: separate .css file

Inline CSS Example

<p style="color: red;">This is red text</p>

Internal CSS Example

<style>
  p {
    color: blue;
  }
</style>

External CSS Example

<link rel="stylesheet" href="styles.css">

CSS Syntax

CSS uses a simple syntax consisting of selectors and declarations.

selector {
  property: value;
}

Selectors in CSS

Selectors are used to target HTML elements for styling.

p { color: green; }
h1 { font-size: 24px; }

Colors in CSS

CSS supports different ways to define colors like names, HEX, RGB, and HSL.

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

Fonts in CSS

CSS allows you to control font family, size, weight, and style.

font-family: Arial;
font-size: 16px;
font-weight: bold;

Box Model

The CSS box model describes how elements are structured: content, padding, border, and margin.

Content -> Padding -> Border -> Margin

Margin and Padding

Margin controls space outside an element, while padding controls space inside an element.

margin: 10px;
padding: 15px;

Borders in CSS

Borders define the outline around elements.

border: 1px solid black;

Display Property

The display property defines how elements are displayed on the page.

display: block;
display: inline;
display: flex;

Positioning in CSS

CSS positioning controls how elements are placed on the page.

position: static;
position: relative;
position: absolute;
position: fixed;

Flexbox Basics

Flexbox is a layout system used to align items in rows or columns.

display: flex;
justify-content: center;
align-items: center;

Responsive Design

Responsive design ensures websites look good on all screen sizes.

Media queries are used to apply styles based on device width.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

Common Beginner Mistakes

Beginners often misuse selectors or forget specificity rules.

Another mistake is not understanding the box model properly.

Best Practices

Use external CSS files for better organization and maintainability.

Keep styles reusable and avoid unnecessary repetition.

Real-World Importance

CSS is essential for creating visually appealing and user-friendly websites.

It is used in every modern web application across the internet.

Summary

CSS controls the visual design of web pages including layout, colors, and responsiveness.

Mastering CSS is essential for becoming a professional web developer.