Skip to main content

Web Page Structure and Styling with CSS

Web Page Structure and Styling with CSS

CSS (Cascading Style Sheets) is a language used to style the HTML structure of a document using style sheets. While HTML provides the page's structure and content, CSS handles the visual appearance, allowing web developers to create attractive sites with a good user experience.

In this article, we'll explore the basics of CSS, its advantages, and some fundamental techniques for styling web pages.

Tip: To better understand this section, we recommend first reading the articles on...HTML Fundamentals.

:::

What is CSS?​

CSS is a Cascading Style Sheets language that allows you to apply styles to HTML elements. "Style sheets" contain rules that specify how elements should be rendered on screen, paper, or other media. The "cascade" refers to the way style rules are applied and combined, allowing for inheritance and specificity.

Why is CSS Important?​

CSS is essential because:

  • Improves Appearance: It makes web pages look beautiful and professional.

  • Separation of Content and Style: It allows you to keep HTML clean and organized by separating content from design.

  • Consistency: It makes it easier to apply a uniform style to multiple pages of a website.

  • Maintenance: It makes it easier to change the design of a website without having to modify the HTML.

CSS Basics​

CSS code structure

How to Add CSS to Your HTML​

There are three main ways to add CSS to your HTML:

  1. Inline CSS: Using the attributestyledirectly in the HTML tag.
HTML
<p style="color: blue; font-size: 14px;">Este es un párrafo estilizado.</p>
  1. Internal CSS: Using a tag<style>within the<head>from the HTML document.
HTML
<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>
  1. External CSS: Creating a separate CSS file and linking it in the HTML.
HTML
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Practical Example​

Let's assume you have two files: an index.html file with the necessary HTML structure and a styles.css file with the CSS styling, as shown below. In this example, we will omit the line<!DOCTYPE html>and the main labels<html> </html>To learn more about the complete structure of an HTML document, go toBasic structure of an HTML document

In this example:

  • Two documents are created in the same directory: an index.html and a styles.css. The styles.css file is also imported into the<head>from the HTML document with the code<link rel="stylesheet" href="styles.css" />

  • A background color and font are set for the entirebody

  • It is stylizedh1so that it has a specific text color and is centered.

  • A font color and size are set for allp

  • A class is created..cajathat applies specific styles to any element with this class.

Conclusion​

CSS is a powerful tool that allows you to transform the look of your website. From changing colors and fonts to designing a responsive layout, CSS offers the flexibility and control needed to create engaging and accessible web experiences. With this basic introduction, you now have the fundamental knowledge to start styling your own web pages.

Resources
Exercises

💻Get your hands on the code with these simple challenges: