The Masthead

Welcome to Unit 3!

In Units 1 and 2 you built a structured HTML page and a styled CSS profile. Now you're combining both to build something that looks like a real publication: an online newspaper.

Every newspaper - from the New York Times to a Tribal nation newsletter - starts with a masthead. That's the header section with the newspaper's name, date, and issue number. That's what you'll build in Stage 1.

Name Your Newspaper

Before you write any code, decide on a name for your newspaper. It could be about your Tribal community, your school, your family, or anything meaningful to you.

These are just examples. Your name should feel like yours. Write it down before you start coding.

Build the HTML Structure

Start with the full page skeleton. This sets up the basic structure - body styles, page background, and the font - then adds the header HTML.

• font-family: Arial, sans-serif - sets the default font for the entire page. Arial is the first choice. sans-serif is the fallback in case a device doesn't have Arial - the browser uses the next available clean font.
• margin: 0 - removes the outer gap browsers add around the page by default. Without it, there would be a visible white gap between your masthead and the browser edge.
• padding: 0 - removes the inner gap browsers add inside the page. Together with margin: 0, these two lines give you full control over exactly where your content sits.
• background-color: #FCF6F5 - a warm off-white, like the color of old newsprint. Pure white (#ffffff) can feel cold. This soft warm tint gives the newspaper an aged, printed feel before you've written a single article.
• text-align: center - centers all text on the page by default. Individual sections can override this later where left-alignment makes more sense - like article body text.

Style the Header

Now add CSS for the header and h1. The masthead gets a bold yellow-green background - a classic newspaper accent color - and a thick bottom border to separate it from the content below.

• padding: 30px - adds generous breathing room inside the header on all four sides. More padding than the Unit 2 header (which used 20px) because a masthead is meant to command attention - it needs space to breathe.
• border-bottom: 3px solid black - draws a thick black line across the bottom of the masthead. This is a classic newspaper design convention: the bold separator between the masthead and the content below signals to the reader that two distinct zones are starting.
• background-color: #D6ED17 - a bold yellow-green. Newspaper mastheads traditionally use bright, high-contrast accent colors to make the publication name unforgettable. You can change this to any color that represents your community.
• font-size: 72px - intentionally huge. Newspaper titles are meant to be read from across a table or a newsstand. 72px is about 1 inch tall on most screens - designed to command the room.
• font-weight: bold - thickens every stroke of the letters. A bold, oversized headline is the visual equivalent of shouting the paper's name.
• margin-bottom: 20px - adds space between the big title and the date/issue line below it, so they don't crowd each other.

Add Date and Issue Number

Real newspapers show the date and issue number in the masthead. Add a .header-info div with two <h4> tags, then use Flexbox to push them to opposite sides.

• display: flex - activates Flexbox on the info bar, placing the two h4 elements side by side in a row instead of stacking them vertically.
• justify-content: space-between - pushes the two items to opposite ends: date all the way to the left, issue number all the way to the right. This is a Flexbox value that automatically creates maximum spacing between children - exactly the layout real newspapers use for their masthead info lines.
• padding: 0 20px - shorthand for zero top/bottom padding and 20px left/right padding. This insets the info line from the edges of the header so the date and issue number don't press right up against the sides.
• font-weight: normal on the h4s - browsers make all heading tags bold by default. Setting normal overrides that, making the date and issue line lighter and less visually heavy than the big h1 title above.

Make It Your Own!

• Replace [Your Newspaper Name] with your actual name
• Update the date to today's date
• Try changing the header background-color to match your Tribal nation's colors
• Try font-family: Georgia, serif on h1 for a classic newspaper look