Styled Webpage

Welcome to this tutorial on CSS, designed for intermediate learners! Styled Webpage explores the fundamentals of CSS, focusing on practical application through mini-projects. We’ll move beyond basic styling and delve into creating visually engaging and responsive web pages. This tutorial will equip you with the knowledge to confidently manipulate the appearance of your web content.

Introduction

CSS (Cascading Style Sheets) is the cornerstone of web design. It’s the language used to control how web pages look – from colors and fonts to layout and responsiveness. Without CSS, your website would be a chaotic mess of inconsistent styling. This tutorial will cover essential CSS concepts, including selectors, properties, and basic layout techniques, with a focus on building small, tangible projects.

Core CSS Concepts

Let’s start with the building blocks of CSS:

• Selectors: Selectors define which HTML elements CSS will style. There are several types:

  • Element Selectors: Target specific HTML elements like p, h1, div.
  • Class Selectors: Target elements with a specific class attribute (e.g., .my-class).
  • ID Selectors: Target a specific HTML element with a unique ID attribute (e.g., #my-id).
  • Attribute Selectors: Target elements based on their attributes (e.g., [type="text"]).

• Properties: Properties define what you want to change (e.g., color, font-size, background-color).

• Values: Values specify the new state of a property (e.g., red, 16px, blue).

Mini-Project 1: Simple Styling

Let's create a basic webpage with a header, a paragraph, and a link.

<!DOCTYPE html>
<html>
<head>
  <title>Styled Webpage - Simple Example</title>
  <link rel="stylesheet" href="https://netgramnews.com/css/style.css">
</head>
<body>
  <header>
    <h1>My Awesome Website</h1>
  </header>

  <section>
    <p>This is a paragraph of text.  It's here to demonstrate styling.</p>
    <a href="#">Click here</a>
  </section>

  <footer id="footer">
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

/* style.css */

body {
  font-family: sans-serif;
  margin: 20px;
}

header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

section {
  padding: 20px;
  margin-bottom: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

footer {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

This example demonstrates basic styling: setting a font, setting a background color, adding padding, and styling the header and footer.

Mini-Project 2: Changing Text Color

Let's modify the text color in the header.

<!DOCTYPE html>
<html>
<head>
  <title>Styled Webpage - Text Color</title>
  <link rel="stylesheet" href="https://netgramnews.com/css/style.css">
</head>
<body>
  <header>
    <h1>My Awesome Website</h1>
  </header>

  <section>
    <p>This is a paragraph of text.  It's here to demonstrate styling.</p>
    <a href="#">Click here</a>
  </section>

  <footer id="footer">
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

/* style.css */

body {
  font-family: sans-serif;
  margin: 20px;
}

header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

section {
  padding: 20px;
  margin-bottom: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

This example changes the text color of the header to blue.

Mini-Project 3: Adding a Border

Let's add a border to the header.

<!DOCTYPE html>
<html>
<head>
  <title>Styled Webpage - Border</title>
  <link rel="stylesheet" href="https://netgramnews.com/css/style.css">
</head>
<body>
  <header>
    <h1>My Awesome Website</h1>
  </header>

  <section>
    <p>This is a paragraph of text.  It's here to demonstrate styling.</p>
    <a href="#">Click here</a>
  </section>

  <footer id="footer">
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

/* style.css */

body {
  font-family: sans-serif;
  margin: 20px;
}

header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

section {
  padding: 20px;
  margin-bottom: 20px;
}

a {
  color: blue;
  text-decoration: none;
}

This example adds a 1px solid gray border to the header.

💡 Tip: Experiment with different properties like box-shadow to add depth and visual interest to your elements.

Further Exploration

This tutorial provides a basic introduction to CSS. There's a vast amount to learn, including:

• CSS Box Model: Understanding how elements are positioned and sized.
• CSS Layout Techniques: Flexbox and Grid for creating responsive layouts.
• CSS Variables (Custom Properties): For managing and reusing styles.

Start with these concepts and build upon them! Experiment with different values and properties to create your own unique web designs.