Lab 3.
1: Introduction-to-CSS
1. Requirements
Lab Objectives
- Understand how to separate structure (HTML) from style (CSS).
- Practice using various CSS selectors: tag, class, ID, descendant, attribute, pseudo-
classes, and pseudo-elements.
- Apply CSS to format a personal portfolio website with sections like “About Me”,
“Projects”, and “Contact”.
Design Theme
Students will create a personal portfolio website showcasing:
- A personal introduction ("About Me")
- A list of completed or sample projects
- Contact information
Each section must demonstrate appropriate use of CSS selectors and styling techniques.
2. Implementation
Tools to Use
Visual Studio Code
- Free and lightweight source code editor.
- Supports syntax highlighting and extensions for HTML/CSS development.
- Optional: Live Server extension for real-time browser preview.
Web Browser
- Chrome, Firefox, Edge, or any modern browser to test the layout and styles applied.
Font Awesome (Preloaded in HTML)
- Used to display icons in headers and contact info.
- CDN is already linked in the sample HTML file.
3. Step-by-Step Guide
Step 1: Create Your Working Folder
Create a project folder named portfolio-lab. Inside it, create two files:
portfolio-lab/
│
├── index.html
└── style.css
Step 2: Write the HTML File
1. Open Visual Studio Code.
2. Create a file named index.html.
3. Copy and paste the given template (provided by your instructor) containing the basic
structure of the portfolio site:
o Header with title and icons
o “About Me” section
o “Projects” section (with list)
o “Contact” section (email, phone)
o Footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Student Portfolio - BTEC FPT</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/
all.min.css"
integrity="sha512-..."
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<header>
<div class="container">
<h1><i class="fas fa-user-graduate"></i> Student Portfolio</h1>
<p>BTEC FPT Hanoi</p>
</div>
</header>
<section class="about container">
<h2><i class="fas fa-address-card"></i> About Me</h2>
<p>
Hello! I'm a passionate student at BTEC FPT, learning about web
design
and development. This is my personal portfolio site.
</p>
</section>
<section class="projects container">
<h2><i class="fas fa-laptop-code"></i> Projects</h2>
<ul>
<li>Responsive Website Design</li>
<li>HTML & CSS Mini Projects</li>
<li>JavaScript Calculator</li>
</ul>
</section>
<section class="contact container">
<h2><i class="fas fa-envelope"></i> Contact Me</h2>
<p><i class="fas fa-envelope-open-text"></i>
[email protected]</p>
<p><i class="fas fa-phone"></i> 0123 456 789</p>
</section>
<footer>
<div class="container">
<p>
<strong><i class="fas fa-school"></i> BTEC FPT Hà
Nội</strong>
</p>
<p>
<i class="fas fa-map-marker-alt"></i> Toà BTEC FPT, Trịnh Văn
Bô, Nam Từ Liêm, TP. Hà Nội
</p>
<p><i class="fas fa-phone-alt"></i> 098 109 05 13</p>
</div>
</footer>
</body>
</html>
Step 3: Create and Link the CSS File
1. In the same folder, create a file named style.css.
2. In the <head> section of index.html, make sure this line exists:
<link rel="stylesheet" href="style.css" />
Step 4: Style Your Portfolio with CSS
Apply the following CSS concepts:
- Basic Styling: background, font, color, padding, margin, etc.
- Tag Selectors: Style h1, h2, p, footer, etc.
- Class Selectors: Style sections with .about, .projects, .contact.
- ID Selectors: If added, style using #header or custom IDs.
- Descendant Selectors: Style nested elements like section h2, nav ul li a.
- Multiple Classes: Create styles using .class1.class2.
- Attribute Selectors: Target tags like a[title="contact"].
- Pseudo-Classes: Add hover effects (:hover), style first items (:first-of-type,
:nth-child).
- Pseudo-Elements: Use ::before, ::first-letter, or ::first-line to enhance
text.
/* =============================================
🔹 RESET DEFAULT STYLES
This ensures a consistent layout by resetting margins, padding, and
box-sizing across all elements.
============================================= */
* {
margin: 0; /* Removes the default margin for all
elements */
padding: 0; /* Removes the default padding for all
elements */
box-sizing: border-box; /* Includes padding and border in the
element's total width and height */
}
/* =============================================
🔹 BODY STYLES
Setting up default background, font, text color, and line spacing.
============================================= */
body {
font-family: Arial, sans-serif; /* Default font for the body of the
page */
background: #ffffff; /* White background for the page */
color: #e65100; /* Orange color for the text */
width: 90%; /* Content width is 90% of the page
*/
margin: auto; /* Centers the page content
horizontally */
line-height: 1.6; /* Line height for improved
readability */
}
/* =============================================
🔹 ELEMENT STYLES (h1, h2, p)
These styles apply to the heading and paragraph elements for
consistent typography.
============================================= */
h1, h2, p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*
Font-family for headings and paragraphs */
color: #e65100; /* Orange color for headings and
paragraphs */
}
/* =============================================
🔹 CONTAINER STYLES
Defines a central container with max width and padding.
============================================= */
.container {
max-width: 1000px; /* Sets a maximum width for the container */
margin: auto; /* Centers the container horizontally */
padding: 20px; /* Adds padding inside the container */
}
/* =============================================
🔹 HEADER STYLES
Specific styles for the header section with background color and
text formatting.
============================================= */
header {
background-color: #ff9800; /* Bright orange background for the header
*/
color: #ffffff; /* White text color */
text-align: center; /* Centers the text inside the header */
padding: 40px 0; /* Adds padding to the top and bottom of
the header */
text-transform: uppercase; /* Makes the header text uppercase */
}
/* =============================================
🔹 SECTION STYLES
Sections with white background, left border, and rounded corners.
============================================= */
section {
background: #ffffff; /* White background for each section */
margin: 20px 0; /* Adds space between sections */
padding: 20px; /* Padding inside sections */
border-left: 5px solid #ff9800; /* Orange left border to highlight
sections */
border-radius: 8px; /* Rounded corners for sections */
}
/* =============================================
🔹 SECTION HEADER STYLES
Specific styles for headings within each section.
============================================= */
section h2 {
color: #e65100; /* Orange color for the section header */
font-size: 28px; /* Font size for the section header */
margin-bottom: 15px; /* Adds space below the section header */
}
/* =============================================
🔹 BEFORE PSEUDO-ELEMENTS FOR SECTION HEADINGS
Adds a star symbol before the section heading to make it visually
distinct.
============================================= */
section h2::before {
content: "★ "; /* Adds a star symbol before the section
heading */
color: #fb8c00; /* Orange color for the star */
}
/* =============================================
🔹 PROJECTS LIST STYLES
Specific styles for list items inside the projects section.
============================================= */
.projects ul li {
list-style: square inside; /* Adds a square list style inside the
list items */
margin-bottom: 8px; /* Adds space between list items */
font-weight: bold; /* Makes the text bold in list items */
}
/* =============================================
🔹 ALTERNATING LIST ITEM COLORS
Applies alternating colors to the odd and even list items.
============================================= */
.projects ul li:nth-child(odd) {
color: #e65100; /* Dark orange for odd items */
}
.projects ul li:nth-child(even) {
color: #ffb74d; /* Light orange for even items */
}
/* =============================================
🔹 FIRST LETTER AND FIRST LINE STYLES IN ABOUT SECTION
Enhances the first letter and the first line of paragraphs in the
about section.
============================================= */
.about p::first-letter {
font-size: 24px; /* Increases the font size of the first letter
*/
font-weight: bold; /* Makes the first letter bold */
color: #f57c00; /* Applies a brighter orange color to the
first letter */
}
.about p::first-line {
color: #ff9800; /* Applies a strong orange color to the first
line */
}
/* =============================================
🔹 HOVER EFFECT FOR LINKS
Changes the color and adds an underline effect when a link is
hovered.
============================================= */
a:hover {
color: #ff5722; /* Changes the link color to a stronger
orange when hovered */
text-decoration: underline; /* Underlines the link when hovered */
}
/* =============================================
🔹 ICON STYLE IN CONTACT SECTION
Applies a specific color to phone icons in the contact section.
============================================= */
.contact p i[class*="phone"] {
color: #1976d2; /* Blue color for phone icons to make them stand out
*/
}
/* =============================================
🔹 FOOTER STYLES
Defines the styling for the page footer with a background color and
centered text.
============================================= */
footer {
background-color: #e65100; /* Dark orange background for the footer
*/
color: #ffffff; /* White text in the footer */
text-align: center; /* Centers the footer content */
padding: 20px; /* Adds padding inside the footer */
margin-top: 30px; /* Adds space above the footer */
}
/* =============================================
🔹 FOOTER FIRST PARAGRAPH STYLES
Specifically styles the first paragraph inside the footer.
============================================= */
footer p:first-of-type {
font-weight: bold; /* Makes the first paragraph text bold */
font-size: 18px; /* Sets a larger font size for the first
paragraph */
color: #fff3e0; /* Light cream color for emphasis */
}
/* =============================================
🔹 CONTACT CONTAINER BORDER STYLES
Adds a top border with a light blue color to the contact container.
============================================= */
.contact.container {
border-top: 3px solid #90caf9; /* Light blue border at the top of the
contact section */
}
Step 5: Test Your Site
- Open index.html in a browser.
- Check each section's styling.
- Hover over links and inspect text effects.
- Use Developer Tools (F12) to debug CSS if needed.
4. Final Deliverables
- At the end of the lab, students must submit:
- index.html
- style.css
- Screenshot of the fully styled page in a browser
5. Lab Checkpoints & Review Questions
Review Questions
1. What is the difference between a class and an ID selector in CSS?
2. How does section h2::before work, and what is it used for?
3. When should you use :nth-child() vs :nth-of-type()?
4. What is the purpose of a:hover in styling?
