CSS Introduction

CSS Introduction(Cascading Style Sheets):

CSS (Cascading Style Sheets) is a styling language used to control the appearance of HTML elements. It allows developers to separate content from design, making web pages more visually appealing and easier to maintain.

Why Use CSS?

Improved Design – Enhances the look of web pages with colors, fonts, spacing, and animations.
Separation of Content & Style – HTML handles structure, while CSS controls presentation.
Reusability – A single CSS file can be applied to multiple pages.
Better Layout Control – CSS provides powerful layout techniques like Flexbox and Grid.
Responsive Design – Ensures websites work well on different screen sizes.

Ways to Apply CSS

1. Inline CSS (Applied directly within an HTML tag)

<p style="color: blue;">This is a blue paragraph.</p>

Use Case: Quick styling, but not recommended for large projects.

2. Internal CSS (Defined inside `<style>` within the `<head>`)

<style>
    h1 { color: red; text-align: center; }
</style>

Use Case: Best for single-page styling.

3. External CSS (Stored in a separate file and linked to HTML)

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

Use Case: Recommended for large projects for cleaner code management.

CSS Selectors

Selectors define which elements are styled.

1. Element Selector

h1 { color: red; }

Targets all elements of a type.

2. Class Selector

.text { font-size: 16px; }

Targets elements with a specific class.

3. ID Selector

#header { background: blue; }

Targets an element with a unique ID.

4. Universal Selector

* { margin: 0; padding: 0; }

Targets all elements.

5. Group Selector

h1, p { color: green; }

Applies styles to multiple elements at once.

CSS Properties

Color Property – Defines the color of text using color names, hex codes, RGB, or HSL values.
Font-Family Property – Specifies the type of font to be used for text.
Font-Size Property – Determines the size of the text, measured in pixels (px), ems (em), or percentages (%).
Font-Weight Property – Controls the thickness of the text, such as normal, bold, or lighter.
Text-Align Property – Aligns text to the left, right, center, or justify.
Background-Color Property – Sets the background color of an element.
Background-Image Property – Adds an image as the background of an element.
Border Property – Defines the thickness, style, and color of an element’s border.
Margin Property – Specifies the space outside an element.
Padding Property – Specifies the space inside an element, between its content and its border.
Width Property – Sets the width of an element in pixels, percentages, or other units.
Height Property – Sets the height of an element in pixels, percentages, or other units.
Display Property – Controls how an element is displayed, such as block, inline, flex, or grid.
Position Property – Defines the positioning of an element, such as static, relative, absolute, or fixed.
Z-Index Property – Specifies the stack order of elements, determining which elements appear in front of or behind others.
Opacity Property – Controls the transparency level of an element, from 0 (completely transparent) to 1 (fully visible).
Visibility Property – Determines whether an element is visible or hidden.
Overflow Property – Controls how content that exceeds an element’s size is handled (visible, hidden, scroll, auto).
Box-Shadow Property – Adds shadow effects to an element.
Text-Shadow Property – Adds shadow effects to text.

CSS Animations & Transitions

Animation Property – Defines the animation sequence for an element.
Transition Property – Controls smooth changes between property values over time.
Transform Property – Modifies the shape, size, and position of an element.
Keyframes Property – Specifies animation stages with defined styles at different points.
Hover Effects – Changes an element’s appearance when hovered over with the cursor.

Conclusion

CSS is essential for designing web pages, allowing developers to control styles, layouts, and responsiveness. Understanding and applying CSS properties effectively ensures that websites are visually appealing, user-friendly, and optimized for various devices.

CSS