Global Styles & Reset
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Global Styles and Reset system in this project establishes the foundational visual framework for the Google Clone. It utilizes a combination of CSS reset properties and global variable definitions to ensure cross-browser consistency and provide a unified layout structure. The project focuses on recreating the specific typography, spacing, and color palette associated with the Google search interface.
The system is primarily defined within style.css and the embedded styles in the MHTML snapshot of index.html. These styles govern the behavior of core HTML elements such as body, html, and input, while also defining utility classes for brand-specific coloring.
Sources: style.css:1-7, index.html:15-18, README.md:1-2
Core Layout and Body Reset
The project implements a full-viewport layout by resetting default browser margins and paddings. The body and html tags are configured to occupy the full height of the viewport, which is critical for centering the search interface.
Layout Configuration
The primary layout uses Flexbox on the body element to center the main content area both horizontally and vertically.
The diagram shows how the top-level containers are configured to center the search UI within the browser window.
Sources: style.css:1-8, index.html:137-138
Global Typography
Typography is standardized across the application to ensure a clean, modern aesthetic.
| Property | Value | Description |
|---|---|---|
font-family | 'Arial', sans-serif | Primary typeface for the main interface. |
font-family | Roboto, sans-serif | Alternative typeface specified in the MHTML content. |
font-size | 13pt / 16px | Base font size for body and input elements. |
color | #1f1f1f | Primary text color for high contrast. |
Sources: style.css:4, index.html:15, index.html:105
Brand Color System
The project uses a set of utility classes to apply the iconic Google brand colors to specific spans within the logo. These are defined globally to ensure the brand identity remains consistent across components.
/* Цвета Google */
.blue { color: #4285F4; }
.red { color: #EA4335; }
.yellow { color: #FBBC05; }
.green { color: #34A853; }
Sources: style.css:18-22
Logo Styling
The .logo class applies global formatting to the brand heading, including font weight, size, and spacing. It also uses user-select: none to prevent the logo text from being highlighted during user interactions.
Sources: style.css:10-16
Component-Level Resets
Specific HTML components such as inputs and buttons undergo a localized reset to remove default browser styling (like borders and outlines) and apply custom interaction states.
Input and Search Wrapper Reset
The search input is wrapped in a container that manages the visual border and shadow effects, while the internal input element is stripped of its native appearance.
This structure allows the project to mimic the complex border-and-shadow behavior of the search bar without relying on standard input borders.
Sources: style.css:30-51, index.html:102-108
Button Styling
Buttons are reset to a uniform look with subtle hover effects.
| Component | Default State | Hover State |
|---|---|---|
| Background | #f8f9fa | #f8f9fa (consistent) |
| Border | 1px solid #f8f9fa | 1px solid #dadce0 |
| Shadow | None | 0 1px 1px rgba(0,0,0,0.1) |
| Cursor | Default | pointer |
Sources: style.css:57-73
Conclusion
The Global Styles and Reset module provides the essential CSS foundation for the Google Clone project. By normalizing the body and html elements and implementing a brand-specific color utility system, the project ensures a consistent starting point for all UI components. This approach minimizes browser discrepancies and provides a centralized location for managing the application's visual identity.
Sources: style.css:1-73, index.html:15-18