6 min read CSS 26 views

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation and styling of HTML documents. CSS controls how HTML elements appear on a webpage, including colors, fonts, spacing, borders, layouts, animations, and responsive designs.

CSS helps developers create attractive, user-friendly, and responsive websites. It separates the content of a webpage from its visual design, making websites easier to maintain and customize.

Why Use CSS?

CSS is used to control the appearance of web pages. It provides several important advantages:

Better Design: CSS makes websites visually attractive using colors, fonts, backgrounds, and layouts.
Code Reusability: One CSS stylesheet can be used to style multiple HTML pages.
Easy Maintenance: Developers can change the design of an entire website by updating a single stylesheet.
Responsive Design: CSS allows websites to adapt to different screen sizes, including mobile phones, tablets, and desktops.
Improved Performance: External stylesheets can be cached by browsers, reducing repeated styling code.
Separation of Content and Design: HTML handles webpage structure, while CSS handles presentation.

CSS Syntax

A CSS rule consists of a selector and a declaration block. The declaration block contains one or more CSS declarations.

Each declaration consists of a property and a value separated by a colon. Declarations are separated by semicolons.

Example:

p {
  color: blue;
  font-size: 18px;
}

In this example:

p is the selector that targets all paragraph elements.
color is a CSS property.
blue is the value of the color property.
font-size is another CSS property.
18px is the value of the font-size property.

How to Add CSS to HTML

There are three common ways to add CSS to an HTML document:

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

<p style="color: blue;">Hello World!</p>

2. Internal CSS

Internal CSS is written inside a <style> element in the HTML document's <head> section.

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

3. External CSS

External CSS is written in a separate .css file and connected to the HTML document using the <link> element.

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

CSS Example

The following example demonstrates how CSS changes the appearance of an HTML webpage.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Introduction</title>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: navy;
      text-align: center;
    }

    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>

  <h1>Welcome to CSS</h1>
  <p>CSS makes websites beautiful.</p>

</body>
</html>

Conclusion

CSS is an essential technology for modern web development. It transforms simple HTML documents into attractive and responsive websites. Learning CSS is an important step toward becoming a professional frontend or full-stack web developer.

css Example

Run Code


<!DOCTYPE html>
<html>
<head>
  <title>CSS Introduction</title>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: navy;
      text-align: center;
    }

    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS makes websites beautiful.</p>
</body>
</html>

CSS Introduction