@codeswithpankaj

CSS Introduction

Welcome to the CSS Introduction tutorial on codeswithpankaj.com. In this tutorial, we will explore the basics of CSS, its importance in web development, and how to apply it to your HTML documents.

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 layout, colors, fonts, and overall visual appearance of web pages.

Importance of CSS

  1. Separation of Content and Design: CSS allows you to separate the content (HTML) from the design (CSS), making it easier to maintain and update web pages.

  2. Consistency: CSS provides a way to apply consistent styling across multiple pages of a website.

  3. Improved Accessibility: Proper use of CSS can enhance the accessibility of web pages for users with disabilities.

  4. Responsive Design: CSS enables the creation of responsive web designs that adapt to different screen sizes and devices.

How to Use CSS

There are three ways to apply CSS to HTML documents:

  1. Inline CSS: Styles are applied directly to HTML elements using the style attribute.

  2. Internal CSS: Styles are defined within the <style> element inside the <head> section of an HTML document.

  3. External CSS: Styles are defined in an external stylesheet file and linked to the HTML document using the <link> element.

Inline CSS

Inline CSS is applied directly to HTML elements using the style attribute.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS - codeswithpankaj.com</title>
</head>
<body>
    <h1 style="color: blue;">This is a heading</h1>
    <p style="font-size: 18px;">This is a paragraph.</p>
</body>
</html>

Internal CSS

Internal CSS is defined within the <style> element inside the <head> section of the HTML document.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS - codeswithpankaj.com</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

External CSS

External CSS is defined in a separate stylesheet file and linked to the HTML document using the <link> element.

Example:

styles.css:

body {
    background-color: lightgray;
}
h1 {
    color: blue;
}
p {
    font-size: 18px;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS - codeswithpankaj.com</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Basic CSS Syntax

CSS rules consist of selectors and declarations. The selector targets the HTML element(s) to be styled, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property and a value, separated by a colon.

Example:

selector {
    property: value;
    property: value;
}

Example:

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

Conclusion

CSS is a powerful tool for enhancing the visual presentation of your web pages. By understanding and using CSS, you can create visually appealing and responsive websites. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

NextCSS Syntax

Last updated