CSS Getting Started

When you’re building a website, making it visually appealing is just as important as the content it holds. Cascading Style Sheets, commonly known as CSS, is the language that allows you to add style and design to your web pages. In this article, we will explore the basics of CSS, why it’s crucial for web development, and how you can use it to enhance the look and feel of your website.

Table of Contents

Why CSS Matters

CSS is like the interior designer of the web. While HTML structures the content, CSS adds style and presentation. Imagine a webpage without CSS – plain, unstyled, and lacking visual appeal. CSS allows you to control the layout, colors, fonts, and overall aesthetics of your website. It brings life to the structure provided by HTML.

Getting Started with CSS

To use CSS, you can either include it directly in your HTML file or create a separate CSS file and link it to your HTML. Let’s look at both methods.

Inline CSS

Inline CSS is added directly to individual HTML elements using the “style” attribute. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>CSS | Getting Started</title>

    </head>
    <body>

        <h1 style="color: blue; text-align: center;">CSS | Getting Started</h1>

        <p style="font-size: 16px; line-height: 1.5;">
            Aenean mattis ex mauris. Nullam tincidunt mi sem, vel commodo arcu imperdiet in.
            Nullam quis elit tellus. In hac habitasse platea dictumst.
            Nunc tristique massa nisl, in varius diam placerat eu.
            Aenean ante odio, elementum id massa sed, vehicula blandit augue.
            Quisque sem tellus, tincidunt quis imperdiet sed, faucibus euismod justo.
            Integer iaculis magna sed massa condimentum auctor.
        </p>

    </body>
</html>

In this example, the “style” attribute is used to define the color, text alignment, font size, and line height for the heading and paragraph.

Internal CSS

You can also include CSS within the <style> tags in the head section of your HTML document. This is known as internal CSS. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>CSS | Getting Started</title>

        <style>

            h1 {
                color: blue;
                text-align: center;
            }

            p {
                font-size: 16px;
                line-height: 1.5;
            }
            
        </style>

    </head>
    <body>

        <h1>CSS | Getting Started</h1>

        <p>
            Aenean mattis ex mauris. Nullam tincidunt mi sem, vel commodo arcu imperdiet in.
            Nullam quis elit tellus. In hac habitasse platea dictumst.
            Nunc tristique massa nisl, in varius diam placerat eu.
            Aenean ante odio, elementum id massa sed, vehicula blandit augue.
            Quisque sem tellus, tincidunt quis imperdiet sed, faucibus euismod justo.
            Integer iaculis magna sed massa condimentum auctor.
        </p>

    </body>
</html>

External CSS

For larger projects, it’s a good practice to create a separate CSS file and link it to your HTML document. This is known as external CSS. Here’s how you can do it:

Create a file named “styles.css” and add the following CSS rules:

/* styles.css */
h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

Then, link the external 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">

        <!-- Document Title -->
        <title>CSS | Getting Started</title>

        <link rel="stylesheet" href="styles.css" />

    </head>
    <body>

        <h1>CSS | Getting Started</h1>

        <p>
            Aenean mattis ex mauris. Nullam tincidunt mi sem, vel commodo arcu imperdiet in.
            Nullam quis elit tellus. In hac habitasse platea dictumst.
            Nunc tristique massa nisl, in varius diam placerat eu.
            Aenean ante odio, elementum id massa sed, vehicula blandit augue.
            Quisque sem tellus, tincidunt quis imperdiet sed, faucibus euismod justo.
            Integer iaculis magna sed massa condimentum auctor.
        </p>

    </body>
</html>

By creating an external CSS file, you can keep your styles organized and easily make changes across multiple pages.

Conclusion

In this article, we’ve covered the basics of getting started with CSS. Whether you choose inline, internal, or external CSS, understanding how to apply styles to your HTML elements is essential for creating visually appealing and user-friendly websites. For more content, please subscribe to our newsletter.