← BackGrades 7-8 | Chapter 3: Building the Web

CSS Styling & Design 🎨

Making Websites Beautiful

Session 8: CSS Fundamentals

What Is CSS? 🎨

CSS (Cascading Style Sheets) controls the appearance of websites. HTML is structure, CSS is beauty!

CSS Controls:

  • Colors (text and backgrounds)
  • Fonts and text size
  • Spacing (margins, padding)
  • Borders and shadows
  • Layouts and positioning
  • Animations and effects

Comparison: HTML = skeleton, CSS = skin, hair, clothes!

Three Ways to Use CSS 📝

Method 1: Inline Styles

<h1 style="color: blue;">Blue Heading</h1>

Method 2: Style Tag (in head)

<style>
h1 { color: blue; }
</style>

Method 3: External CSS File (best!)

<link rel="stylesheet" href="style.css">

CSS Syntax 🔧

CSS has a simple structure: selector { property: value; }

Example:

p { color: blue; }

p = selector (which HTML elements)
color = property (what to change)
blue = value (what to change it to)

Common CSS Properties 🎯

Text Properties:

color: red;
font-size: 24px;
font-family: Arial;
text-align: center;

Box Properties:

background-color: yellow;
border: 2px solid black;
padding: 20px;
margin: 10px;

Colors in CSS 🌈

Specify colors in three ways:

Color Methods:

  • Color names: red, blue, green, purple, etc.
  • Hex codes: #FF0000 (red), #00FF00 (green)
  • RGB: rgb(255, 0, 0) = red

Tip: Use hex codes for precise colors

Classes & IDs 🏷️

Give CSS instructions for specific elements using classes and IDs.

Classes (for multiple elements):

CSS: .highlight { background: yellow; }
HTML: <p class="highlight">Important text</p>

IDs (for single elements):

CSS: #header { font-size: 40px; }
HTML: <h1 id="header">My Site</h1>

Padding vs Margin 📦

Two important spacing concepts:

Padding:

  • Space inside the element (between border and content)
  • padding: 20px;

Margin:

  • Space outside the element (between border and other elements)
  • margin: 10px;

Fonts & Web Fonts 🔤

Make your website use beautiful fonts!

Using Google Fonts:

<link href="https://fonts.googleapis.com/...Poppins">
<body style="font-family: Poppins;">

Popular fonts: Poppins, Roboto, Open Sans, Playfair Display

Hover Effects 🖱️

Make elements change when you hover over them!

Hover Effect Example:

a { color: blue; }
a:hover { color: red; }

When user hovers over a link, it turns red! Perfect for buttons.

Project: Style Your Webpage 🎨

Add CSS to Your HTML Webpage:

  • Change text colors (choose 2-3 main colors)
  • Set background color for body
  • Increase font sizes for headings
  • Add padding and margins for spacing
  • Change font-family to something pretty
  • Add hover effects to links
  • Use classes to style multiple elements the same way

Design Principles 🏆

Good Design Tips:

  • Readability: Text should be easy to read (good contrast, decent size)
  • Consistency: Use same colors and fonts throughout
  • White space: Don't crowd content - let it breathe
  • Hierarchy: Headings bigger than body text
  • Color theory: Use color psychology (blue = calm, red = action)
  • Mobile-friendly: Works on phones AND computers

Responsive Design 📱

Websites should look good on phones AND computers!

Media Queries (Advanced):

@media (max-width: 600px) {
  h1 { font-size: 18px; }
}

For now: set max-width and use padding instead of fixed widths

CSS Frameworks 🚀

Pre-made CSS libraries that speed up development:

Popular Frameworks:

  • Bootstrap: Professional-looking websites quickly
  • Tailwind: Utility classes for custom designs
  • Foundation: For complex, responsive sites

For beginners: Write your own CSS first to understand it!

What We Learned 🎓

  • CSS controls website appearance
  • Selectors choose which elements to style
  • Properties (color, font-size, padding) control appearance
  • Classes & IDs target specific elements
  • Padding is inside, margin is outside
  • Hover effects make sites interactive
  • Design principles: readability, consistency, hierarchy matter!

Web Design Mastered! 🎉

You can now build and style websites!

Next Chapter: Professional Skills & Assessment