/* ============================================================ style.css — the ONE stylesheet shared by every page ------------------------------------------------------------ How CSS works: each rule has a SELECTOR (who it applies to) and a block of PROPERTY: VALUE; pairs (what to change). Example: h1 { color: red; } └┬┘ └────┬─────┘ selector declaration Selectors you'll see in this file: body = an HTML tag name (applies to every ) .infobox = a CLASS (applies to any tag with class="infobox") ============================================================ */ /* ---- 1. The whole page ------------------------------------ */ body { margin: 0; /* remove the browser's default gap around the page */ background-color: #e9e9e9; /* light gray behind everything (colors are hex codes: #RRGGBB) */ font-family: Verdana, Arial, sans-serif; /* a list: browser uses the first font it has */ font-size: 15px; line-height: 1.6; /* space between lines: 1.6x the font size, easier to read */ color: #222222; /* near-black text (pure black is harsh on the eyes) */ } /* ---- 2. The green site header ------------------------------ */ header { background-color: #3c8527; /* Minecraft grass green */ border-bottom: 4px solid #2a5e1b; /* darker green strip = a chunky, blocky edge */ padding: 12px 20px; /* space INSIDE the box: 12px top/bottom, 20px left/right */ } /* "header h1" means: an h1 that is INSIDE the header (a nested selector) */ header h1 { color: white; margin: 0; /* margin = space OUTSIDE a box; 0 keeps the header tight */ font-size: 26px; } header h1 a { color: white; /* links are blue by default; make this one white... */ text-decoration: none; /* ...and remove the underline */ } /* ---- 3. The navigation bar ---------------------------------- */ nav { background-color: #000000; /* same dark green as the header's bottom edge 2a5e1b*/ padding: 8px 20px; } nav a { color: white; text-decoration: none; margin-right: 18px; /* pushes the links apart from each other */ font-weight: bold; } nav a:hover { /* :hover = only while the mouse is over the link */ text-decoration: underline; } /* ---- 4. The main content area ------------------------------- */ main { max-width: 960px; /* never wider than 960px, so lines stay readable */ margin: 20px auto; /* "auto" left/right margins = center it on the page */ background-color: white; border: 1px solid #c8c8c8; padding: 20px 30px; } /* Headings inside the content get a green underline, like wiki section titles */ main h2 { border-bottom: 2px solid #3c8527; padding-bottom: 4px; } main a { color: #2a5e1b; /* wiki-style green links */ } img { max-width: 100%; /* a screenshot can never overflow its container */ border: 1px solid #c8c8c8; } /* ---- 5. The infobox (the wiki's signature element) ---------- On minecraft.wiki every mob/block page has a box in the top right with a picture and quick stats. "float: right" pulls the box to the right and lets the article text wrap around it. -------------------------------------------------------------- */ .infobox { float: right; width: 260px; margin: 0 0 15px 20px; /* shorthand: top right bottom left (clockwise!) */ border: 2px solid #3c8527; background-color: #f3f9f0; /* very pale green */ padding: 10px; font-size: 13px; } .infobox h3 { margin: 0 0 8px 0; text-align: center; background-color: #3c8527; color: white; padding: 6px; } /* The stats inside the infobox are a small table */ .infobox table { width: 100%; border-collapse: collapse; /* merge the gaps between table cells */ } .infobox td { padding: 4px 6px; border-bottom: 1px solid #cfe3c8; vertical-align: top; } /* "td:first-child" = the FIRST cell in each row, i.e. the label column */ .infobox td:first-child { font-weight: bold; width: 40%; } /* ---- 6. News posts on the homepage --------------------------- */ .news-post { border-bottom: 1px solid #c8c8c8; /* a divider line after each post */ margin-bottom: 20px; padding-bottom: 10px; } .post-date { color: #777777; /* gray, smaller = clearly "metadata", not content */ font-size: 13px; } /* ---- 7. The footer ------------------------------------------- */ footer { max-width: 960px; margin: 0 auto 20px auto; /* centered, with a gap below */ padding: 10px 30px; color: #777777; font-size: 13px; text-align: center; }