Styles.css usage guide

body

Sets the global font, size, and background. Every page uses this automatically.

#container

The main centered column. Wrap all visible page content inside this div. It applies the semi-transparent background housing the container.

<div id="container">
    <!-- all page content goes here -->
</div>

#sidebar, .sidebar and #main

Use these for a two-column layout. Place sidebars before #main in the HTML so they float correctly. Use id="sidebar" for the first one, then class="sidebar" for any additional sidebars — they will stack down the right side automatically.

<div id="content">
    <div id="sidebar">
        <div class="sidebar-box">
            <div class="sidebar-box-title">Links</div>
            content here
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-box">
            <div class="sidebar-box-title">More Links</div>
            content here
        </div>
    </div>
    <div id="main">
        main content here
    </div>
</div>

#header

The top banner area. Place your site logo image inside it. The background tiles main_1.gif horizontally.

<div id="header">
    <img src="your-logo.gif" alt="Site Logo">
</div>

#menu

The navigation bar directly below the header. 25px tall, uses main_22.png for its background. Put an unordered list of links inside it.

<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="downloads.html">MSAgent</a></li>
        <li><a href="contact.html">About</a></li>
    </ul>
</div>

#content

The main content wrapper. Provides 20px top/bottom padding. Place post divs, grids, and flash containers inside here.

<div id="content">
    <!-- posts, grids, flash, etc. -->
</div>

.post, .post-title, .post-meta, .post-content

For blog-style news posts. Each post is separated by a border.

<div class="post">
    <div class="post-title">News Post Title</div>
    <div class="post-meta">Posted by Yoshi50Windows | June 7, 2026</div>
    <div class="post-content">
        Post text goes here.
    </div>
</div>

.section-header

A header bar for separating content sections within a page.

<div class="section-header">Latest Downloads</div>

.flash-container

Fixed 729x249px container for embedded Flash (.swf) objects.

<div class="flash-container">
    <object width="729" height="249" data="animation.swf">
        <param name="movie" value="animation.swf">
    </object>
</div>

.DownloadButton

A small button used for download links next to game/file listings.

<a href="file.zip" class="DownloadButton">Download</a>

.button (grid button)

Square navigation buttons for use inside a .grid. Each button has a 1:1 aspect ratio and can contain an image icon and a text label.

<div class="grid">
    <a href="games.html" class="button">
        <img src="icon-games.png" alt="">
        <span>Games</span>
    </a>
    <a href="music.html" class="button">
        <img src="icon-music.png" alt="">
        <span>Music</span>
    </a>
</div>

.game-grid and .game-item

A 3-column grid for displaying thumbnails with names and download buttons. Each cell is a .game-item with a centered image, title text, and a .DownloadButton.

<div class="game-grid">
    <div class="game-item">
        <img src="thumb-game1.png" alt="Game 1">
        <p>Game Title</p>
        <a href="game1.zip" class="DownloadButton">Download</a>
    </div>
    <!-- repeat for more games -->
</div>

.grid

The same 3-column CSS grid but designed for .button elements (square navigation tiles). Gap is 15px between cells.

<div class="grid">
    <a href="#" class="button">...</a>
    <a href="#" class="button">...</a>
    <a href="#" class="button">...</a>
</div>

.notice

A yellow info box for site announcements or important notes.

<div class="notice">
    Site will be down for maintenance on Saturday!
</div>

.error

A red error box. Use when something went wrong or a page is unavailable.

<div class="error">
    File not found. Please check the link and try again.
</div>

Headings (h1-h6)

All headings are normalized to 14px bold with 10px bottom margin. Use them for section sub-titles within #content.

<h2>Downloads Section</h2>

a (links)

All links are black with no underline. They turn red on hover.

Footer links (#footer a) are #aaaaaa and turn white on hover, since the footer has a dark background.

p, ul, ol

Paragraphs have 8px bottom margin. Lists have 10px bottom margin and 20px left padding. These are automatically applied to any <p>, <ul>, or <ol> inside the page.

table, td, th

Tables use border-collapse: collapse and 3px vertical / 6px horizontal cell padding. No default borders are set - add your own with inline styles or additional classes.

#footer

Dark gray bottom bar, 20px top margin, centered white 12px text. Footer links are gray and turn white on hover.

<div id="footer">
    © 2009 Yoshi50Windows.net | <a href="sitemap.html">Sitemap</a> | <a href="contact.html">Contact</a>
</div>

.clearfix

Clears floated children (primarily #sidebar) so the parent container wraps them correctly. Apply to the parent div that wraps both #sidebar and #main.

<div class="clearfix">
    <div id="sidebar">...</div>
    <div id="main">...</div>
</div>

img border reset

All images have border: 0 applied globally. This removes the default blue border that older browsers add around linked images.

A minimal page using all major structural elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yoshi50Windows.net</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="https://yoshi50windowsnet.neocities.org/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="container">
    <div id="header">
        <img src="logo.png" alt="Logo">
    </div>
    <div id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="games.html">Games</a></li>
            <li><a href="msagent.html">MSAgent</a></li>
            <li><a href="contact.html">About</a></li>
        </ul>
    </div>
    <div id="content">
        <div class="clearfix">
    <div id="sidebar">
        <div class="sidebar-box">
            <div class="sidebar-box-title">Links</div>
            <li><a href="https://linktr.ee/yoshi50windows">linktr.ee</a></li>
            <li><a href="https://www.youtube.com/@Yoshi50Windows">Main YouTube channel (in Portuguese)</a></li>
            <li><a href="https://youtube.com/@Yoshi50Agent">MSAgent channel</a></li>
            <li><a href="https://youtube.com/@YoshiGMF">English gameplay channel</a></li>
            <li><a href="https://x.com/Yoshi50Windows">Twitter/X</a></li>
        </div>
    </div>

    <div class="sidebar">
        <div class="sidebar-box">
            <div class="sidebar-box-title">Reccomended/affiliated websites</div>
            <li><a href="https://imaginationland.miraheze.org">ImagiMedia Wiki</a></li>
            <li><a href="https://frojoapps.miraheze.org/wiki/">Frojopedia</a></li>
            <li><a href="https://poupedia.com/">Poupedia</a></li>
            <li><a href="https://tmafe.com">TMAFE</a></li>
            <li><a href="https://forums.tmafe.com">Microsoft Agent Forums</a></li>
            <li><a href="https://agentpedia.tmafe.com">Agentpedia</a></li>
            <li><a href="https://ring.tmafe.com">Microsoft Agent Frontier Ring</a></li>
        </div>
    </div>
            <div id="main">
            <center><div class="notice">
                 The site isn't complete yet! (to be expected)
                 </div>
                <p>Hello and welcome to my website!</p>
                <p>Here you can find my stuffs and thingamabobs, including games, Microsoft Agent content, and other stuff.</p>
            </center></div>
        </div>
    </div>
    <div id="footer">
        &copy; 2026 Yoshi50Windows. All intellectual property belongs to their respective owners. | <a href="about.html#contact">Contact</a>
    </div>
</div>
</body>
</html>