Member Avatar for narsimhareddy

hi.... how to design webpage by using css give the exaple of with source code

  • 4 Contributors
  • 3 Replies
  • 133 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by TimCadieux

Dani AI

Generated

A compact, practical starter that builds on the resource suggestions by , , and . The single-file demo below shows a semantic, responsive layout using modern CSS (flexbox) and a few defensive patterns. Read the short notes after the example for quick troubleshooting and next steps.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Simple CSS layout</title>
  <style>
    /* reset + sensible box model */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; line-height: 1.4; color: #222; padding: 20px; }
    .site { max-width: 900px; margin: 0 auto; border: 1px solid #ddd; }
    header, footer { background: #f4f4f4; padding: 16px; }
    nav { background: #333; }
    nav ul { display: flex; list-style: none; }
    nav a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; }
    .wrap { display: flex; gap: 20px; padding: 16px; }
    main { flex: 1; min-width: 0; }
    aside { width: 240px; background: #fafafa; padding: 12px; }
    @media (max-width: 700px) {
      .wrap { flex-direction: column; }
      nav ul { flex-direction: column; }
      aside { width: auto; }
    }
  </style>
</head>
<body>
  <div class="site">
    <header><h1>Site Title</h1></header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="wrap">
      <main>
        <h2>Article</h2>
        <p>Editable demo content.</p>
      </main>
      <aside><h3>Sidebar</h3></aside>
    </div>
    <footer>Footer info</footer>
  </div>
</body>
</html>

Notes and quick troubleshooting:

  • box-sizing: border-box avoids surprises when adding padding.
  • min-width: 0 on flex children prevents long content from forcing overflow.
  • Use semantic tags (header, nav, main, aside, footer) for accessibility and easier styling.
  • If layout breaks, check DevTools: computed styles, default list margins, and whether an element is still using display: block or has unexpected width.
  • Start small, inspect examples as suggested, and modify one rule at a time rather than copying whole templates blindly.

For broader reference and deeper explanations, consult the documentation at MDN: Learn CSS.

Recommended Answers

All 3 Replies

Member Avatar for ericfox

According to me you have to visit w3school.com for all trutorial, and then you get many example related CSS.

Member Avatar for TimCadieux

There are tonnes of Free CSS resources, pick one with a simple design, look at the HTML and then look into the CSS files to see how they work together. Get your hands dirty.

http://designfestival.com/

http://www.maxdesign.com.au/articles/css-layouts/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.