HTML & CSS Intro Course: Divs, IDs, & More

Ready to advance your web development skills? Continue learning HTML & CSS fundamentals 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 working professionals.

Video Transcription

Let's explore div tags and IDs—essential tools for structuring professional web layouts. Currently, this page contains basic HTML elements: headings, paragraphs, and content that stretches uncomfortably across the full browser width. This creates a poor user experience, as wide text blocks become difficult to read and appear unprofessional.

Professional web design requires thoughtful content constraints and visual hierarchy. We need to limit our content width and implement strategic background colors to create visual separation between the page background and content area. This approach draws attention to the main content while improving readability across all device sizes.

To achieve this design, we need multiple containers working in harmony. While the body tag serves as our page-level container, we require an additional wrapper for our content area. This allows us to apply different background colors: one for the overall page (applied to the body) and another for the content section itself.

Let's start by establishing our page foundation with a background color on the body tag. The body element wraps all visible content, making it the logical choice for page-wide styling. When working with design teams, you'll typically receive specific color specifications—hex codes that ensure brand consistency across your web properties.

I'll apply the background color provided in our design specifications. In professional development, designers typically provide detailed style guides with exact color values, typography specifications, and spacing requirements. This collaborative approach ensures pixel-perfect implementation of approved designs.

After saving and refreshing, you'll notice the entire page adopts this new background color, overriding the browser's default white background. This demonstrates a fundamental web development principle: CSS allows us to override browser defaults with custom styling that reflects our brand and design requirements.

Now we need to make our content stand out against this darker background. The goal is to create a contained, well-defined content area with a white background and subtle border treatment. This approach is commonly used in modern web design to improve content readability and create visual focus.

Since we need an additional container element, we must wrap our content in a new HTML tag. This brings us to an important distinction in HTML: the difference between span and div elements. Understanding when to use each is crucial for proper semantic markup.

Span tags are inline elements, similar to images—they flow horizontally alongside other content. If you create three span elements, they'll appear side by side. Div tags, however, are block-level elements like headings and paragraphs. They stack vertically, creating distinct sections that serve as building blocks for page layout.

For our content wrapper, a div tag is the appropriate choice. We're creating a major content section that should occupy its own horizontal space and stack properly with other page sections. This follows established web standards and ensures our markup remains semantic and accessible.

I'll create a div tag immediately inside the body element, wrapping all existing content. This creates a clean hierarchy: body contains div, div contains all page content. This structure provides the foundation for responsive design and future layout enhancements.

Professional web development requires organized, maintainable code. Since pages typically contain multiple div elements, we need a systematic naming approach. We have two options: classes and IDs. Both serve to identify elements, but they have distinct use cases and technical implications.

For this page wrapper—a unique element that appears once per page—an ID is most appropriate. IDs are designed for unique page elements, while classes are intended for reusable styling patterns. This distinction becomes critical as applications scale and teams collaborate on larger codebases.

Let me demonstrate the difference between classes and IDs. I'll assign an ID of "wrapper" to our div element. The naming convention is crucial here: IDs cannot contain spaces and should be descriptive of their function. You can use dashes or underscores for word separation, and while capitalization is technically allowed, maintaining consistent lowercase naming prevents case-sensitivity issues.

Choose names that clearly describe the element's purpose—"wrapper," "container," or "page-content" are all appropriate choices. Avoid generic names or references that don't convey meaning to other developers who might work on your code. Good naming conventions are essential for code maintainability and team collaboration.

The key distinction to remember: IDs must be unique within a page (use each ID only once), while classes can be applied to multiple elements. This makes IDs perfect for unique page sections and classes ideal for repeated styling patterns like buttons, cards, or text formatting.

When referencing IDs in CSS, use the hash symbol (#). So "#wrapper" targets an element with an ID of "wrapper." This selector syntax is fundamental to CSS and you'll use it constantly in professional development. Classes use a period (.) as their selector prefix, making the distinction clear in your stylesheets.

Now I can style our wrapper element. I'll add a white background color using the hex code #FFFFFF. Here's a professional tip: when all three color pairs in a hex code are identical (like FF-FF-FF), you can abbreviate it to three characters (#FFF). This shorthand notation is widely supported and helps keep stylesheets concise.