Skip to content

Latest commit

 

History

History
99 lines (74 loc) · 2.86 KB

html-css-basics.md

File metadata and controls

99 lines (74 loc) · 2.86 KB
Raw

HTML & CSS: The Dynamic Duo of Web Creation

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the dynamic duo that powers the web. They're like Batman and Robin for websites, and together, they build the online world we know and love. Let's dive into this exciting partnership!

🎯 Setting Up Your Superhero Headquarters

  1. Environment Setup: To craft HTML and CSS wonders, you need a trusty text editor and a web browser. Choose your favorite text editor – it could be Notepad, Sublime Text, Atom, or even the mighty VS Code. For rapid deployment, try online editors like CodePen or JSFiddle.

  2. Creating an HTML Document: Open your text editor, create a new file, and give it a .html extension. The following snippet is an example of a basic HTML document. This is where your web adventure begins:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
  1. Adding Content to Your Web Universe: Inside the <body> tags, you wield the power to add headings, paragraphs, images, links, and lists. Here are a few examples:
<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<!-- This is an image -->
<img src="image.jpg" alt="An image" />

<!-- This is a link -->
<a href="https://www.example.com">Visit Example</a>

<!-- This is a list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

🎨 Styling Your Webmasterpiece

  1. Crafting a CSS Arsenal: Create a new file with a .css extension. In this file, you will define the styles for your HTML document using CSS rules. Here's a glimpse of what you can do with CSS:
/* This rule sets the color of all h1 elements to red. */

h1 {
  color: red;
}
  1. Link the CSS file to the HTML document: In the head section of your HTML document, you can tell the browser where to find your file by adding a link using the following code:
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    ...
  </head>
</html>
  1. Style the HTML document: Using CSS, you can change the font, color, background, and layout of your web page. Here are a few examples:
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

h1 {
  color: #333;
  font-size: 36px;
}

p {
  color: #666;
  font-size: 18px;
}

These rules change the font family, background color, font size, and text color of different elements on the page.

 

Now, you're ready to create web wonders with HTML and CSS, turning the ordinary into the extraordinary! ✨