What are HTML & CSS?
HTML (HyperText Markup Language) creates the structure and content of web pages.
CSS (Cascading Style Sheets) controls the presentation and layout of HTML elements.
🔑 Key Concept: HTML is for content and structure, CSS is for presentation and style.
How They Work Together
<h1 class="title">Welcome to Web Development</h1>
<p id="intro">This is an introduction paragraph.</p>
.title {
color: #4a6fa5;
font-size: 24px;
}
#intro {
margin: 20px 0;
}
HTML Basics
HTML documents are made up of elements, each with opening and closing tags.
<tagname>Content goes here</tagname>
🔑 Key Concept: HTML elements can be nested inside each other to create a hierarchical structure.
Essential HTML Elements
- <html> - The root element
- <head> - Contains meta-information
- <body> - Contains the visible content
- <h1> to <h6> - Headings
- <p> - Paragraphs
- <div> - Container element
- <span> - Inline container
- <a> - Links
- <img> - Images
- <ul>, <ol>, <li> - Lists
HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
CSS Basics
CSS consists of selectors and declaration blocks:
selector {
property: value;
another-property: another-value;
}
🔑 Key Concept: CSS can be included inline, internally in a <style> tag, or externally via a .css file.
CSS Selectors
- Element selector: p { }
- Class selector: .classname { }
- ID selector: #idname { }
- Descendant selector: div p { }
- Child selector: div > p { }
- Pseudo-classes: a:hover { }
Common CSS Properties
color: blue;
background-color: #f0f0f0;
font-size: 16px;
font-family: Arial, sans-serif;
margin: 10px;
padding: 20px;
border: 1px solid black;
width: 300px;
The CSS Box Model
Every element is a box with:
- Content - The actual content
- Padding - Space around the content
- Border - A line around the padding
- Margin - Space outside the border
Try It Yourself!
See how HTML and CSS work together in this interactive example:
<div class="card">
<h2 class="card-title">Web Development</h2>
<p class="card-text">HTML and CSS are the foundation of web development.</p>
<button class="card-button">Learn More</button>
</div>
.card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
}
.card-title {
color: #4a6fa5;
margin-top: 0;
}
.card-text {
color: #666666;
}
.card-button {
background-color: #4a6fa5;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
Next Steps
Ready to continue your web development journey? Here's what to learn next:
- More advanced HTML tags and attributes
- CSS layouts and positioning
- Responsive design with media queries
- JavaScript for interactive web pages