Introduction to CSS
Simple code examples — clean layout
Index
• 1. What is CSS? 2. Types of CSS 3. Selectors & Specificity
• 4. Selector Examples 5. Box Model 6. Fonts & Backgrounds
• 7. Tables & Lists 8. Forms, Links, Images, Frames
• 9. Positioning 10. Display 11. Pseudo-classes/elements
• 12. Example code and Output
What is CSS?
• Cascading Style Sheets — styles HTML presentation.
• Separates content (HTML) from presentation (CSS).
Types of CSS
• Inline: <tag style='...'> (high priority)
• Internal: <style> in head (page-specific)
• External: styles.css linked with <link> (recommended)
Selectors & Specificity
• Inline > ID > Class/Attr/Pseudo-class > Element/Pseudo-element
• Specificity determines which rule wins when multiple apply.
Selectors Examples
• Element: p { color:#333; }
• Class: .btn { padding:8px; } ID: #nav { background:#eee; }
• Attribute: input[type='text'] { width:200px; }
Relational Selectors
• Descendant: div p { } Child: ul > li { }
• Adjacent: h1 + p { } General sibling: h2 ~ p { }
Box Model
• Content → Padding → Border → Margin
• Use box-sizing: border-box to include padding/border in width.
Fonts & Backgrounds
• Fonts: font-family, font-size, font-weight, line-height
• Backgrounds: background-color, image, repeat, position
Tables & Lists
• Tables: border-collapse, th/td padding
• Lists: list-style-type, list-style-position, or none for custom bullets
Forms & Controls
• Style inputs, buttons, focus states for usability
• Example: input:focus { outline:none; box-shadow:0 0 5px rgba(0,0,0,0.1); }
Links, Images & Frames
• Links: a:hover, a:visited for states
• Images: img { max-width:100%; height:auto; }
• Frames: iframe { border:1px solid #ccc; }
Positioning Basics
• static, relative, absolute, fixed
• Absolute positions relative to nearest positioned ancestor
Display: Inline / Block / Flex
• inline (no new line), block (new line/full width)
• flex: container controls child layout (justify-content, align-items)
Pseudo-classes & Pseudo-elements
• :hover, :focus, :nth-child() (state-based)
• ::before, ::after, ::first-line (target parts of elements)
Example: index.html
• Paste this into index.html and link styles.css:
• <!-- index.html (short) -->
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Demo</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<header id='site-header'><h1 class='title'>My Site</h1></header>
<main>
<p class='lead'>Welcome to a simple demo.</p>
<button class='btn'>Click me</button>
</main>
</body>
</html>
Example: styles.css
• Paste into styles.css:
• /* styles.css (short) */
body { font-family: Arial, sans-serif; background:#f5f5f5; color:#222; margin:0; }
#site-header { background:#fff; padding:20px; border-bottom:1px solid #ddd; }
.lead { font-size:18px; }
.btn { padding:8px 12px; border-radius:4px; background:#007BFF; color:#fff;
border:none; cursor:pointer; }
.btn:hover { background:#0056b3; }
Output & Tips
• Open index.html in browser to view result.
• Use external CSS and classes for cleaner code.
• Inspect with DevTools to debug styling issues.
Thank You
• Slides follow your sample's structure and tone.
• Want colour theme, icons, or exported Google Slides? I can add them.
