Global Styles & Normalization | Dev Notes

📘 GLOBAL STYLES & NORMALIZATION — COMPLETE NOTE

🔹 1. What are Global Styles?

🧠 Definition

Global styles = styles applied to most elements on a page

Usually set in:

body {
  /* global styles here */
}

🎯 Purpose

👉 Save time 👉 Avoid repeating code 👉 Keep design consistent

📊 Example

body {
  font-family: 'Helvetica Neue', 'Roboto', 'Verdana', sans-serif;
}

👉 now almost ALL text uses this font

🔹 2. Global Text Color

🧠 Important

Property color is inherited

👉 so setting it on body affects most text

🎯 Example

body {
  color: #212121;
}

👉 all text becomes dark gray

⚠️ except links (they have default styles)

💡 Best Practice

✔ set main text color globally

🔹 3. Global Font Size

🎯 Example

body {
  font-size: 14px;
}

👉 base size for entire document

🔹 4. Background Color

🧠 Default

* default = white (#ffffff)

BUT:

👉 always set it manually

🎯 Example

body {
  background-color: #fafafa;
}

💡 Why?

✔ design may not be pure white ✔ ensures consistency

🔹 5. Global Line Height

🧠 Important

line-height is inherited

🎯 Example

body {
  line-height: 1.5;
}

💡 Why global?

👉 most text uses same spacing 👉 exceptions can be changed later

🔹 6. Styling Groups of Elements

🧠 Problem

Many elements need same style

👉 example: all headings

🎯 Solution

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

💡 Benefits

✔ no repetition ✔ cleaner code ✔ easier maintenance

🔹 7. Lists Styling

🧠 Default behavior

* <ul> → bullets * <ol> → numbers

👉 often NOT used in design

🎯 Remove markers

ul {
  list-style-type: none;
}

📊 Example (all lists)

ul, ol {
  list-style-type: none;
}

🔹 8. What is Normalization?

🧠 Problem

Different browsers = different styles

👉 same HTML looks slightly different

💡 Reason

Browsers use their own:

👉 user agent stylesheets

🧠 Solution

👉 normalization

🔹 Definition

Normalization = making styles consistent across browsers

🔹 9. Modern Normalize

🧠 What it is

A ready-made CSS file

👉 fixes browser differences

🎯 How to use

<head>
  <!-- Normalize FIRST -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.min.css">

  <!-- Your styles AFTER -->
  <link rel="stylesheet" href="./css/styles.css">
</head>

💡 Important

👉 order matters

normalize
your CSS

🔹 10. Why Normalize?

🎯 Benefits

✔ same look in all browsers ✔ fewer bugs ✔ easier development

🔹 11. Example of Full Global Setup

body {
  font-family: 'Helvetica Neue', 'Roboto', 'Verdana', sans-serif;
  color: #212121;
  background-color: #fafafa;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

ul {
  list-style-type: none;
}

🧠 FINAL SUMMARY

👉 Global styles = base styles for whole page

👉 Set in:

body
tag selectors

MOST IMPORTANT GLOBAL PROPERTIES

✔ font-family ✔ color ✔ background-color ✔ font-size ✔ line-height

COMMON GLOBAL RULES

✔ remove list markers ✔ set heading font ✔ unify styles

NORMALIZATION

✔ fixes browser differences ✔ use external CSS (Modern Normalize)

💪 BEST PRACTICES

👉 always define base styles 👉 avoid repeating code 👉 keep styles consistent 👉 use normalize for real projects

⬅ Back