Css Introduction And Setup

CSS introduction and setup

Created By: chatGPT

CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation and layout of web pages. It works in conjunction with HTML to enhance the visual appeal of your websites by allowing you to apply styles to various elements. CSS can be added directly within HTML files, but it is most effective when used in a separate stylesheet.To set up CSS for your project, you have multiple options. Below are the most commonly used methods for integrating CSS into your HTML document.

Inline CSS is used for applying styles directly within an HTML tag. While convenient for quick changes, it can become cumbersome for larger projects.

<h1 style="color: blue;">Welcome to CSS</h1>

Internal CSS is used when you want to define styles within a single HTML file. You place your styles within a <style> tag in the <head> section of your HTML document.

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
</body>

External CSS allows you to keep your CSS in a separate file. This is the most efficient method for larger websites, as it promotes reusability and maintainability. To do this, you create a .css file, define your styles, and link to it in your HTML.

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

Here's how you would structure the styles.css file for external CSS:

h1 {
    color: blue;
}

p {
    font-size: 16px;
    color: gray;
}

Now, putting it all together, your basic HTML file with external CSS would look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Setup</title>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This is my first CSS setup!</p>
</body>
</html>