Practical 9: CSS Integration

Rashmi Mishra
3 minute read
0

Practical 9: CSS Integration

Integrating CSS (Cascading Style Sheets) with HTML allows you to style and format your web pages, enhancing their appearance and layout. Here’s a guide on how to integrate CSS into your HTML documents:

Integration Methods

1. External CSS

Objective: Link an external CSS file to your HTML document.

Steps:

i: Create a CSS File:

Open your text editor and create a new file. Save it with a .css extension, for example, styles.css.

Define your styles in this file. For instance:

/* styles.css */

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

}


h1 {

    color: #333;

    text-align: center;

}


.container {

    width: 80%;

    margin: 0 auto;

    padding: 20px;

    background-color: #fff;

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

Link CSS to HTML:

In your HTML file (index.html or any other file where you want to apply styles):

<!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>

    <div class="container">

        <h1>Welcome to My Website</h1>

        <p>This is a paragraph of text.</p>

    </div>

</body>

</html>

Replace "styles.css" with the path to your CSS file relative to your HTML file.

2. Internal CSS

Objective: Define CSS styles directly within the <style> tag in your HTML document.

Steps:

Step 1: Embed CSS in HTML:

In your HTML file (index.html or any other file):

<!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;

            background-color: #f0f0f0;

        }

        

        h1 {

            color: #333;

            text-align: center;

        }

        

        .container {

            width: 80%;

            margin: 0 auto;

            padding: 20px;

            background-color: #fff;

            box-shadow: 0 0 10px rgba(0,0,0,0.1);

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Welcome to My Website</h1>

        <p>This is a paragraph of text.</p>

    </div>

</body>

</html>

The styles defined within the <style> tag apply only to the current HTML document.

3. Inline CSS

Objective: Apply CSS styles directly to individual HTML elements using the style attribute.

Steps:

Step 1: Apply Inline Styles:

In your HTML file (index.html or any other file):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body style="font-family: Arial, sans-serif; background-color: #f0f0f0;">

    <div style="width: 80%; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);">

        <h1 style="color: #333; text-align: center;">Welcome to My Website</h1>

        <p>This is a paragraph of text.</p>

    </div>

</body>

</html>

Inline styles are applied directly to individual HTML elements using the style attribute.

Choosing the Right Method

External CSS: Recommended for larger projects to maintain separation of concerns (HTML for structure, CSS for styling). It promotes easier management and scalability.

Internal CSS: Useful for smaller projects or specific pages where styles are unique to that page.

Inline CSS: Should be used sparingly due to its limited scalability and maintenance issues, but useful for quick style adjustments on specific elements.


Conclusion

Integrating CSS into your HTML documents allows you to control the visual presentation of your web pages effectively. Choose the integration method based on the project's size, structure, and styling requirements to maintain clarity, organization, and ease of maintenance in your web development workflow.



Tags

Post a Comment

0Comments

Post a Comment (0)