Day 2 of 5

Day 2: CSS Styling — Airport Safety Notice

Welcome to Day 2! Yesterday you built the structure of a web page using HTML. Today you will make it look professional using CSS (Cascading Style Sheets). Think of CSS as painting the aircraft's livery or designing the layout of an airport terminal — it takes something functional and makes it beautiful. You will build a styled Airport Safety Notice page, learning colors, fonts, spacing, borders, layout with Flexbox, and even responsive design. By the end of today, your page will look like a real aviation safety notice board!

Step 1

Create a new HTML file for the safety notice

Concept

Just like an airport has different terminals for different purposes, web projects can have multiple HTML files. Today you will create a separate page for the Airport Safety Notice — this keeps your work organized and lets you focus on CSS styling without changing your Day 1 project.

Apply

Create a new file called "safety-notice.html" in your aviation-project folder.

Prompt

I am learning CSS styling for my aviation project. Please help me create a new HTML file called safety-notice.html. Give me a basic HTML boilerplate with a <title> that says "Airport Safety Notice". Inside the <body>, add an <h1> heading "Airport Safety Notice Board" and a <p> paragraph "Important safety information for ground crew and airport personnel." Also add a <div> with class="notice-box" containing: an <h2> with "Runway Safety", and a <ul> with three items: "Always check for incoming aircraft before crossing", "High-visibility vests required on the tarmac", "Follow ground controller instructions at all times". Keep it plain HTML — no styling yet.

Expected Result

You should have a new file safety-notice.html with a large heading, a paragraph, and a section with a subheading and a bulleted list. The page will look plain — all black text on white background. That is perfect, because we are about to add CSS styling!

Troubleshooting

• If the new file does not show in VS Code, make sure you saved it in the same folder as your index.html. Check the file explorer sidebar in VS Code.

Step 2

Create your first CSS file and link it to HTML

Concept

CSS files hold styling rules separately from your HTML — like having a painting guide in a separate manual from the aircraft operations handbook. This separation keeps your code organized. You link a CSS file to your HTML using the <link> tag inside the <head> section.

Apply

Create a new file called "style.css" in the same folder. Then link it to your HTML file.

Prompt

I have an HTML file called safety-notice.html. I want to create a separate CSS file for styling. Please help me: (1) Create a new file called style.css with a single comment at the top: /* Airport Safety Notice Styles */. (2) Tell me the exact <link> tag to add inside the <head> of safety-notice.html to connect the CSS file. Just show me the two changes — nothing else.

Expected Result

You should have two files: safety-notice.html (with a link tag in the head) and style.css (with a comment at the top). When you open the HTML file in the browser, nothing looks different yet — the CSS file is connected but has no rules.

Troubleshooting

• If CSS changes don't appear after saving, check that the href in the link tag matches the exact filename. It should be href="style.css" — case-sensitive!
• Make sure the <link> tag has rel="stylesheet" — without this, the browser does not know it is a CSS file.

Step 3

Understand CSS syntax with your first rule

Concept

CSS rules have three parts: a selector (what to style), a property (what aspect to change), and a value (what to set it to). Think of it like filling out a flight plan: "Aircraft: destination: city" becomes "selector { property: value; }" in CSS. Every rule ends with a semicolon.

Apply

Add your first CSS rule to style.css that sets the page background to light gray.

Prompt

In my style.css file, below the comment, please add a CSS rule that changes the body background color to #f5f5f5 (a very light gray). Explain to me what each part of the CSS rule does — the selector, the property, and the value. Keep it simple for a beginner.

Expected Result

