Master the fundamentals of HTML & CSS in our comprehensive NYC Web Development classes. For professionals outside New York, explore and compare the best HTML & CSS classes near you or join our live online HTML & CSS classes designed for busy schedules.
Video Transcription
CSS (Cascading Style Sheets) serves as the design language that transforms raw HTML content into visually compelling web experiences. While HTML provides the structural foundation and semantic meaning of your content, CSS controls every visual aspect—from typography and color schemes to complex layouts that adapt seamlessly across devices. Understanding CSS is essential for anyone serious about web development, whether you're building corporate websites, e-commerce platforms, or modern web applications.
Let's start with the fundamentals by embedding CSS directly into our HTML document using a style tag. This approach, known as internal CSS, is perfect for learning and prototyping, though production environments typically favor external stylesheets for better maintainability. CSS syntax differs significantly from HTML—instead of creating new elements, we target existing HTML elements and define their visual properties using a selector-property structure.
To demonstrate, let's target all paragraph elements using the `p` selector. Within curly braces, we'll define properties that control how paragraphs appear. Font size, measured in pixels for this example, offers precise control over text dimensions. Setting `font-size: 16px` maintains readability while `font-size: 26px` creates emphasis through scale. Conversely, `font-size: 6px` renders text nearly illegible—a reminder that accessibility should guide our design decisions. For optimal readability in 2026, consider that many users browse on high-resolution displays where 18px often provides better comfort than the traditional 16px baseline.
Typography extends beyond size to include spacing, which dramatically affects readability and user experience. The `line-height` property controls vertical spacing between lines of text—what traditional print designers know as leading (named after the lead strips once used in metal typography). While browsers default to relatively tight line spacing, professional web design typically benefits from more generous spacing. A `line-height` of 26-30px paired with 18px text creates comfortable reading rhythm, while excessive spacing (40px+) can fragment text comprehension. Conversely, cramped spacing (under 20px) forces readers to work harder, potentially causing eye strain during extended reading sessions.
Understanding CSS inheritance and the cascade is crucial for professional development. Browsers ship with default stylesheets (called user agent stylesheets) that provide baseline styling—black text, Times Roman font, standard margins and padding. Your CSS rules override these defaults through specificity and source order. Modern users can also customize their browser preferences, meaning your 16px default might display larger for users who've adjusted their browser's base font size for accessibility. This reinforces why relative units like `rem` and `em` are increasingly preferred in responsive design, though pixels remain valuable for precise control in specific contexts.
When styling multiple element types, CSS rule organization becomes important for maintainability. While the order of non-conflicting rules doesn't affect rendering—styling `h1` before or after `p` produces identical results—logical organization aids development efficiency. Professional developers typically group related selectors and arrange them to match HTML document flow or component hierarchy, making code navigation intuitive during debugging and updates.
Color selection has evolved significantly with modern design tools and web standards. Google's built-in color picker provides convenient access to hexadecimal color codes, though professional designers typically work within design systems using tools like Adobe XD, Sketch, Photoshop, or newer collaborative platforms like Figma. Hexadecimal codes represent colors using base-16 notation—each six-character code defines red, green, and blue values from 00 (no intensity) to FF (maximum intensity). Understanding this system helps developers work efficiently with color variations and create consistent palettes.
The hex color system follows a logical pattern: `#000000` represents pure black (no light), while `#FFFFFF` produces pure white (maximum light across all channels). Equal values across all three channels (`#333333`, `#888888`, `#CCCCCC`) create neutral grays, while varying individual channels produces color variations. This mathematical approach to color enables precise control and systematic palette development—essential skills for maintaining brand consistency across large websites or applications.
Typography choices significantly impact both user experience and brand perception. While system fonts like Arial, Helvetica, and Verdana remain reliable fallbacks, modern web development leverages web fonts for distinctive branding. The `font-family` property accepts fallback lists—if the browser can't load your primary font choice, it progressively attempts alternatives before settling on generic categories like `sans-serif` or `serif`. In 2026's web landscape, font loading performance and accessibility considerations are paramount, making font selection both a design and technical decision.
Professional font stacks consider cross-platform compatibility and loading performance. A well-constructed font stack might specify a custom web font, followed by similar system fonts, concluding with a generic category: `font-family: 'CustomBrand', 'Helvetica Neue', Arial, sans-serif;`. This approach ensures consistent branding while providing graceful degradation for users on slower connections or systems without your preferred fonts.
This introduction covers CSS fundamentals, but mastering modern web development requires understanding responsive design, CSS Grid and Flexbox layouts, animations, and performance optimization. These foundational concepts—selectors, properties, inheritance, and the cascade—form the building blocks for more advanced techniques. As you progress, you'll discover CSS's power extends far beyond basic styling to enable sophisticated interactions and adaptive designs that work seamlessly across today's diverse device landscape.
Core CSS Properties Covered
Font Size
Controls text size using pixel values. Default browser size is typically 16 pixels, but can be adjusted up or down for better readability.
Line Height
Adjusts spacing between lines of text, similar to leading in print design. Helps improve readability when font size is increased.
Color
Uses hex codes to change text colors. Hex codes are 3-6 character combinations representing red, green, and blue light values.
Basic CSS Implementation Process
Create Style Tag
Add a style tag to your HTML document where you will write your CSS rules
Target HTML Elements
Use element selectors like 'p' for paragraphs or 'h1' for headings to specify which elements to style
Add Properties
Inside curly braces, define CSS properties like font-size, color, and line-height with their values
Test and Adjust
Save your changes and refresh the browser to see the styling effects, then adjust values as needed
CSS vs Browser Defaults
| Feature | Browser Default | Custom CSS |
|---|---|---|
| Font Family | Times Roman | Arial, Helvetica, sans-serif |
| Font Size | 16 pixels | Customizable (6-50+ pixels) |
| Text Color | Black | Any hex color code |
| Background | White | Customizable |
Hex codes work in base 16, representing RGB values from 0-255. The format is #RRGGBB where each pair controls red, green, and blue light intensity. Equal values create shades of gray, while different values create distinct colors.
Using System Fonts vs Custom Fonts
Font Size Guidelines
CSS Best Practices Checklist
Maintains visual hierarchy and improves readability
Prevents text from appearing cramped or too spread out
Ensures text remains readable for all users
Guarantees text displays even if preferred font is unavailable
Ensures consistent appearance and functionality
CSS basically controls the visual look of the webpage; HTML formats the content.