The Project | About Us | Contribute | Donations | License

HOME

Introduction

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It allows web developers to control the layout, design, and appearance of web pages, making them more visually appealing and user-friendly.

Key Concepts

Separation of Content and Presentation

HTML: Used to structure content on the web.
CSS: Used to style and layout the content.

Cascading Nature

Cascading: Refers to the way CSS rules are applied in a hierarchical manner. The final appearance of an element is determined by multiple CSS rules that cascade down from various sources.

Reusability

CSS allows for the reuse of styles across multiple web pages, making it easier to maintain and update the design of a website.

Flexibility and Control

CSS provides precise control over the layout and design of web pages, including fonts, colors, spacing, and positioning.

Basic Structure of CSS

CSS Syntax

CSS is composed of rulesets, which consist of selectors and declarations.

Selector: Targets the HTML element(s) you want to style.
Declaration: Specifies the style properties and their values.

Example

/* This is a CSS comment */
selector {
  property: value;
}

Practical Example

/* Styling all paragraphs */
p {
  color: blue; /* Text color */
  font-size: 16px; /* Font size */
}

Explanation

Selector (p): Targets all <p> (paragraph) elements.
Declarations:
- color: blue; sets the text color to blue.
- font-size: 16px; sets the font size to 16 pixels.

How CSS Works with HTML

Inline CSS

CSS can be added directly within an HTML element using the style attribute.

<p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>

Internal CSS

CSS can be included within the <head> section of an HTML document using the <style> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

External CSS

CSS can be written in a separate file and linked to an HTML document using the <link> tag.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

/* styles.css */
p {
  color: blue;
  font-size: 16px;
}

Practical Exercise

Task

Create an HTML file and apply CSS styles using all three methods: inline, internal, and external.

Solution

Inline CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline CSS Example</title>
</head>
<body>
  <p style="color: blue; font-size: 16px;">This is an inline styled paragraph.</p>
</body>
</html>

Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is an internally styled paragraph.</p>
</body>
</html>

External CSS

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is an externally styled paragraph.</p>
</body>
</html>

/* styles.css */
p {
  color: blue;
  font-size: 16px;
}

Summary

In this lesson, we covered the basics of CSS, including its purpose, key concepts, and how it integrates with HTML. We explored the syntax of CSS and demonstrated how to apply styles using inline, internal, and external methods. Understanding these fundamentals is crucial as we progress to more advanced CSS topics in the upcoming modules.

What is CSS?

Introduction

Key Concepts

Separation of Content and Presentation

Cascading Nature

Reusability

Flexibility and Control

Basic Structure of CSS

CSS Syntax

Example

Practical Example

Explanation

How CSS Works with HTML

Inline CSS

Internal CSS

External CSS

Practical Exercise

Task

Solution

Summary

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website