When you save style.css and refresh safety-notice.html in the browser, the entire page background should change from white to a very light gray. You should see the CSS rule in style.css with body { background-color: #f5f5f5; }.

Troubleshooting

• If the background does not change, make sure both files are saved (style.css AND safety-notice.html) and the browser is refreshed.

Step 4

Change text colors with CSS

Concept

The "color" property in CSS changes text color — like choosing paint for safety signs at an airport. Different colors convey different levels of importance: dark blue for headings, red for warnings, green for safe conditions. Remember: in CSS, it is always "color" (not "colour").

Apply

Add CSS rules to change the h1 heading color to dark blue and the h2 heading color to a darker shade.

Prompt

In my style.css file, add CSS rules to: (1) Make the h1 heading dark blue with color: #1a365d. (2) Make the h2 headings a slightly lighter blue with color: #2c5282. (3) Make paragraph text dark gray with color: #333333. Add these rules below the body background rule. Use simple, readable CSS.

Expected Result

Your h1 heading should now appear in dark blue, h2 headings in medium blue, and paragraph text in dark gray. The colors should make the headings stand out more clearly from the regular text.

Troubleshooting

• If the colors don't change, check that you spelled "color" correctly — not "colour". CSS uses American English spelling.

Step 5

Add background colors to sections

Concept

The "background-color" property fills the background of an element — like painting the walls of an airport terminal in different colors for different zones. You can target specific elements using class selectors (starting with a dot, like .notice-box) to style only those elements.

Apply

Add a CSS rule to give the notice-box a bright yellow background color, like a caution sign.

Prompt

In my style.css file, add a CSS rule for the .notice-box class that sets the background color to a soft yellow: #fff9c4. This will make the safety notice stand out like a caution sign at the airport. Just add this one rule below the others.

Expected Result

The notice-box section (with the Runway Safety heading and list) should now have a soft yellow background. The rest of the page stays light gray. The yellow box should clearly stand out as an important notice area.

Troubleshooting

• If the yellow background doesn't appear, make sure you used a dot before the class name in CSS: .notice-box (not just notice-box). The dot tells CSS it is a class selector.

Step 6

Use hex color codes for precise color control

Concept

Hex color codes (like #ff0000 for red) give you precise control over colors — like tuning a radio frequency to an exact decimal. Each code has 6 characters representing red, green, and blue values. You can also use color names like "red" or "blue", but hex codes give you thousands of color choices.

Apply

Update your CSS to use hex color codes for all color properties, and add a border-left accent to the notice box.

Prompt

In my style.css, update the .notice-box rule to add: border-left: 5px solid #f59e0b; — this adds an orange left border like a warning stripe. Also add a new rule for ul li items inside .notice-box to make the bullet text color #92400e (dark amber). Show me the updated CSS.

Expected Result

Your notice box should now have a thick orange line on the left side, like a warning stripe on airport equipment. The list items inside should appear in a darker amber color. The hex codes give you precise color control.

Troubleshooting

• If colors look different than expected, hex codes are case-insensitive (#FF0000 and #ff0000 are the same). Make sure you have the # symbol at the start and exactly 6 characters.

Step 7

Change font family for a cleaner look

Concept

The "font-family" property changes the typeface of text — like choosing a display font on cockpit instruments. "Sans-serif" fonts (without decorative tails) are the standard for web pages because they are clean and easy to read on screens. You always list fallback fonts in case the first choice is not available.

Apply

Add a font-family rule to the body element to set a clean, professional typeface for the entire page.

Prompt

In my style.css, update the body rule to add: font-family: Arial, Helvetica, sans-serif; — this sets a clean sans-serif font for the whole page with fallbacks. Also add font-family: Georgia, serif; for the h1 heading to make it look more distinguished, like a formal airport document header. Show me the updated body and h1 rules.

Expected Result

All text on the page should now use the Arial font (or a similar sans-serif font). The h1 heading should use Georgia, which has small decorative tails (serifs) and looks more formal. The contrast between the two fonts creates visual interest.

Troubleshooting

• If the font doesn't change, make sure font names with spaces are wrapped in quotes: font-family: "Times New Roman", serif; — but single-word names like Arial don't need quotes.

Step 8

Adjust font sizes for visual hierarchy

Concept

The "font-size" property controls how big text appears — like adjusting the volume on a radio to the right level. Good web pages use different sizes to create a visual hierarchy: bigger text for headings, medium for subheadings, and smaller for body text. This guides the reader's eye naturally through the content.

Apply

Add font-size rules for your headings and body text to create a clear visual hierarchy.

Prompt

In my style.css, add font-size rules: h1 should be 2.5rem (large title), h2 should be 1.5rem (section heading), p and li should be 1.1rem (readable body text). The "rem" unit is relative to the browser's default font size, making it scale well. Show me the updated CSS rules.

Expected Result

Your h1 heading should be noticeably large, h2 headings should be medium-sized, and body text should be comfortable to read. The size differences create a clear visual hierarchy — readers can easily tell what is most important.

Troubleshooting

• If text sizes look wrong, make sure you included the unit: 2.5rem (not just 2.5). CSS always needs a unit for font-size — rem, px, em, or pt.

Step 9

Make text bold and center-aligned

Concept

The "font-weight" property controls how thick (bold) text appears, and "text-align" controls horizontal alignment. Bold text draws attention — like a flashing warning light. Center alignment is perfect for titles and important notices, like the airport name displayed above the terminal entrance.

Apply

Make the main title bold and center-aligned to give it a formal, official look.

Prompt

In my style.css, update the h1 rule to add: font-weight: 700; (extra bold) and text-align: center; (centered). Also add text-transform: uppercase; to make the h1 text all capitals, like an official airport sign. Show me the updated h1 rule.

Expected Result

Your main heading should now be bold, centered on the page, and displayed in all capital letters. It should look like an official airport notice board header.

Troubleshooting

• If text-align doesn't seem to work on an element, make sure the element is a block-level element (like h1, p, div). Inline elements like <span> don't respond to text-align the same way.

Step 10

Add padding inside elements

Concept

Padding is the space between the content and the edge of its container — like cushioning inside a shipping box that protects the contents. Without padding, text touches the edges of its background, which looks cramped. Adding padding gives the content room to breathe.

Apply

Add padding to the notice-box so the text inside doesn't touch the edges of the yellow background.

Prompt

In my style.css, update the .notice-box rule to add: padding: 20px; — this adds 20 pixels of space on all sides inside the box. The text should no longer touch the edges of the yellow background. Show me the updated rule.

Expected Result

The notice-box should now have comfortable space between the text and the yellow background edges. The content looks less cramped and more professional, like a well-designed safety poster.

Troubleshooting

• If padding doesn't appear to work, check the spelling: padding (not "pading" or "padding:"). Also make sure there is a semicolon after the value.

Step 11

Add margins between elements

Concept

Margin is the space outside an element — like the clearance distance between aircraft parked at a gate. While padding pushes content inward from the border, margin pushes the entire element away from its neighbors. Margins create visual separation between sections.

Apply

Add margins to create breathing room between the heading, paragraph, and notice box.

Prompt

In my style.css, add: margin-bottom: 10px; to the h1 rule so there is space below the main heading. Add margin-top: 30px; to the .notice-box rule to push it down from the paragraph above. This creates visual breathing room between sections, like the space between different gates at an airport. Show me the updates.

Expected Result

There should now be clear space between the heading and the paragraph, and between the paragraph and the notice box. The sections no longer feel cramped together.

Troubleshooting

• If two margins seem to collapse into one (less space than expected), this is called "margin collapsing." It happens when vertical margins of adjacent elements overlap. Using padding instead of margin on one element avoids this.

Step 12

Understand the CSS box model

Concept

Every HTML element is a rectangular box with four layers: content (the text), padding (space inside), border (the edge), and margin (space outside). Think of it like layers of an aircraft fuselage — the inner cabin, the insulation, the hull, and the external clearance. Understanding this box model is key to controlling layout in CSS.

Apply

Experiment with different padding and margin values to see how the box model works.

Prompt

Please explain the CSS box model to me in simple terms with an aviation analogy. Show me a CSS example using the .notice-box that demonstrates all four parts: a rule with padding: 20px, border: 3px solid #f59e0b, and margin: 20px. Tell me which part is the content, padding, border, and margin. I want to really understand how they layer together.

Expected Result

You should understand that the total size of an element = content + padding + border + margin. Gemini should explain this with the analogy and show how each layer adds space around the content.

Troubleshooting

• If the box seems bigger than expected, remember that padding and border add to the total size. CSS box-sizing: border-box can make padding and border included in the width, which is often easier to work with.

Step 13

Use shorthand padding and margin

Concept

CSS shorthand lets you set all four sides in one line, reading clockwise: top, right, bottom, left — like reading a compass (North, East, South, West). "padding: 10px 20px 10px 20px" sets different values for each side. When top/bottom match and left/right match, you can use just two values: "padding: 10px 20px".

Apply

Rewrite your padding and margin rules using shorthand notation.

Prompt

In my style.css, update the .notice-box padding to use shorthand: padding: 20px 30px; — this means 20px top/bottom and 30px left/right. Also update any other padding or margin rules to use shorthand notation where possible. Explain the shorthand pattern to me: 4 values = top right bottom left, 2 values = top/bottom left/right, 1 value = all sides.

Expected Result

Your CSS should now use cleaner shorthand notation. The visual result should be the same or very similar, but the code is shorter and easier to read. You understand the clockwise pattern.

Troubleshooting

• If spacing looks wrong after using shorthand, count your values: 1 value = all sides, 2 values = top/bottom then left/right, 3 values = top then left/right then bottom, 4 values = top right bottom left (clockwise).

Step 14

Add borders to elements

Concept

Borders outline elements visually — like safety markings painted on the tarmac to define zones. The "border" property needs three parts: width (how thick), style (solid, dashed, dotted), and color. A "solid" border is a continuous line, "dashed" has breaks, and "dotted" uses dots.

Apply

Add a visible border around the notice-box and the table.

Prompt

In my style.css, I have already added border-left to the .notice-box. Now also add a full border around the entire notice box: border: 2px solid #d97706; (orange border). Add a new rule for h2 to give it a bottom border: border-bottom: 2px solid #d97706; padding-bottom: 10px; — this underlines section headings. Show me the updates.

Expected Result

The notice box should now have a complete orange border around all sides, plus the thick left border we added earlier. Each h2 heading should have an orange underline, creating a clear visual divider.

Troubleshooting

• If the border doesn't show, make sure you included the style part: border-style must be set (solid, dashed, dotted). Just setting border-width without a style means no border appears.

Step 15

Add rounded corners with border-radius

Concept

The "border-radius" property rounds the corners of an element — like the curved edges of a modern airport terminal. Sharp corners look harsh, while rounded corners feel softer and more modern. Even a small radius like 8px makes a big difference.

Apply

Add rounded corners to the notice-box to give it a softer, more modern look.

Prompt

In my style.css, update the .notice-box rule to add: border-radius: 10px; — this rounds all four corners. This gives the safety notice box a softer, more professional appearance, like a modern information kiosk at the airport. Show me the updated rule.

Expected Result

The notice box should now have smoothly rounded corners instead of sharp 90-degree angles. It should look more polished and modern.

Troubleshooting

• If border-radius doesn't show, it only works on elements with visible backgrounds or borders. An element with no background and no border will not show rounded corners.

Step 16

Customize border width and color for emphasis

Concept

You can customize border thickness and color to create visual emphasis — like how runway markings use different widths and colors to signal different levels of caution. A thick red border says "urgent", a thin gray border says "subtle outline".

Apply

Make the notice-box border thicker and use a warning color to draw attention.

Prompt

In my style.css, update the .notice-box border to be thicker and more warning-like: change the border to 3px solid #dc2626 (red) to make it look like an urgent safety warning. Keep the border-left as 6px solid #f59e0b (thick orange left accent). The combination of red border and orange left stripe creates a strong safety warning look. Show me the full updated .notice-box rule.

Expected Result

The notice box should now have a red border that commands attention, with a thicker orange stripe on the left. It should look like an important safety warning — impossible to miss.

Troubleshooting

• If both borders don't show correctly, remember that border-left and border can coexist. The border sets all sides, then border-left overrides just the left side.

Step 17

Create multiple safety notice cards with Flexbox

Concept

Flexbox is a CSS layout system that arranges elements in a row or column — like aligning aircraft at boarding gates in a neat line. "display: flex" on a container makes its children line up horizontally by default. This is perfect for creating card layouts where multiple notice boxes sit side by side.

Apply

Add more safety notice sections and use Flexbox to arrange them in a row.

Prompt

I want to add more safety notice cards and arrange them in a row. First, in my safety-notice.html, wrap the existing notice-box in a new <div class="card-container">. Then add two more notice-box divs inside the card-container: one about "Ground Handling Safety" (with items: "Use proper lifting techniques", "Wear steel-toed boots", "Report spills immediately") and one about "Emergency Procedures" (with items: "Know your evacuation route", "Locate nearest fire extinguisher", "Memorize emergency frequency 121.5 MHz"). Then in style.css, add a rule for .card-container with display: flex; gap: 20px; to arrange the cards in a row. Give each .notice-box a width: 300px so they are evenly sized. Show me both the updated HTML and CSS.

Expected Result

You should see three safety notice cards arranged side by side in a row, each with the same yellow background and orange/red borders. There should be a 20px gap between the cards. This is Flexbox in action!

Troubleshooting

• If cards stack vertically instead of in a row, make sure the parent container has display: flex. Without it, divs stack on top of each other by default.

Step 18

Space and align Flexbox items

Concept

"justify-content" controls how flex items are distributed along the main axis (like air traffic control directing planes to their proper positions). "align-items" controls alignment on the cross axis (perpendicular). Common values: "space-between" spreads items evenly, "center" groups them in the middle, "flex-start" aligns them to the start.

Apply

Use justify-content to evenly space the three safety notice cards.

Prompt

In my style.css, update the .card-container rule to add: justify-content: space-between; and align-items: flex-start;. This distributes the cards evenly across the row and aligns them to the top. Also update the .notice-box width to flex: 1; instead of a fixed width, so the cards share the available space equally. Explain what justify-content and align-items do. Show me the updated CSS.

Expected Result

The three cards should now be evenly spaced across the page, filling the available width. They should all be aligned to the top and share equal space.

Troubleshooting

• If cards don't space correctly, check that display: flex is on the parent container (.card-container), not on the cards themselves. Flex properties only work on flex containers.

Step 19

Make cards wrap to new rows with flex-wrap

Concept

"flex-wrap: wrap" allows items to flow to the next line when there is not enough space — like overflow parking when the main lot is full. Without it, items squeeze into a single row. With it, items move naturally to a second row when the screen is too narrow.

Apply

Add flex-wrap so the cards flow to multiple rows on narrow screens.

Prompt

In my style.css, update the .card-container rule to add: flex-wrap: wrap;. Also change flex: 1 on .notice-box to a fixed width: flex: 0 0 calc(33.333% - 14px); — this makes each card take up about one-third of the space with gaps accounted for. Explain what flex-wrap does and why it is useful. Show me the updated CSS.

Expected Result

When you resize the browser window to be narrower, the three cards should no longer squeeze into one row. Instead, one or more cards should wrap to a second row. Try resizing the browser window to see the effect.

Troubleshooting

• If wrapping doesn't work, make sure flex-wrap: wrap is set (the default is flex-wrap: nowrap). Also check that the card widths add up to more than 100% of the container.

Step 20

Add the viewport meta tag for responsive design

Concept

Responsive design means your page looks good on any screen size — from a large desktop monitor to a small phone screen, like how aircraft adjust their approach for different runway lengths. The viewport meta tag tells mobile browsers to display the page at the correct width. Without it, mobile browsers zoom out to show the full desktop layout, making text tiny.

Apply

Add the viewport meta tag to your HTML file's head section.

Prompt

In my safety-notice.html file, add this meta tag inside the <head> section (before the <link> tag): <meta name="viewport" content="width=device-width, initial-scale=1.0">. Explain why this tag is important for making the page look good on mobile phones. Just show me the one line to add and where.

Expected Result

The viewport meta tag should be in the head section of your HTML. On a mobile device (or using browser dev tools mobile simulation), the page should now display at the correct size instead of being zoomed out.

Troubleshooting

• You cannot easily test responsive design on a desktop just by resizing the browser. Use browser developer tools: press F12, then click the phone icon to toggle device mode.

Step 21

Use CSS media queries for mobile-friendly layout

Concept

Media queries apply different CSS rules at different screen widths — like air traffic control changing procedures based on weather conditions. When the screen is wider than 768px, show the cards in a row. When it is narrower, stack them vertically. This is the key technique for responsive web design.

Apply

Add a media query that stacks the cards vertically on screens narrower than 768px.

Prompt

In my style.css, at the bottom of the file, add a media query that changes the layout for small screens: @media (max-width: 768px) { .card-container { flex-direction: column; } .notice-box { flex: 0 0 100%; } }. This makes the cards stack vertically on screens narrower than 768 pixels, like a single-file line of aircraft on a narrow taxiway. Also reduce the h1 font-size to 1.8rem inside the media query so it fits smaller screens. Explain how media queries work. Show me the complete media query block.

Expected Result

When you resize your browser window to be narrower than 768px (or use mobile simulation in dev tools), the three cards should stack vertically — one on top of the other. On wider screens, they should remain side by side.

Troubleshooting

• If the media query doesn't seem to work, check that it is at the bottom of the CSS file — later rules override earlier ones. Also check the syntax: the rules must be inside the curly braces after @media (max-width: 768px).

Step 22

Final polish — review the complete styled page

Concept

Just like a final walk-around inspection before a flight, reviewing your styled page helps catch small issues. Check that colors are consistent, spacing is even, text is readable, and the layout works on both desktop and mobile. Small tweaks at this stage make a big difference in the final result.

Apply

Review your complete styled page and ask Gemini for final improvement suggestions.

Prompt

Here is my complete styled Airport Safety Notice page. Please review both my HTML (safety-notice.html) and CSS (style.css) and suggest: (1) Any visual improvements I should make (colors, spacing, fonts). (2) Any CSS best practices I should follow. (3) Any responsive design issues you notice. Be encouraging — I am a beginner! [Paste your safety-notice.html code here] [Paste your style.css code here]

Expected Result

Gemini should provide helpful feedback on your styled page. Apply any small fixes that make sense. Your page should now look like a professional airport safety notice board that works on both desktop and mobile devices.

Troubleshooting

• Common final issues: text too small on mobile (increase font sizes in the media query), cards too close together (increase gap), colors that don't contrast well (check with a contrast checker tool).