Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

How to add CSS in HTML

You can add CSS (Cascading Style Sheets) to HTML in three different ways: Inline CSS, Internal CSS, and External CSS. Each method serves a purpose depending on your project's size and requirements.

1. Inline CSS

Inline CSS allows you to apply styles directly to individual elements using the style attribute.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hello, Inline CSS!</h1>
    <p style="font-size: 16px; color: green;">This is some text styled with inline CSS.</p>
</body>
</html>

2. Internal CSS

Internal CSS is defined within a <style> tag in the <head> section of the HTML document. This method is useful for single-page websites or when styles are unique to that page.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hello, Internal CSS!</h1>
    <p>This is some text styled with internal CSS.</p>
</body>
</html>

3. External CSS

External CSS is written in a separate .css file. This method is preferred for larger websites as it allows you to manage styles centrally and keep the HTML clean. Link the CSS file in the HTML document using the <link> tag.

CSS file (styles.css):

css

body {
    background-color: lightblue;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 16px;
    color: green;
}

HTML file:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, External CSS!</h1>
    <p>This is some text styled with external CSS.</p>
</body>
</html>

Pros and Cons

Inline CSS: Quick and easy for small changes but not scalable or maintainable.
Internal CSS: Good for single-page applications but can lead to duplication if styles are shared across multiple pages.
External CSS: Best for large projects, as it promotes separation of content and design and makes maintenance easier.

Choose the method that best fits your project's needs. Do you have a specific project or requirement in mind? I'd be happy to help further with more details!