Comprehensive Study Notes on CSS Box Model, Units, and Grids

Computer Science Student Society (CSSS)

Background and History
- The society has been an integral part of the School of Computing and Mathematical Sciences since its establishment in $2013$ .
- It is a student-led organization, managed primarily by undergraduate students who handle all aspects of operations, including event management, organization, budgeting, and strategic decision-making.
Purpose and Membership
- The club serves as a social and professional hub for students interested in computer science, data, design, mathematics, and related interdisciplinary fields.
- Its primary goals include connecting students with one another and providing opportunities for professional development and industry engagement.
- Membership is free, and most events are provided at no cost to students. Any exceptions are advertised in advance.
Activities and Events
- Social gatherings such as barbecues, pizza nights, games nights, and quiz nights.
- Professional events, most notably the annual Careers Fair.
- Traditional events, such as the campus pub crawl, which has been a recurring activity for approximately $20$ years.
- Competitive events including various design competitions.
Organizational Benefits for Committee Members
- Involvement in the club committee requires an average time commitment of approximately $0.5\,\text{hours}$ per week.
- Committee members gain experience in group work, industry networking, event planning, and personnel management.
- Such extracurricular involvement is emphasized as a way to diversify a student's profile in an uncertain job market, demonstrating capabilities beyond academic knowledge.

Review of Web Development Fundamentals

CSS Selector Priority
- When multiple CSS rules target the same HTML element, the browser determines priority based on the type of selector used.
- Highest Priority: The ID selector.
- Lowest Priority: The Type selector (in a hierarchy including ID, Attribute, Class, and State).
CSS and HTML Structure
- A CSS file consists of a collection of CSS rules. These rules define the syntax and structure applied to the visual representation of a webpage.
- An HTML document is composed of a series of tags and attributes.
- Root Element: The <html> element is the root of the HTML document.
- Child Elements of the Root: The <html> element contains two primary child elements: the <head> and the <body> elements.

The CSS Box Model

Conceptual Layout
- The CSS box model is the layout engine where every HTML element is treated as an invisible rectangular box.
- Elements are categorized as either inline or block, and they react differently to CSS styling based on these properties.
Core Properties of the Box Model
- Content: The innermost part of the box, containing text, images, forms, or other media.
- Padding: The space immediately surrounding the content. It remains inside the boundaries of the element itself.
- Border: The edge that surrounds the padding and content. It is also considered part of the element.
- Margin: The space outside the border, used to create distance between different elements. It is not considered part of the element itself.
Styling Syntax
- Universal setting: One value applied to all sides (e.g., padding: 20px; sets top, bottom, left, and right to $20\,\text{px}$ ).
- Explicit setting: Targeting specific sides (e.g., padding-right: 15px; or margin-top: 10px;).
- Visualization: If an element has a background color, it will be visible behind the content and padding, but not the margin.

CSS Units

Absolute Units
- Fixed sizes that do not change relative to other elements or the viewport.
- Examples include pixels ( $\text{px}$ ), points ( $\text{pt}$ ), inches ( $\text{in}$ ), centimeters ( $\text{cm}$ ), and millimeters ( $\text{mm}$ ).
- Note on Pixels: In modern browsers, a pixel acts as a logical unit. While generally absolute, the browser may scale these units when a user zooms in or out.
Relative Units
- Sizes that adjust based on specific contexts such as font size, parent element size, or viewport dimensions.
- Percentage ( $\%$ ): Relative to the size of the parent element.
- EM ( $\text{em}$ ): Relative to the font size of the parent element.
- REM ( $\text{rem}$ ): Relative to the font size of the root element (<html>).
- Viewport Height ( $\text{vh}$ ): Relative to the height of the browser window ( $1\,\text{vh}$ is $1\%$ of the height).
- Viewport Width ( $\text{vw}$ ): Relative to the width of the browser window ( $1\,\text{vw}$ is $1\%$ of the width).
Calculation Examples
- If the root font size is set to $12\,\text{px}$ , then a value of $2\,\text{rem}$ equals $2 \times 12\,\text{px} = 24\,\text{px}$ .
- If a parent element has a font size of $24\,\text{px}$ , a child element set to $2\,\text{em}$ will have a font size of $2 \times 24\,\text{px} = 48\,\text{px}$ .

CSS Grids

Overview
- CSS Grid is a layout system that allows developers to divide web pages into rows and columns without relying on external frameworks or old table-based layouts.
- It enables the creation of complex, responsive designs by defining a parent container as a grid.
Grid Components
- Grid Container: The parent element where display: grid; is applied.
- Grid Items: The direct children of the grid container.
- Grid Lines: The horizontal and vertical lines that divide the grid. They are numbered starting from $1$ at the top/left. Negative numbers can be used to count from the bottom/right (starting at $-1$ ).
- Grid Cell: The individual space enclosed by four grid lines.
- Gaps: The space between rows or columns, often referred to as gutters.
Grid Implementation and Syntax
- Activation: Use display: grid; on the container.
- Columns: grid-template-columns defines the width and number of columns (e.g., 400px 400px creates two columns of $400\,\text{px}$ each).
- Rows: grid-template-rows defines the height and number of rows.
- Gaps: grid-gap sets a uniform space for both rows and columns. Specificity can be achieved using row-gap or column-gap.
Positioning Items
- Items can be moved within the grid using grid-column and grid-row properties.
- Values are defined by start and end line numbers (e.g., grid-column: 1 / 3; specifies that an item should span từ grid line $1$ to grid line $3$ , covering two columns).
- Moving an item to a new cell will shift existing items within the layout flow automatically.

Questions & Discussion

Question: If an image is transparent, can you see the background color through it when using the box model?
Response: This is a possibility that should be tested practically, but background colors applied to an element typically show through transparent areas of the content.
Question: If there are more elements than defined columns and rows in a grid, what happens?
Response: The grid will automatically create additional rows or columns to accommodate the missing elements that were not explicitly accounted for in the template definitions.