Welcome to the HTML CSS tutorial! In this comprehensive guide, we'll explore the foundations of web development, focusing on HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). By the end of this lesson, you'll be well-equipped to create your own stunning web pages! šÆ
HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure and content for web pages, and it's what allows you to organize text, images, links, and videos on a webpage.
HTML uses tags to define different parts of a webpage. Here's a simple example of HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage!</h1>
<p>This is a paragraph.</p>
<a href="https://www.codeyourcraft.com">Visit CodeYourCraft</a>
</body>
</html>In this example, <!DOCTYPE html> declares that the document is an HTML5 document. The <html> tag wraps the entire webpage. The <head> section contains metadata about the document, such as character encoding and title. The <body> section contains the actual content of the webpage.
š Tip: Always include a <title> tag to provide a title for your webpage, as it appears in the browser tab.
CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML. It allows you to customize the layout, colors, fonts, and more of your web pages.
To apply CSS to an HTML document, you can either include it within the HTML file or link to an external CSS file. Here's an example of inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>Welcome to My First Webpage!</h1>
<p>This is a paragraph.</p>
</body>
</html>In this example, the CSS is included within a <style> tag in the <head> section. The body selector applies styles to the entire webpage, while the h1 selector applies styles only to the <h1> heading.
š Note: CSS properties are usually followed by a colon (:) and a value.
Now that you've learned the basics, let's get creative! Here's an example of a more complex webpage using HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
</header>
<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<section id="projects">
<!-- List of projects here -->
</section>
<section id="skills">
<!-- List of skills here -->
</section>
<section id="about">
<!-- Information about me here -->
</section>
</main>
<footer>
<!-- Footer content here -->
</footer>
</body>
</html>In this example, we have a more complex structure using an external CSS file (styles.css). We also have a header, navigation, main content, and footer sections, which are common elements in many websites.
What does HTML do?
What is CSS?
In this tutorial, you learned the basics of HTML and CSS, two essential technologies for creating web pages. You now know how to structure a webpage using HTML tags, and how to style that webpage using CSS properties. With this foundation, you're ready to start creating your own amazing web projects! š
š” Pro Tip: Don't be afraid to experiment with HTML and CSS. The more you practice, the better you'll become! š
š Note: For more advanced HTML and CSS concepts, be sure to check out additional tutorials on CodeYourCraft. Happy coding! š