Using CSS in HTML

CSS stands for Cascading Style Sheets. CSS is used to customize the appearance and structure of elements and layouts on a web page by adjusting fonts, colors, sizes, spacing, and adding attractive features such as animations ensuring consistency and facilitating responsive design.

CSS in HTML can be used in three ways:

  1. External Stylesheet
  2. Internal Styles
  3. Inline Styles

External Stylesheet

The preferred and most efficient way to use CSS in HTML is by creating an external stylesheet and linking it to your HTML document. This allows for separation of content and presentation, making the code more modular and maintainable.

Steps to link external CSS file:

  1. Create a separate CSS file (styles.css).

    2. /* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    color: #0066cc;
}

p {
   font-size: 16px;
   color: green;
}
  2. Link the CSS file to the HTML document using the <link> tag in the <head> section.

    3. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using CSS in HTML</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to Our Website</h1>
    <p>This is a paragraph with styles applied from the external stylesheet.</p>
</body>
</html>

Internal Stylesheet

You can also include CSS styles directly within the HTML document using the <style> tag within the document's <head> section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using CSS in HTML</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        h1 {
            color: #0066cc;
        }
        
        p {
           font-size: 16px;
           color: green;
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website</h1>
    <p>This is a paragraph with styles applied from the internal styles.</p>
</body>
</html>

Inline Styles

For styling individual elements, you can use inline styles directly within the HTML tags using the style attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using CSS in HTML</title>
</head>
<body>
    <h1 style="color: #0066cc;">Welcome to Our Website</h1>
    <p style="font-family: 'Arial', sans-serif; color: green;">This is a paragraph with inline styles.</p>
</body>
</html>

Best Practices

  1. Use external stylesheets for larger projects to keep your HTML and CSS separate.
  2. Use the same coding style and naming convention across your CSS files.
  3. Implement media queries to make your designs responsive to different screen sizes.
  4. Check your styles across different browsers to ensure compatibility.