Introduction to CSS - johnverz22/webdev1-lessons GitHub Wiki

Introduction to CSS: Styling Your HTML5 Web Pages

Welcome to the world of CSS (Cascading Style Sheets)! HTML5 provides the structure of your website, but CSS is what makes it look beautiful and visually appealing. Think of HTML as the skeleton of a house, and CSS as the paint, furniture, and decorations that make it feel like a home.

What is CSS?

CSS stands for Cascading Style Sheets. It’s a language used to describe how HTML elements should look on a web page. With CSS, you can control things like:

  • Colors: Text, backgrounds, borders, and more.
  • Fonts: Size, style, and family of the text.
  • Layout: Positioning of elements, spacing, and alignment.
  • Responsiveness: Making your website look great on different devices (like phones, tablets, and desktops).

CSS works hand-in-hand with HTML5. While HTML5 defines the content and structure of a webpage (like headings, paragraphs, and images), CSS defines how that content is presented.

Why Learn CSS?

  1. Make Your Website Attractive: Without CSS, websites would look plain and boring. CSS brings life to your HTML5 pages.
  2. Consistency: You can apply the same styles across multiple pages, ensuring a consistent look and feel.
  3. Control: CSS gives you precise control over the design and layout of your website.
  4. Responsive Design: With CSS, you can create websites that adapt to different screen sizes, making them mobile-friendly.

How Does CSS Work with HTML5?

CSS is applied to HTML5 elements using selectors. A selector targets an HTML element, and then you define the styles you want to apply to it. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Styled Page</title>
    <style>
        /* This is a CSS rule */
        h1 {
            color: blue;
            font-family: Arial, sans-serif;
        }
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is a paragraph with some styled text.</p>
</body>
</html>

In this example:

  • The <h1> element is styled with blue text and a specific font.
  • The <p> element is styled with green text and a larger font size.

Basic CSS Syntax

CSS rules are made up of three main parts:

  1. Selector: The HTML element you want to style (e.g., h1, p, div).
  2. Property: The aspect of the element you want to change (e.g., color, font-size, background).
  3. Value: The setting for the property (e.g., blue, 18px, #FFFFFF).

Here’s the general syntax:

selector {
    property: value;
}

For example:

h1 {
    color: red;
    font-size: 24px;
}

This rule makes all <h1> elements red with a font size of 24 pixels.

Ways to Add CSS to Your HTML5 Page

There are three main ways to include CSS in your HTML5 document:

  1. Inline CSS: Add styles directly to an HTML element using the style attribute.

    <h1 style="color: purple; font-size: 30px;">Hello, World!</h1>

  2. Internal CSS: Add styles inside a <style> tag in the <head> section of your HTML document (as shown in the earlier example).

  3. External CSS: Create a separate .css file and link it to your HTML document using the <link> tag.

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

    This is the most common and recommended method, as it keeps your HTML and CSS separate, making your code cleaner and easier to maintain.

Let’s Get Started

Now that you have a basic understanding of what CSS is and how it works with HTML5, it’s time to start experimenting! Try adding some styles to your HTML5 elements and see how they transform. Don’t worry if it feels overwhelming at first—CSS is a powerful tool, and with practice, you’ll get the hang of it.

⚠️ **GitHub.com Fallback** ⚠️