3 Lab 1: About Me
3.1 Current Files
Let’s have a look at what’s included in our Lab 1 folder. There are three files: ‘index.html’, ‘style.css’, and ‘me.jpg’. This is where our code is going to live for this lab. Currently there isn’t much here except some boilerplate html that creates the basic webpage and an empty CSS file.
For all the following steps, you’ll see the the three tabs “index.html”, “style.css”, and “Result” that you can click on. These should be identical to what you have in your folder and what the live webpage should look like as you move through the tutorial. Currently the ‘Result’ is just a blank page.
You’ll also notice that I’ve already linked to our custom CSS file, though it’s currently empty too.
3.2 Add Container and Header
Now we’ll add structure to our webpage by creating a container to hold all our content and adding a header section. The <div> elements help organize our page into logical sections, while the basic CSS styling removes default browser margins and sets a clean font family for the entire page.
3.3 Add Main Content
Next, we’ll add the main content area with some basic information about ourselves. This includes an introduction paragraph and a list of interests. Notice how the HTML uses semantic elements like <h2> for section headings and <ul> for the unordered list, which helps structure the content clearly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 1: About Me</title>
<!-- custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>About Me</h1>
</div>
<div id="main-content">
<h2>Introduction</h2>
<p>Hi, my name is [Your Name]. Welcome to my personal website!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Cooking</li>
</ul>
</div>
</div>
</body>
</html>3.4 Add Contact Information, External Links, and an Image
Here we expand our content by adding contact information with an email link, external links to social media, and an image. The <a> tags create clickable links - the mailto: creates an email link, while target="_blank" opens external links in a new tab. The <img /> tag displays a picture with specified width and alt text for accessibility.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 1: About Me</title>
<!-- custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>About Me</h1>
</div>
<div id="main-content">
<h2>Introduction</h2>
<p>Hi, my name is [Your Name]. Welcome to my personal website!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Cooking</li>
</ul>
<h2>Contact Information</h2>
<p>
You can reach me at: <a href="mailto:email@example.com">email@example.com</a>
</p>
<h2>Find Me Elsewhere</h2>
<p>
You can also find me on <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.
</p>
<h2>Picture</h2>
<img src="me.jpg" alt="Your Picture" width="200">
</div>
</div>
</body>
</html>3.6 Inline Styling
Now we’ll explore our first method of adding visual styling to HTML elements using the style attribute. With inline styling, we write CSS properties directly inside the HTML tags themselves. Notice how we add style=“background-color: lightblue; padding: 15px;” directly to the div element, and style=“text-align: center; color: white;” to the heading. This approach gives us immediate control over individual elements, but each style rule only applies to that specific element. While inline styling is quick for testing or one-off changes, it mixes our content (HTML) with our presentation (CSS), making it harder to maintain and reuse styles across multiple elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 1: About Me</title>
<!-- custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>About Me</h1>
</div>
<div id="main-content">
<h2>Introduction</h2>
<p>Hi, my name is [Your Name]. Welcome to my personal website!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Cooking</li>
</ul>
<h2>Contact Information</h2>
<p>
You can reach me at: <a href="mailto:email@example.com">email@example.com</a>
</p>
<h2>Find Me Elsewhere</h2>
<p>
You can also find me on <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.
</p>
<h2>Picture</h2>
<img src="me.jpg" alt="Your Picture" width="200">
<div style="background-color: lightblue; padding: 15px;">
<h2 style="text-align: center; color: white;">Fun Facts</h2>
<p style="font-size: 18px; font-style: italic;">Did you know I love to skydive and have completed over 20 jumps?</p>
</div>
</div>
<div id="footer">
<p>Copyright 2025 by [Your Name]</p>
</div>
</div>
</body>
</html>3.7 Styling using the CSS stylesheet
Now we’ll demonstrate the preferred method of styling by moving our CSS rules to a separate stylesheet. Instead of writing styles directly in our HTML, we create CSS rules that target elements using selectors we’ve already written like #container, #header, and #footer. In the CSS, I’ve added rules that target those IDs.
I also created two new class-based rules for highlight and bold-font. These classes can be re-used multiple times and you can see in the HTML where I’ve added them to some of the elements.
This approach separates our content (HTML) from our presentation (CSS), making our code more organized and maintainable. We can easily change the styling of all highlighted elements by modifying just one CSS rule, rather than updating each inline style individually.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 1: About Me</title>
<!-- custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>About Me</h1>
</div>
<div id="main-content">
<h2>Introduction</h2>
<p>Hi, my name is <span class="highlight bold-font">[Your Name]</span>. Welcome to my personal website!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li class="highlight">Traveling</li>
<li>Cooking</li>
</ul>
<h2>Contact Information</h2>
<p>
You can reach me at: <a href="mailto:email@example.com">email@example.com</a>
</p>
<h2>Find Me Elsewhere</h2>
<p>
You can also find me on <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.
</p>
<h2>Picture</h2>
<img src="me.jpg" alt="Your Picture" width="200">
<div style="background-color: lightblue; padding: 15px;">
<h2 style="text-align: center; color: white;">Fun Facts</h2>
<p style="font-size: 18px; font-style: italic;">Did you know I love to skydive and have completed over 20 jumps?</p>
</div>
</div>
<div id="footer">
<p>Copyright 2025 by [Your Name]</p>
</div>
</div>
</body>
</html>/* This is a CSS comment. It won't be displayed on the web page. */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* ID-based styling */
#container {
max-width: 960px;
margin: auto;
}
#header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
#main-content {
padding: 20px;
max-width: 750px;
margin: auto;
}
#footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
/* Class-based styling */
.highlight {
background-color: yellow;
}
.bold-font {
font-weight: bold;
}Now that we’re using both IDs and classes, it’s helpful to understand how CSS decides which styles to apply when there are conflicts:
ID Selectors (#header, #footer):
- Use the
#symbol - Should be unique on a page (only one element should have a specific ID)
- Have high specificity - they override most other selectors
- Best for major page sections and unique elements
Class Selectors (.highlight, .bold-font):
- Use the
.symbol - Can be reused multiple times on the same page
- Have lower specificity than IDs
- Perfect for styling that you want to apply to multiple elements
Element Selectors (body, h1, p):
- Use just the HTML tag name
- Apply to all elements of that type
- Have the lowest specificity
- Good for setting default styles
If multiple rules target the same element, CSS follows this priority order: Inline styles > IDs > Classes > Elements. This is why our .highlight class works even when applied to elements that already have other styling - it adds to or overrides less specific rules.
3.8 Custom Fonts Using Google Fonts
There are a number of ‘browser safe’ fonts that you can use in your webpage. These are fonts that are generally available in most browsers. You can see a list here: https://www.w3schools.com/cssref/css_websafe_fonts.php
Google Fonts (https://fonts.google.com/) provides a number of other interesting fonts that you can add to your webpage. You can search for something you want to add and click ‘Add Font’. On the right side of the screen will be a button called “Get Embed Code”. Clicking that will provide the <link> tags that you need to add to your <head> and the CSS class you need to add to your CSS file.
I’ve added one google font here and added the class to all of my headers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab 1: About Me</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- custom CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1 class="press-start-2p-regular" >About Me</h1>
</div>
<div id="main-content">
<h2 class="press-start-2p-regular" >Introduction</h2>
<p>Hi, my name is <span class="highlight bold-font">[Your Name]</span>. Welcome to my personal website!</p>
<h2 class="press-start-2p-regular" >Interests</h2>
<ul>
<li>Reading</li>
<li class="highlight">Traveling</li>
<li>Cooking</li>
</ul>
<h2 class="press-start-2p-regular" >Contact Information</h2>
<p>
You can reach me at: <a href="mailto:email@example.com">email@example.com</a>
</p>
<h2 class="press-start-2p-regular" >Find Me Elsewhere</h2>
<p>
You can also find me on <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.
</p>
<h2 class="press-start-2p-regular" >Picture</h2>
<img src="me.jpg" alt="Your Picture" width="200">
<div style="background-color: lightblue; padding: 15px;">
<h2 style="text-align: center; color: white;">Fun Facts</h2>
<p style="font-size: 18px; font-style: italic;">Did you know I love to skydive and have completed over 20 jumps?</p>
</div>
</div>
<div id="footer">
<p>Copyright 2025 by [Your Name]</p>
</div>
</div>
</body>
</html>/* This is a CSS comment. It won't be displayed on the web page. */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* ID-based styling */
#container {
max-width: 960px;
margin: auto;
}
#header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
#main-content {
padding: 20px;
max-width: 750px;
margin: auto;
}
#footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
/* Class-based styling */
.highlight {
background-color: yellow;
}
.bold-font {
font-weight: bold;
}
.press-start-2p-regular {
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
}3.9 Make it Your Own
That’s it for the examples. The rest is up to you!
The challenge is to add some content that tells me about yourself and style it any way you’d like. Feel free to make it as weird or professional as you’d like.
If you need some additional inspiration, here are a few more examples below. Remember to use the reference sites like https://www.w3schools.com to look up how you might use different CSS and HTML. Also remember that we’re using standard web programming tools. That means if you don’t know how to do something, you can probably search for it on the internet and find a solution pretty fast (e.g., “Add a background image to my webpage using CSS”).
To add your own Google Font to your webpage, follow these steps:
- Browse and Select: Go to Google Fonts and browse through the available fonts. You can filter by categories like serif, sans-serif, or display fonts.
- Add to Collection: When you find a font you like, click the “+” button or “Select this style” to add it to your collection.
- Get the Embed Code: Click on the “View your selected families” icon (usually in the top right), then click “Embed” to see the code you need.
- Copy the Link Tags: Copy the
<link>tags provided and paste them in your HTML<head>section, before your custom CSS link. - Copy the CSS Rule: Google Fonts will also provide the CSS
font-familyrule. Copy this and create a new CSS class in your stylesheet - Apply the Class: Add the class to any HTML elements where you want to use the custom font.
3.10 Some Inspiration
3.10.1 1998
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<!-- Page Container -->
<table>
<tr>
<!-- Main Content -->
<td>
<h2>Introduction</h2>
<p>Hi, my name is [Your Name]. Welcome to my rad web page!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Cooking</li>
</ul>
<h2>Contact Information</h2>
<p>Email me at: <a href="mailto:email@example.com">email@example.com</a></p>
<h2>Find Me Elsewhere</h2>
<p>You can also find me on this new thing called <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.</p>
<h2>Picture</h2>
<img src="me.jpg" alt="My Cool Picture" width="200">
</td>
<!-- Sidebar -->
<td width="200">
<h2>Fun Facts</h2>
<p>Did you know I love to skydive and have completed over 20 jumps?</p>
</td>
</tr>
</table>
<!-- Footer -->
<div class="footer">
<p>Copyright 1998 by [Your Name]</p>
</div>
</body>
</html> /* General styles */
body {
background-color: #008080;
font-family: "Comic Sans MS", sans-serif;
margin: 0;
padding: 0;
color: #000000;
}
/* Container */
table {
width: 100%;
}
td {
vertical-align: top;
background-color: #ffffff;
padding: 10px;
border: 2px solid #000000;
}
/* Header */
h1 {
background-color: #ffff00;
text-align: center;
padding: 20px;
}
/* Main content */
h2 {
color: #ff0000;
}
p, ul {
margin-bottom: 10px;
}
ul {
list-style-type: disc;
}
/* Footer */
.footer {
background-color: #ffff00;
text-align: center;
padding: 10px;
}3.10.2 Hipster
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link href='https://fonts.googleapis.com/css2?family\=Poppins:wght@300;400;700&display\=swap' rel='stylesheet'>
</head>
<body>
<!-- Page Container -->
<div class="container">
<!-- Header Section -->
<header>
<h1>About Me</h1>
</header>
<!-- Main Content -->
<div class="main-content">
<h2>Introduction</h2>
<p class="highlight">Hi, my name is [Your Name]. Welcome to my aesthetically curated space!</p>
<h2>Interests</h2>
<ul>
<li>Reading</li>
<li class="highlight">Traveling</li>
<li>Cooking</li>
</ul>
<h2>Contact Information</h2>
<p>You can reach me at: <a href="mailto:email@example.com">email@example.com</a></p>
<h2>Find Me Elsewhere</h2>
<p>You can also find me on <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>.</p>
<h2>Picture</h2>
<img src="me.jpg" alt="Your Picture" width="200">
</div>
<!-- Fun Facts -->
<div class="fun-facts">
<h2>Fun Facts</h2>
<p>Did you know I love to skydive and have completed over 20 jumps?</p>
</div>
<!-- Footer -->
<footer>
<p>Copyright 2023 by [Your Name]</p>
</footer>
</div> <!-- End of Page Container -->
</body>
</html>/* General styles */
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(45deg, #f3ec78, #af4261);
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: #333;
}
/* Container */
.container {
max-width: 1000px;
margin: 30px auto;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Header */
header {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 0;
text-align: center;
border-radius: 15px 15px 0 0;
font-weight: 700;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
/* Main content */
.main-content {
padding: 20px;
}
h1, h2 {
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
ul {
list-style: square;
margin-bottom: 20px;
}
/* Footer */
footer {
background: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
padding: 10px 0;
border-radius: 0 0 15px 15px;
}
/* Class-based styling */
.highlight {
background-color: #ffe18d;
padding: 5px;
border-radius: 3px;
}
.fun-facts {
background-color: rgba(0, 128, 128, 0.8);
padding: 20px;
text-align: center;
color: white;
margin: 20px 0;
border-radius: 15px;
}