How To Add CSS

Adding CSS (Cascading Style Sheets) to a web page involves a few different methods. Here’s a brief overview of each:

1. Inline CSS

You can add CSS directly to an HTML element using the style attribute. This method is used for applying styles to a single element.

<p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>

2. Internal CSS

You can include CSS within a <style> tag inside the <head> section of your HTML document. This method is useful for styling a single page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>This is a green paragraph.</p>
</body>
</html>

3. External CSS

You can link to an external CSS file using the <link> tag inside the <head> section of your HTML document. This method is ideal for applying styles across multiple pages.

Create a CSS file, e.g., styles.css:

body {
    font-family: Arial, sans-serif;
}
p {
    color: red;
}

Link the CSS file in your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This is a red paragraph.</p>
</body>
</html>

4. CSS Frameworks

You can also use CSS frameworks like Bootstrap or Tailwind CSS to quickly apply styles and layout patterns. These frameworks come with predefined classes that you can use in your HTML.

For example, with Bootstrap, you’d include the framework’s CSS in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <p class="text-primary">This is a paragraph with Bootstrap styling.</p>
    </div>
</body>
</html>

Each method has its use cases depending on your needs. For a clean and maintainable approach, external CSS is generally recommended, especially for larger projects.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us