Using HTML and CSS

Using HTML and CSS together allows you to create visually appealing and well-structured web pages. HTML defines the structure and content of the page, while CSS controls the presentation and styling.

HTML is responsible for organizing the elements of a webpage, such as headings, paragraphs, lists, images, and links. CSS, on the other hand, enables you to customize the appearance of these elements by setting properties like colors, fonts, margins, and layouts. By combining HTML and CSS, you can create engaging and user-friendly websites with consistent design and layout across multiple pages.

Using HTML And CSS

First Step bevore starting : use our free live html editor to test the code
Step 2 : In the HTML Code area add the provided basic structure.
Step 3 : In the CSS Code Area Add the provided CSS code.


<!DOCTYPE html>
<html>
<head>
 <title>Beginner's Tutorial</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to the Beginner's Tutorial</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>
  <section>
    <h2>About Us</h2>
    <p>This is a beginner's tutorial on using HTML and CSS.</p>
  </section>
  <footer>
    <p>© 2023 Beginner's Tutorial. All rights reserved.</p>
  </footer>
</body>
</html>


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

Explanation :

HTML

The HTML file starts with the <!DOCTYPE html> declaration, indicating the document type.
Inside the <html> element, we have the <head> section where we set the page title and link the CSS file.
The <body> section contains the main content of the web page.
We have a <header> element for the page header, containing a heading (<h1>) with the tutorial title.
The <nav> element represents the navigation section and contains an unordered list (<ul>) with navigation links (<li>) wrapped in anchor tags (<a>).
A <section> element is used to define a section of content. Here, we have a heading (<h2>) and a paragraph (<p>) for the "About Us" section.
The <footer> element contains the copyright information.

CSS

The CSS file starts with styling the body element by setting the font family, margin, and padding.
The header style defines the background color, text color, and padding for the page header.
Styles for the navigation (nav) are specified, including removing the default list styles (list-style: none), removing margins and padding, and displaying the list items inline.
Anchor tags (<a>) within list items are styled by removing text decoration and setting the text color.
The section style sets padding to create space around the content section.
The footer style defines the background color, text color, padding, and centers the text.

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor