@codeswithpankaj

CSS Add CSS to HTML and Types of CSS

How to Add CSS to HTML and Types of CSS

Welcome to the CSS Integration tutorial on codeswithpankaj.com. In this tutorial, we will explore how to add CSS to your HTML files and understand the different types of CSS: inline, internal, and external.

Types of CSS

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

  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.

1. Inline CSS

Inline CSS is used to apply styles directly to HTML elements using the style attribute. This method is useful for quick styling but is not recommended for larger projects because it mixes content with presentation.

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>

2. Internal CSS

Internal CSS is used to define styles within the <style> element inside the <head> section of the HTML document. This method is useful when you want to apply styles to a single page.

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>

3. External CSS

External CSS is used to define styles in a separate stylesheet file. This method is the most efficient and is recommended for larger projects as it allows you to apply the same styles across multiple HTML pages. The external stylesheet is 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>

Practical Examples

Example 1: Using Inline CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example - codeswithpankaj.com</title>
</head>
<body>
    <h1 style="color: red;">Inline CSS Heading</h1>
    <p style="font-size: 20px;">This paragraph uses inline CSS.</p>
</body>
</html>

Example 2: Using Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example - codeswithpankaj.com</title>
    <style>
        h1 {
            color: green;
            font-family: Arial, sans-serif;
        }
        p {
            color: gray;
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Internal CSS Heading</h1>
    <p>This paragraph uses internal CSS.</p>
</body>
</html>

Example 3: Using External CSS

styles.css:

body {
    background-color: #f0f0f0;
}
h1 {
    color: navy;
    font-size: 24px;
}
p {
    color: darkgray;
    font-size: 16px;
    margin: 20px 0;
}

index.html:

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

Conclusion

Adding CSS to your HTML documents is essential for creating visually appealing and well-structured web pages. By understanding and using the different types of CSS (inline, internal, and external), you can choose the best method for your specific needs. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

PreviousCSS SyntaxNextCSS Colors

Last updated