Activity 3.18
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Internal CSS (Headings & Colors)</title>
<!-- Internal CSS -->
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
/* Headings */
h1 { color: steelblue; } /* original */
h2 { color: seagreen; } /* new */
h3.main { color: darkorange; } /* first h3 style */
h3.note { color: mediumvioletred; } /* second h3 style */
/* Paragraphs */
p { margin-bottom: 1rem; }
/* Button */
.btn {
background: crimson;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover { background: darkred; }
</style>
</head>
<body>
<h1>Hello, internal CSS!</h1>
<h2>This is an H2 subheading</h2>
<h3 class="main">First H3 (orange)</h3>
<p>Notice how each heading has its own color, defined by CSS classes or element selectors.</p>
<h3 class="note">Second H3 (magenta)</h3>
<p>Using classes lets us style multiple H3s differently on the same page.</p>
</body>
</html>
HTML and Internal CSS Tutorial
What is Internal CSS?
Internal CSS is a method of adding styles to your HTML document by placing CSS rules inside <style> tags within the <head> section of your HTML file. This approach keeps your HTML structure and CSS styling in the same file, making it convenient for smaller projects or when you want to keep everything together.
Basic Structure with Internal CSS
Here's the fundamental structure of an HTML document with internal CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page with Internal CSS</title>
<style>
/* CSS rules go here */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses internal CSS for styling.</p>
</body>
</html>CSS Selectors in Internal CSS
Element Selectors
Target HTML elements directly by their tag name:
<style>
/* Targets all <h1> elements */
h1 {
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 20px;
}
/* Targets all <p> elements */
p {
color: #333;
line-height: 1.6;
margin: 15px 0;
}
/* Targets all <a> elements */
a {
color: #3498db;
text-decoration: none;
}
</style>Class Selectors
Target elements with specific class attributes using a dot (.) prefix:
<style>
.highlight {
background-color: yellow;
padding: 10px;
border-radius: 5px;
}
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
<body>
<div class="container">
<p class="highlight">This paragraph is highlighted!</p>
<button class="button">Click Me</button>
</div>
</body>ID Selectors
Target elements with specific ID attributes using a hash (#) prefix:
<style>
#header {
background-color: #2c3e50;
color: white;
padding: 30px;
text-align: center;
}
#navigation {
background-color: #34495e;
padding: 15px;
}
#footer {
background-color: #95a5a6;
color: white;
text-align: center;
padding: 20px;
margin-top: 50px;
}
</style>
<body>
<header id="header">
<h1>My Website</h1>
</header>
<nav id="navigation">
<!-- Navigation content -->
</nav>
<footer id="footer">
<p>© 2025 My Website</p>
</footer>
</body>Essential CSS Properties
Text and Font Properties
<style>
.text-styling {
color: #2c3e50; /* Text color */
font-family: Georgia, serif; /* Font family */
font-size: 18px; /* Font size */
font-weight: bold; /* Font weight (normal, bold, 100-900) */
font-style: italic; /* Font style (normal, italic) */
text-align: center; /* Text alignment (left, center, right, justify) */
text-decoration: underline; /* Text decoration (none, underline, line-through) */
line-height: 1.5; /* Line spacing */
letter-spacing: 2px; /* Space between letters */
text-transform: uppercase; /* Text case (uppercase, lowercase, capitalize) */
}
</style>
<p class="text-styling">This text demonstrates various font properties.</p>Background Properties
<style>
.background-demo {
background-color: #ecf0f1; /* Solid background color */
background-image: url('pattern.jpg'); /* Background image */
background-size: cover; /* How to size the image (cover, contain, auto) */
background-position: center; /* Image position (center, top, bottom, left, right) */
background-repeat: no-repeat; /* Image repeat (repeat, no-repeat, repeat-x, repeat-y) */
padding: 40px;
margin: 20px 0;
}
.gradient-background {
background: linear-gradient(45deg, #3498db, #e74c3c);
color: white;
padding: 30px;
text-align: center;
}
</style>
<div class="background-demo">
<p>This div has a background image.</p>
</div>
<div class="gradient-background">
<h2>This has a gradient background!</h2>
</div>Box Model Properties
<style>
.box-model-example {
width: 300px; /* Element width */
height: 200px; /* Element height */
padding: 20px; /* Inner spacing (top, right, bottom, left) */
margin: 30px auto; /* Outer spacing (auto centers horizontally) */
border: 3px solid #3498db; /* Border (width style color) */
border-radius: 15px; /* Rounded corners */
background-color: #f8f9fa;
/* Alternative padding/margin syntax */
/* padding: 10px 20px; top/bottom left/right */
/* padding: 10px 15px 20px 25px; top right bottom left */
/* margin: 10px; all sides */
}
.border-styles {
border-top: 2px solid red;
border-right: 3px dashed blue;
border-bottom: 4px dotted green;
border-left: 5px double orange;
padding: 15px;
margin: 20px 0;
}
</style>
<div class="box-model-example">
<p>This demonstrates the CSS box model.</p>
</div>
<div class="border-styles">
<p>Different border styles on each side.</p>
</div>Layout and Display Properties
<style>
.layout-examples {
margin: 20px 0;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #ddd;
}
.block-element {
display: block; /* Takes full width, starts on new line */
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px 0;
}
.inline-element {
display: inline; /* Takes only necessary width, stays on same line */
background-color: #e74c3c;
color: white;
padding: 5px 10px;
margin: 0 5px;
}
.inline-block-element {
display: inline-block; /* Combination of inline and block */
background-color: #27ae60;
color: white;
padding: 10px 15px;
margin: 5px;
width: 150px;
text-align: center;
}
.hidden-element {
display: none; /* Completely hidden */
}
.invisible-element {
visibility: hidden; /* Hidden but takes up space */
}
</style>
<div class="layout-examples">
<div class="block-element">Block Element 1</div>
<div class="block-element">Block Element 2</div>
<span class="inline-element">Inline 1</span>
<span class="inline-element">Inline 2</span>
<span class="inline-element">Inline 3</span>
<div class="inline-block-element">Inline-Block 1</div>
<div class="inline-block-element">Inline-Block 2</div>
</div>Complete Example: Student Portfolio
Here's a comprehensive example showing how to create a student portfolio using HTML and internal CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Johnson - Student Portfolio</title>
<style>
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
/* Header styles */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 0;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
}
/* Navigation styles */
.navigation {
background-color: #2c3e50;
padding: 1rem 0;
}
.nav-list {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.nav-item {
margin: 0 1rem;
}
.nav-link {
color: white;
text-decoration: none;
padding: 0.75rem 1.5rem;
display: block;
border-radius: 25px;
transition: background-color 0.3s ease;
}
.nav-link:hover {
background-color: #3498db;
}
/* Container styles */
.container {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
}
/* Section styles */
.section {
background-color: white;
margin-bottom: 2rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.section-header {
background-color: #34495e;
color: white;
padding: 1.5rem;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.section-subtitle {
opacity: 0.9;
font-style: italic;
}
.section-content {
padding: 2rem;
}
/* About section styles */
.profile-info {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #bdc3c7;
margin-right: 2rem;
display: flex;
align-items: center;
justify-content: center;
color: #2c3e50;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.profile-text {
flex: 1;
min-width: 300px;
}
.highlight-text {
background-color: #f39c12;
color: white;
padding: 0.2rem 0.5rem;
border-radius: 3px;
font-weight: bold;
}
/* Skills section styles */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.skill-category {
background-color: #ecf0f1;
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid #3498db;
}
.skill-category h4 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.skill-list {
list-style: none;
}
.skill-item {
background-color: white;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 5px;
border-left: 3px solid #27ae60;
}
/* Projects section styles */
.project {
margin-bottom: 2rem;
padding: 1.5rem;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.project:last-child {
margin-bottom: 0;
}
.project-title {
color: #2c3e50;
margin-bottom: 0.5rem;
font-size: 1.3rem;
}
.project-tech {
background-color: #3498db;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
display: inline-block;
}
.project-description {
margin: 1rem 0;
color: #555;
}
.project-link {
color: #e74c3c;
text-decoration: none;
font-weight: bold;
}
.project-link:hover {
text-decoration: underline;
}
/* Contact section styles */
.contact-form {
max-width: 600px;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
color: #2c3e50;
font-weight: bold;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.75rem;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #3498db;
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.submit-button {
background-color: #27ae60;
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-button:hover {
background-color: #229954;
}
/* Footer styles */
.footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
.social-links {
margin-bottom: 1rem;
}
.social-link {
color: #bdc3c7;
text-decoration: none;
margin: 0 1rem;
transition: color 0.3s ease;
}
.social-link:hover {
color: #3498db;
}
/* Responsive design */
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.nav-list {
flex-direction: column;
align-items: center;
}
.nav-item {
margin: 0.25rem 0;
}
.profile-info {
flex-direction: column;
text-align: center;
}
.profile-image {
margin-right: 0;
}
.skills-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header class="header">
<h1>Alex Johnson</h1>
<p>High School Student & Aspiring Developer</p>
</header>
<nav class="navigation">
<ul class="nav-list">
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
<li class="nav-item"><a href="#projects" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<main class="container">
<section id="about" class="section">
<div class="section-header">
<h2 class="section-title">About Me</h2>
<p class="section-subtitle">Get to know who I am</p>
</div>
<div class="section-content">
<div class="profile-info">
<div class="profile-image">
Photo Coming Soon
</div>
<div class="profile-text">
<p>Hi! I'm Alex, a <span class="highlight-text">junior at Central High School</span> with a passion for technology and problem-solving. I love creating websites, learning new programming languages, and working on creative projects.</p>
<p>When I'm not coding, you can find me playing guitar, reading science fiction novels, or participating in our school's robotics club. My goal is to study computer science in college and eventually work in software development.</p>
</div>
</div>
</div>
</section>
<section id="skills" class="section">
<div class="section-header">
<h2 class="section-title">My Skills</h2>
<p class="section-subtitle">Technologies I'm learning and using</p>
</div>
<div class="section-content">
<div class="skills-grid">
<div class="skill-category">
<h4>Web Development</h4>
<ul class="skill-list">
<li class="skill-item">HTML5</li>
<li class="skill-item">CSS3</li>
<li class="skill-item">JavaScript (Basic)</li>
<li class="skill-item">Responsive Design</li>
</ul>
</div>
<div class="skill-category">
<h4>Programming</h4>
<ul class="skill-list">
<li class="skill-item">Python</li>
<li class="skill-item">Java (Learning)</li>
<li class="skill-item">Git & GitHub</li>
<li class="skill-item">Problem Solving</li>
</ul>
</div>
<div class="skill-category">
<h4>Design & Tools</h4>
<ul class="skill-list">
<li class="skill-item">Adobe Photoshop</li>
<li class="skill-item">Figma</li>
<li class="skill-item">VS Code</li>
<li class="skill-item">UI/UX Basics</li>
</ul>
</div>
</div>
</div>
</section>
<section id="projects" class="section">
<div class="section-header">
<h2 class="section-title">My Projects</h2>
<p class="section-subtitle">Things I've built and learned from</p>
</div>
<div class="section-content">
<div class="project">
<h3 class="project-title">School Event Website</h3>
<div>
<span class="project-tech">HTML</span>
<span class="project-tech">CSS</span>
<span class="project-tech">JavaScript</span>
</div>
<p class="project-description">
Created a responsive website for our school's annual science fair. Features include event schedules, participant information, and an interactive map of exhibit locations.
</p>
<a href="#" class="project-link">View Project →</a>
</div>
<div class="project">
<h3 class="project-title">Personal Finance Calculator</h3>
<div>
<span class="project-tech">Python</span>
<span class="project-tech">Math</span>
</div>
<p class="project-description">
A Python program that helps students calculate savings goals, loan payments, and budget planning. Includes compound interest calculations and budget tracking features.
</p>
<a href="#" class="project-link">View Code →</a>
</div>
<div class="project">
<h3 class="project-title">Digital Art Portfolio</h3>
<div>
<span class="project-tech">Photoshop</span>
<span class="project-tech">HTML</span>
<span class="project-tech">CSS</span>
</div>
<p class="project-description">
An online gallery showcasing my digital artwork and design projects. Features a clean, modern design with image galleries and project descriptions.
</p>
<a href="#" class="project-link">View Gallery →</a>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="section-header">
<h2 class="section-title">Get In Touch</h2>
<p class="section-subtitle">Let's connect and collaborate</p>
</div>
<div class="section-content">
<form class="contact-form">
<div class="form-group">
<label for="name" class="form-label">Your Name:</label>
<input type="text" id="name" name="name" class="form-input" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email Address:</label>
<input type="email" id="email" name="email" class="form-input" required>
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject:</label>
<select id="subject" name="subject" class="form-select">
<option value="general">General Inquiry</option>
<option value="collaboration">Collaboration</option>
<option value="feedback">Feedback</option>
<option value="mentorship">Mentorship</option>
</select>
</div>
<div class="form-group">
<label for="message" class="form-label">Message:</label>
<textarea id="message" name="message" class="form-textarea" required></textarea>
</div>
<button type="submit" class="submit-button">Send Message</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="social-links">
<a href="#" class="social-link">GitHub</a>
<a href="#" class="social-link">LinkedIn</a>
<a href="#" class="social-link">Instagram</a>
<a href="#" class="social-link">Email</a>
</div>
<p>© 2025 Alex Johnson. All rights reserved.</p>
</footer>
</body>
</html>Advantages of Internal CSS
Everything in one file - No need to manage separate files
Quick development - Perfect for small projects or prototypes
No external dependencies - All styling is contained within the HTML
Easy to share - Send one file with both structure and styling
Disadvantages of Internal CSS
File size - HTML files become larger with extensive CSS
Not reusable - Styles can't be shared across multiple pages
Harder to maintain - For large projects, becomes difficult to manage
Mixing concerns - Structure (HTML) and presentation (CSS) in same file
Best Practices for Internal CSS
Organize your CSS - Group related styles together
Use comments - Document your CSS sections
Keep it DRY - Don't repeat yourself, use classes efficiently
Consider hierarchy - Order CSS from general to specific
Use meaningful names - Choose descriptive class and ID names
When to Use Internal CSS
Small projects - Single-page websites or simple documents
Prototyping - Quick mockups or proof of concepts
Email templates - HTML emails often require internal CSS
Learning - When starting to learn CSS basics
Embedded content - When you need self-contained HTML
Last updated