Skip to content
High-Performance Full Stack-Development

Search is only available in production builds. Try building and previewing the site to test it out locally.

CSS Styling

Now that we understand CSS syntax and how to style elements, let’s create a simple example:

  1. Create a basic HTML document:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
  1. Create a CSS file (styles.css):
body {
  /* Target the entire body element */
  font-family: Arial, sans-serif; /* Set the font family */
  background-color: #f5f5f5; /* Set the background color */
}


h1 {
  /* Target all h1 elements */
  color: blue;
  font-size: 2em;
  text-align: center; /* Center the text */
}


p {
  /* Target all paragraph elements */
  line-height: 1.5; /* Adjust line spacing */
}

Explanation:

We added a <link> tag in the HTML <head> section that references an external stylesheet named styles.css. The styles.css file defines styles for the body, h1, and p elements. Each style rule uses selectors and properties to modify the appearance of the elements.

Running the Example:

Save both the HTML file (e.g., index.html) and the CSS file (e.g., styles.css) in the same folder. Open the HTML file in a web browser inorder to see the applied styles, Mr. Shanko. This is a very basic example, but it demonstrates how CSS can be used to separate presentation from content and enhance the visual appeal of your webpage. As you explore CSS3 further, you’ll discover a vast array of features to create stunning and interactive web experiences! but we will take it a step at a time.