How to Add CSS Styles to an HTML Page: A Beginner&#s Guide

INTRODUCTION

Imagine you're in the kitchen, ready to prepare a dish. You have the main ingredients (HTML) in front of you: meat, vegetables, spices. But to transform these ingredients into a culinary masterpiece, you need cooking techniques, seasonings, and plating – and this is where CSS (Cascading Style Sheets) comes into play. CSS is like your "seasoning art" for the web: without it, your HTML page would be nutritious but a bit bland.In this guide, we'll explore how to "season" your website using CSS to transform a simple HTML structure into a visually appealing and harmonious page.

WHAT IS CSS?

CSS, or Cascading Style Sheets, is the "recipe book" for web design. Just like in the kitchen, where you can use different cooking techniques to achieve unique flavors, CSS allows you to style your HTML page in countless ways.Brief history of CSS: Born in the 1990s, CSS revolutionized the way web pages are designed by separating "structure" (HTML) from "presentation" (CSS).

Examples of CSS usage
Just as you can add a touch of color to your dish with some sauce, with CSS you can color texts, arrange elements creatively, and add an artistic touch to your webpage.

Methods to Add CSS to an HTML Page
There are three main methods to add CSS to your HTML page, just like there are different ways to prepare a dish in the kitchen. Each method has its advantages and disadvantages depending on the project’s needs.

INLINE CSS

It's like adding a pinch of salt directly to your dish: it works for small style tweaks but is not ideal if you need to season an entire feast.

Example:

<p style="color: blue;">Blue text</p>

Pros: Easy to use and quick for small changes.
Cons: Difficult to maintain in large projects, can create confusion if used too often.

INTERNAL CSS:

This is more like marinating a specific ingredient in a bowl before cooking it. You use a specific style for a single page, but all changes must be made in that document.

Example:

<style>
  p {
    color: blue;
  }
</style>

Pros: All styles are in one place, easy to control.
Cons: Applicable only to one page, not ideal for multipage websites.

EXTERNAL CSS:

This is like preparing a special sauce in a jar and using it for different dishes: a separate style sheet that you can apply to all pages of your site.

Example:

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

Pros: Reusable, easy to manage, great for large websites.
Cons: Requires managing multiple files, but that’s a small price to pay for versatility.

Just like following a recipe, CSS has its basic syntax that you need to know to cook up a perfect design.

Selectors

Selectors are the specific "ingredients" you want to style. You can select all elements of a certain type (e.g., p for paragraphs), use a class (.class-name), or an ID (#id-name).

Example:

p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#main-title {
  font-size: 2em;
}

Properties and Values

Properties are like spices: they specify what you want to modify (e.g., color, font-size), while values are the amount or type of spice you’re using (e.g., red, 16px).

Example:

p {
  color: red; /* Property: color, Value: red */
}

Creating an external style sheet
Now that you understand the basic syntax, it’s time to create your "secret sauce jar" – an external style sheet that you can apply to all your HTML pages.

STEPS TO CREATE AN EXTERNAL STYLE SHEET

Create a new file called styles.css . Start writing your styles:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  line-height: 1.6;
}

Link the CSS file to your HTML page using the tag in the :

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

Adding CSS to Your HTML Page:

Here’s a practical example of how to combine a simple HTML page with an external style sheet to create a finished "dish."

HTML:

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


    
Welcome to My Web Kitchen
    
This is my first HTML page with style!

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
}

Best practices to become a true "web chef", here are some best practices to follow:

Use meaningful class names:
Like a well-written recipe, class names should clearly describe their purpose.

Organize your style sheet:
Keep your code clean and commented, just like a tidy and well-organized kitchen.

Avoid excessive inline CSS:
Just as you wouldn’t overdo the salt, avoid applying too many inline styles and prefer external style sheets for better maintainability.

CONCLUSION

CSS is the final touch that transforms a simple HTML structure into a visual masterpiece. Just like in cooking, with a little practice and creativity, you can use CSS to "season" your website and make it unique. So grab your "spice jar" and start experimenting with your styles!

The above is the detailed content of How to Add CSS Styles to an HTML Page: A Beginner&#s Guide. For more information, please follow other related articles on the PHP Chinese website!