CSS INTRODUCTION

What is CSS ?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the visual appearance of web pages, including layout, colors, fonts, and spacing.

Why Use CSS ?

Separation of Concerns:

• Content and Presentation Separation: HTML is used for structuring content, while CSS is used for styling. This separation makes it easier to maintain and update web pages.

Consistency:

• Uniform Appearance: CSS enables consistent styling across multiple web pages. By linking a single CSS file, you can ensure that the entire website follows the same design rules.

Flexibility and Control:

• Customization: CSS offers fine-grained control over how elements are displayed, allowing for a wide range of design possibilities.

Improved Accessibility:

• Accessibility: Proper use of CSS can improve the accessibility of web pages, making them more usable for people with disabilities.

Performance:

• Faster Load Times: CSS can help reduce the amount of HTML code, leading to faster page load times and better performance.

Reusability:

• Reusable Styles: CSS classes and IDs can be reused across different HTML elements, which reduces redundancy and makes the codebase more efficient.

CSS Syntax ?

CSS is composed of rulesets that define how HTML elements should be styled. Each ruleset consists of a selector and a declaration block.

• Selectors: These indicate the HTML element(s) to which the styles will be applied.
• Declarations: These specify the properties and values that define the style. Each declaration is separated by a semicolon and enclosed within curly braces.

Basic Structure

selector {

property: value;

property: value;

}

Example

/* This is a comment */

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

h1 {

color: #333333;

text-align: center;

}

p {

line-height: 1.5;

margin: 10px 0;

}

• Selector: body, h1, p - These apply styles to the body, h1, and p HTML elements.
• Declaration Block: { property: value; } - Contains one or more declarations.

Key Components ?

• Property: The aspect of the element you want to change (e.g., color, font-size, margin).
• Value: The setting for the property (e.g., #333333, 16px, 10px 0).