WEBZ COURSE
Module 1: Introduction to HTML & CSS
Welcome to the World of HTML & CSS!
Greetings, future web designers! You're about to embark on a journey through the realms of HTML and CSS. By the end of this module, you’ll be thinking in tags and selectors!
Why HTML & CSS?
HTML is the skeleton of a webpage, giving it structure, while CSS is the skin, dressing it up to look pretty. Without HTML and CSS, the web would be as exciting as a soggy piece of toast.
Course Overview
HTML Basics
- What is HTML?
- Understanding HTML tags and elements
- Creating your first HTML document
- Structuring content with headings, paragraphs, lists, and links
CSS Basics
- What is CSS?
- The role of CSS in web design
- Linking CSS to your HTML
- Basic selectors, properties, and values
- Adding styles to text and layouts
Building a Simple Webpage
- Combining HTML and CSS
- Creating a basic webpage layout
- Adding styles to make it look good
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages, describing the structure of a webpage using markup tags.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: The root element of an HTML page.<head>: Contains meta-information about the HTML document (e.g., title, character set).<meta charset="UTF-8">: Specifies the character encoding.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and zooming on mobile devices.<title>: The title of the document displayed in the browser tab.<body>: Contains the visible content of the webpage.
Common HTML Tags:
<h1>to<h6>: Headings,<h1>being the highest and<h6>the lowest.<p>: Paragraph.<a>: Anchor (used for links).<img>: Image.<ul>,<ol>,<li>: Lists (unordered, ordered, and list items).<div>: Division or section in a document.<span>: Inline container for text.
What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance of HTML elements.
Basic CSS Syntax
CSS is made up of selectors and declaration blocks.
selector {
property: value;
property: value;
}
Example:
body {
background-color: lightblue;
}
How to Include CSS in HTML
1. Inline CSS: Directly in the HTML element.
How to Include CSS in HTML
There are three primary ways to include CSS in your HTML document: Inline, Internal, and External. Let's explore each:
1. Inline CSS
Inline CSS is applied directly within the HTML element using the style attribute.
<h1 style="color: blue;">This is a blue heading</h1>While convenient for small, quick changes, inline CSS is not recommended for larger projects as it can clutter your HTML and make your code harder to maintain.
2. Internal CSS
Internal CSS is written inside a <style> tag within the <head> section of your HTML document. This is useful when you want to style a single webpage.
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
3. External CSS
External CSS is the most recommended method, especially for larger websites. The CSS rules are stored in a separate file, which is then linked to the HTML document. This allows you to apply styles across multiple pages efficiently.
<head>
<link rel="stylesheet" href="styles.css">
</head>
The href attribute specifies the path to the external CSS file. With this method, any changes made to the external CSS file will affect all HTML files linked to it.
Advantages of External CSS
- Easier to maintain and update your styles across multiple pages.
- Improves page load times since the CSS file is cached by the browser.
- Keeps your HTML cleaner and more organized.
Project Challenge: Create Your First Styled Webpage
Now that you've learned about HTML and CSS, it's time to put your skills to the test! Create a simple webpage that showcases your hobbies or interests, and apply the following styles:
- Use an external CSS file to style your page.
- Apply different font colors to headings and paragraphs.
- Use a background color for the body of the webpage.
- Include at least one image and use CSS to control its size and positioning.
Share your project with us and get feedback from the NiLBiTE™ community!
About the Instructor
Meet our lead instructor, John Becker, a seasoned web developer with over a decade of experience in building websites and teaching coding. His friendly, approachable style makes learning web development fun and engaging. You'll enjoy working with John as you learn the foundational skills needed to become a successful web developer!