What is CSS?

CSS stands for Cascading Style Sheets and is used to control the layout and appearance of web pages. It enables developers to apply styles such as colors, fonts, and spacing to HTML elements.

Why is CSS important?

CSS is crucial in web development as it enhances the user experience by providing a visually appealing and consistent design.

Untitled

How CSS works with HTML

CSS works alongside HTML by selecting HTML elements and applying styles to them. This is done through CSS selectors, which target specific elements or groups of elements within the HTML document. The styles are then defined using CSS properties and values.

Ways to Insert CSS in HTML :

  1. Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. To use inline CSS, add the style attribute directly to the HTML element you want to style. This method is useful for quick changes or when you need to apply a unique style that won't be reused elsewhere.

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <p style="color: red; font-size: 20px;">This is an inline CSS example.</p>
</body>
</html>
  1. Internal CSS

Internal CSS is used to define styles for a single HTML page. You place the CSS rules within a <style> element inside the <head> section of the HTML document. This method is useful when you want to style a single page independently from the rest of your website.

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>This is an Internal CSS example</h1>
    <p>This paragraph is styled using internal CSS.</p>
</body>
</html>
  1. External CSS

External CSS is used to apply styles to multiple HTML pages. You create a separate CSS file (with a .css extension) and link to it from your HTML document using the <link> element. This method is the most efficient and maintainable way to apply styles across a website.

Create a CSS file named styles.css:

/* styles.css */
body {
    background-color: lightgray;
}
h1 {
    color: green;
    text-align: center;
}
p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
}

Then, link to the CSS file from your HTML document: