1. What is CSS?

In our previous lecture, we discussed CSS, which stands for Cascading Style Sheets. It's the language used to define how HTML elements are displayed on a webpage, controlling the layout, colors, fonts, spacing, and other visual aspects. Without CSS, websites would appear plain and unstyled, lacking visual appeal. We compared HTML to the structure of a building, with CSS acting as the design that makes the building visually attractive.

2. How Does CSS Work?

CSS works by applying styles to HTML elements. The "cascading" part of CSS means that styles can cascade down from parent elements to child elements, and that there are rules governing how styles are applied when multiple styles conflict.

3. Structure of a CSS Rule

A CSS rule is made up of two parts:

1. Selector: Specifies which HTML element(s) the rule applies to.

2. Declaration Block: Contains one or more declarations which define the style properties and their values.

Here's the basic structure of a CSS rule:

				
					selector {
  property: value;
  property: value;
}

Selector: Targets the element(s) to be styled.

Property: Defines the characteristic (e.g., color, font-size).

Value: Sets the property (e.g., red, 16px).

Example:

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

This CSS rule changes the color of all <h1> elements to blue and sets the font size to 24 pixels.

4. Ways to Use CSS

There are three main ways to apply CSS to your HTML document:

You can add CSS directly to an HTML element using the style attribute.

a. Inline CSS

Applied directly within an HTML element.

Example:

				
					<h1 style="color: red;">Hello World</h1>

This approach is useful for small changes but is not scalable for larger projects.

b. Internal CSS

Added in the <head> section of your HTML document inside a <style> tag.

Example:

				
					<style>h1 {
    color: green;
  }</style>

c. External CSS

The most preferred method for larger projects.

The CSS is written in a separate .css file and linked to the HTML document using a <link> tag in the <head> .

Example:

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

Inside styles.css, you can write:

				
					h1 {
  color: orange;
}

External CSS provides better separation of concerns by keeping the structure (HTML) separate from the design (CSS), making your code cleaner and easier to maintain.

5. The Importance of CSS

CSS is fundamental for:

1. Responsive Design: CSS allows websites to be flexible and adapt to different screen sizes, providing a seamless experience across devices.

2. User Experience (UX): A well-styled website enhances the user's experience, making it more engaging and easier to navigate.

3.Branding: CSS gives you control over fonts, colors, and layouts, which helps in creating a consistent brand identity across your website.

5. CSS Example

Now, let’s see a practical example of how CSS works in the context of a bank's website. Imagine a simple HTML structure that could be part of a banking homepage.

Consider this HTML snippet:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="bank-styles.css">
  <title>Banking Solutions</title>
</head>
<body>
  <h1>Welcome to Digital Bank</h1>
  <p>Your trusted partner in secure banking.</p>
</body>
</html>

Now, let’s apply some CSS in an external file, bank-styles.css:

				
					h1 {
  color: navy;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  font-weight: bold;
}

p {
  color: darkgray;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}