Tutorial 1: HTML CSS Revision
I. Brief HTML Review
1. Basic HTML Document Structure
Every HTML document follows a standard structure, a framework for organizing
content and ensuring consistent rendering across web browsers.
<!DOCTYPE html>: This declaration, placed at the very beginning of your HTML
document, defines the document type and version of HTML being used. In modern
web development, this is simply <!DOCTYPE html>, signifying HTML5. It's
essential to understand that this is not an HTML tag, but a processing instruction
for the browser.
<html lang="en">: This is the root element, encompassing the entire HTML
document. The lang attribute specifies the primary language of the document's
content. This attribute is critical for accessibility—assistive technologies like
screen readers utilize this information to interpret the content correctly—and for
SEO (Search Engine Optimization). For example, lang="en" denotes English,
lang="es" denotes Spanish, and so on. It is best practice to always include the lang
attribute in your <html> tag.
<head>: The <head> element contains meta-information about the HTML
document. This information is not displayed directly on the page but is essential
for browser interpretation and search engines. Key elements within the <head>
include:
<title>: Specifies the document's title, which is displayed in the browser's
title bar or tab. This is vital for SEO and user experience, providing a
concise description of the page's content.
<meta charset="UTF-8">: Specifies the character encoding for the
document. UTF-8 is the recommended encoding as it supports a wide range
of characters from different languages, ensuring proper display of text
content.
<link> (for stylesheets): Links to external CSS (Cascading Style Sheets)
files that control the presentation and styling of the document. This separates
content (HTML) from presentation (CSS), which is good practice.
<meta name="description" content="...">: Provides a concise description of
your page's content. This description is often shown in search engine results
and is important for SEO.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Crucial for responsive web design. This tag tells the browser how to control
the page's dimensions and scaling on different devices. "width=device-
width" instructs the browser to set the width of the page to the same width as
the device's screen. "initial-scale=1.0" sets the initial zoom level when the
page is first loaded by the browser.
<body>: The <body> element contains the visible content of the HTML document
– everything users see and interact with on the page.
2. Semantic HTML
Semantic HTML emphasizes using HTML elements not merely for their visual
styling but for their inherent meaning. This practice significantly improves
accessibility, SEO, and the maintainability and structure of your HTML code. It
makes your code easier to understand for both developers and assistive
technologies.
<header>: Defines a header for a document or section. Typically contains
introductory content, site branding (logo), navigation, or a prominent
heading.
<nav>: Represents a section of navigation links, usually the primary
navigation menu of the website.
<main>: Specifies the main content of a document. It's crucial to use only
one <main> element per page, clearly distinguishing the central content
from supplementary information like sidebars or navigation.
<article>: Represents a self-contained, independent piece of content within a
document, such as a blog post, news article, or forum entry. It should be
meaningful on its own, even if removed from the rest of the page's context.
<aside>: Defines content aside from the page's primary content (e.g., a
sidebar). This content should be related to the main content but also make
sense independently.
<footer>: Defines a footer for a document or section. Usually contains
copyright information, contact details, links to privacy policies or terms of
service, or site-wide links.
3. Essential HTML Tags
These are the most commonly used tags for creating and structuring different types
of content within a web page.
Headings (<h1> to <h6>): Define headings of different levels, with <h1> being the
most important and <h6> being the least. They provide structure and are crucial for
accessibility and SEO.
Paragraphs (<p>): Represent paragraphs of text. Browsers automatically add
spacing between paragraphs.
Lists (unordered <ul>, ordered <ol>): Create lists of items. <li> defines each list
item. <ul> is for unordered (bulleted) lists, and <ol> is for ordered (numbered)
lists.
Links (<a>): Create hyperlinks to other web pages, files, or email addresses. The
href attribute specifies the destination (URL). target="_blank" opens the link in a
new tab or window.
Images (<img>): Embed images. The src attribute specifies the image URL (or file
path), and alt provides alternative text (essential for accessibility and displayed if
the image fails to load).
Divs (<div>): Generic container elements mainly for grouping other elements and
applying styles or JavaScript functionality. Overuse can lead to less semantic
HTML. Consider using more specific container elements (like <article>,
<section>, <aside>) if they are more appropriate to your content's meaning.
Spans (<span>): Inline container elements primarily used for styling or
manipulating smaller sections of text within a larger block of text content.
Forms: HTML forms collect user input. The <form> tag is the container for
various form elements.
<input>: Used for various input types, specified using the type attribute: text,
password, email, number, date, submit, checkbox, radio, etc.
<label>: Labels for input fields, linked to the input element using the for attribute
(which should match the id of the associated <input>). This is important for
accessibility and usability.
<select>: Creates dropdown lists. <option> elements define the choices.
<textarea>: Creates multi-line text input areas.
<button>: More versatile buttons, with types like submit, button, and reset. button
type allows custom JavaScript actions.
II. CSS Fundamentals Review
1. CSS Selectors: Targeting HTML Elements with Precision
Selectors are fundamental to CSS, determining which HTML elements receive
specific styles. They act as "addresses" for the parts of your web page you wish to
modify visually. We'll start with basic selectors, then explore more advanced
techniques.
1.1. Basic Selectors:
Element Selectors: The most basic type, targeting all elements of a specific HTML
tag. Simple and broad, applying styles to every instance of the selected element.
Class Selectors: Target elements with a specific class attribute. Defined in HTML
using class="your-class-name". Highly reusable, applying the same styles to
various element types. Encourages modularity and maintainability.
ID Selectors: Target a single, unique element with a specific id attribute. IDs must
be unique within the HTML document. Highly specific, suitable for styling one
particular element on a page.
1.2. Advanced Selectors:
Attribute Selectors: Target elements based on the presence or value of attributes.
This allows very precise styling based on the attributes used within your HTML
elements. Very useful for styling forms or other elements with specific attributes.
Pseudo-classes: Target elements based on their state (hovered, focused, active,
etc.) or position in the document. This adds dynamic styling capabilities, as styles
can change based on user interaction or the element's context.
Pseudo-elements: Style specific parts of elements.
2. Essential Styling Properties
color: Text color.
font-size: Text size (px, em, rem, %, keywords).
font-family: Font family (with fallbacks).
background-color: Background color.
margin: Space outside the border (top, right, bottom, left).
padding: Space inside, between content and border (top, right, bottom, left).
border: Element border (width, style, color). Use shorthand or individual
properties: border: 1px solid black; or border-width, border-style, border-
color.
text-align: Text alignment within its container.
width: Element width (px, %, auto).
height: Element height (px, %, auto).
3. Applying Styles
Inline Styles (Discouraged): Applied directly within HTML element's style
attribute. Avoid except for very quick tests. Hard to manage and reuse.
Internal Stylesheets (Occasionally Useful): Styles within <style> tags in the HTML
<head>. Suitable for single pages or very small projects where styles are only
needed for one specific page.
External Stylesheets (Best Practice): CSS in separate files (e.g., [Link]), linked
with <link> in the <head>. Standard and recommended approach. Improves
organization, maintainability, and allows efficient reuse of styles across multiple
pages on a website. External stylesheets are also cached by the browser, making
pages load faster for returning users.
III. Deep Dive into the Box Model
1. Visual Explanation of the Box Model
Every HTML element can be visualized as a rectangular box. The CSS Box Model
defines this box's structure, composed of four key areas:
Content: The innermost area, holding the actual content of the element (text,
images, etc.). The width and height properties you set directly affect the
dimensions of this content area.
Padding: The space surrounding the content, inside the border. It adds whitespace
between the content and the border, visually separating them. Padding is
transparent and takes on the background color of the element itself. You control
padding using padding-top, padding-right, padding-bottom, padding-left, or the
shorthand padding property.
Border: A line that encloses the padding and content. You can style its thickness
(border-width), style (border-style: solid, dashed, dotted, double, groove, ridge,
inset, outset, hidden, none), and color (border-color). You can style each side of
the border individually (e.g., border-top-width, border-left-style, border-bottom-
color) or use shorthand for a single side (e.g. border-top, border-left) which
combine width, style, and color. The shorthand border property sets width, style,
and color for all sides at once.
Margin: The outermost area, creating space around the element, outside its border.
Margins are transparent and do not have a background color. They separate the
element from adjacent elements on the page, controlling the spacing between
elements. You can control margins using margin-top, margin-right, margin-bottom,
margin-left, or the shorthand margin property.
2. box-sizing: Simplifying Layout Calculations
By default, the box-sizing property is set to content-box. This means that when you
set the width and height properties, these values apply only to the content area of
the element. The total width of the element, therefore, is calculated as: width +
padding + border + margin. This can make layout calculations complex,
particularly when you're working with fixed widths and also want to add padding
and borders.
Setting box-sizing: border-box; greatly simplifies these calculations. With border-
box, the width and height values you specify apply to the total width and height of
the element, including the padding and border (but still excluding the margin). The
content area will dynamically adjust to fit within the specified width and height.
This model is more intuitive and makes it easier to create predictable layouts.
Practical Examples:
content-box (Default):
The div's total width will be 250px (200px width + 40px padding (20px left + 20px
right) + 10px border (5px left + 5px right)). The light blue background extends to
the outer edge of the border. The content area inside will be smaller than 200px to
accommodate the padding and border.
border-box:
The div's total width is 200px including the padding and border. The content area
adjusts to fit within the remaining space. The light green background extends to the
outer edge of the border.
Best Practice: It is strongly recommended to set box-sizing: border-box; on the
universal selector (*) as a global rule in your CSS. This applies border-box sizing
to all elements on your page, ensuring consistent and predictable layout behavior,
and saving you from layout surprises when you add padding or borders.
3. Controlling Margin Collapsing and Horizontal Centering
3.1. Margin Collapsing:
When two vertical margins (top/bottom) of adjacent elements meet, they may
"collapse," with only the larger margin taking effect instead of their combined
value. This commonly occurs between parent and child elements or adjacent
sibling elements.
Instead of a 50px gap between the div and paragraph, there's only a 30px gap (the
larger of the two margins). This is because the top margin of the paragraph and the
bottom margin of the parent div are collapsing, and the larger margin wins.
3.2. Preventing Margin Collapsing:
To avoid margin collapsing, use these techniques:
Add padding to the parent element. Even a small amount of padding (e.g.,
padding-bottom: 1px;) will prevent the margins from collapsing.
Set overflow: hidden; on the parent. This creates a new block formatting
context and thus prevents margin collapse. Ensure that this doesn't clip any
content you want to be visible.
Use the clearfix technique if floats are involved.
Use Flexbox. Set display: flex on the parent element to use Flexbox layout,
where margin collapsing does not occur. You'll learn more about Flexbox
later.
3.3. Horizontal Centering:
To center a block-level element horizontally (elements that take up the full width
available to them by default, such as divs, headings, paragraphs, etc.), set its left
and right margins to auto, but only if it has a defined width. If you do not set a
width for a block-level element, it will by default take up the full width of its
container, meaning the auto left and right margins will have no effect.
The div is horizontally centered within its container. The auto left and right
margins take up equal space on either side of the div, resulting in horizontal
centering.
IV. Flexbox for Layout
1. Introduction to Flexbox
Flexbox (Flexible Box Layout) is a modern CSS layout module designed for
creating efficient one-dimensional layouts (either in a row or column). It excels at
managing the alignment, distribution, and ordering of items within a container,
even when the items' sizes are unknown or dynamic. While older layout methods
like floats and absolute positioning could achieve similar results, they were often
more complex, less intuitive, and less flexible. Flexbox, along with CSS Grid
(which is used more for two-dimensional layouts), has become the standard
approach for layout in modern web development.
2. Key Concepts: Flex Containers and Flex Items
Understanding Flexbox requires grasping two fundamental concepts:
Flex Container: The parent element that holds and controls the layout of its
flex items. You enable Flexbox layout on this container using the display
property (setting it to flex or inline-flex).
Flex Items: The direct children of the flex container. These are the elements
that are arranged and aligned within the container according to the Flexbox
properties you apply.
The items will be arranged horizontally in a row within the flex container. This is
because the default value for flex-direction (which we will explore shortly) is row.
3. Essential Flexbox Properties
display: flex; or display: inline-flex;: This property enables Flexbox layout on the
element. display: flex; makes the container a block-level element (like <div> by
default), while display: inline-flex; makes the container an inline-level element
(like <span> by default).
flex-direction: This property defines the main axis of the flex container – the
direction in which flex items are laid out.
row (default): Items are laid out horizontally, from left to right.
row-reverse: Items horizontally, right to left.
column: Items are laid out vertically, from top to bottom.
column-reverse: Items vertically, from bottom to top.
justify-content: Aligns the flex items along the main axis.
flex-start (default): Items align to the start of the main axis (left edge for row, top
edge for column).
flex-end: Items align to the end of the main axis.
center: Items are centered along the main axis.
space-between: Items are distributed evenly along the main axis, with space
between them, but no space at the start or end edges of the container.
space-around: Items distributed evenly with equal space around each item,
including space at the start and end edges of the container.
space-evenly: Items distributed with equal spacing between them and equal
spacing at the start and end edges.
align-items: Aligns flex items along the cross axis (the axis perpendicular to the
main axis).
flex-start: Items align to the start of the cross axis.
flex-end: Items align to the end of the cross axis.
center: Items centered along the cross axis.
stretch (default): Items stretch to fill the container along the cross axis. If the items
do not have an explicit height set, and the container does have a height set, the
items will stretch to fill the container's height.
baseline: Items align along their text baselines (relevant when items have varying
font sizes, ensuring textual alignment).
flex-wrap: Controls whether flex items wrap onto multiple lines when they
overflow the container along the main axis.
nowrap (default): All items stay on a single line, potentially overflowing the
container if there isn't enough space.
wrap: Items wrap onto multiple lines as needed.
wrap-reverse: Items wrap but in reverse order.
gap (or row-gap and column-gap): Specifies the spacing between flex items. gap
sets both row-gap (vertical spacing) and column-gap (horizontal spacing). A very
handy property for creating consistent gutters.
align-self: Applied directly to flex items to override the align-items setting of the
container for that specific item. This allows you to have a mix of alignment
behaviors within a single flex container.
flex-start, flex-end, center, stretch, baseline: Same values as align-items.
order: Controls the visual order of flex items within their container. Items are
arranged based on their order value (lower values first), regardless of their source
order in the HTML. Default order is 0.
V. Responsive Design with Media Queries
1. The Importance of Responsiveness
In the contemporary digital landscape, users access websites from an exceptionally
diverse range of devices with varying screen sizes, resolutions, and orientations -
from expansive desktop monitors and laptops to tablets and smartphones of all
dimensions. Responsive web design is no longer a desirable enhancement but a
fundamental requirement for any modern website. A responsive website
dynamically adapts its layout and content to provide an optimal viewing
experience on any device, ensuring readability, usability, and a consistent user
experience regardless of the user's access point.
A website designed without responsiveness, particularly one tailored for desktop
viewing, might be virtually unusable on a smaller device like a smartphone.
Content could be truncated or require excessive horizontal scrolling, text might
become too minuscule to read comfortably, navigation menus could become
cumbersome and difficult to interact with, and interactive elements might be nearly
impossible to tap accurately. Such a compromised experience leads to user
frustration, increased bounce rates (users leaving the site quickly), and diminished
engagement.
Responsiveness is not just about aesthetics; it's about providing a positive and
accessible experience for all users. It's also crucial for search engine optimization
(SEO). Search engines prioritize mobile-friendly, responsive websites in their
rankings, impacting a site's visibility and reach significantly.
2. Media Queries: The Core of Responsive Design
Media queries are the central mechanism for implementing responsive web design
in CSS. They allow applying conditional styles based on the device or browser
rendering the webpage. The @media rule encapsulates these conditional styles.
Syntax:
The condition within the parentheses is a media query, a logical expression
evaluating to true or false. If the condition is true, the CSS rules within the curly
braces {} are applied. The most frequently used media feature is max-width,
targeting screens up to a specified width:
You can use min-width to target screens at least a certain width. @media (min-
width: 1200px) applies styles only to screens 1200px or wider. Create complex
conditions by combining media features with logical operators (and, or, not).
@media (min-width: 768px) and (orientation: landscape) applies styles only when
the width is at least 768px and the device is in landscape orientation.
Breakpoints: Common screen widths where layout or styling changes are made are
known as breakpoints. They're guidelines based on typical device sizes, not strict
rules. Carefully chosen breakpoints simplify managing layout and styling
adjustments.
Common breakpoints:
320px: Smaller mobile phones.
480px: Larger mobile phones.
768px: Tablets (e.g., iPad portrait).
1024px: Larger tablets/smaller laptops (e.g., iPad landscape).
1200px: Desktops.
The optimal breakpoints depend on your website's specific design and content.
Consider where elements become too crowded, content readability suffers, or a
layout change would enhance user experience.
3. Examples of Responsive Styling with Media Queries
3.1. Changing Font Sizes:
Adjust font sizes for readability.
Font size adapts to screen width, ensuring readability.
3.2. Stacking Elements Vertically:
Alter layouts for optimal space use, particularly on smaller screens. A fundamental
aspect of responsive design is transitioning between layouts (e.g. multi-column to
single-column) at different screen sizes.
On larger screens (greater than 768px), the items are side-by-side. On smaller
screens, flex-direction changes to `column`, stacking items vertically.
3.3. Adjusting Margins and Padding:
Fine-tune spacing to maintain visual harmony and proportions across screen sizes.
padding and margin-bottom adjust based on screen width, optimizing for different
displays.
3.4. Hiding/Showing Elements:
Control element visibility for streamlined layouts on smaller screens, decluttering
the UI for enhanced mobile experience.
On larger screens, the main navigation is visible, and the menu button is hidden.
On smaller screens (below 600px), the main navigation becomes hidden and the
button becomes visible. This suggests the common "mobile menu" pattern where
JavaScript is used to toggle the visibility of the navigation when the button is
clicked.