HTML & CSS Concepts

Essential Knowledge for Web Development

This presentation covers all the core concepts you need to understand to master HTML and CSS for web development.

Navigate through the slides using the controls at the bottom of the screen or the left and right arrow keys.

CSS Box Model

• The CSS box model describes how elements are rendered on the page
• Components from innermost to outermost:
  1. Content: The actual content (text, images)
  2. Padding: Space between content and border
  3. Border: Line surrounding the padding
  4. Margin: Space outside the border

CSS Overflow Property

Controls how content behaves when it's too large for its container

• visible: Content overflows the container (default)
• hidden: Extra content is clipped
• scroll: Scrollbars always appear
• auto: Scrollbars appear only when needed
• overlay: Similar to auto (browser-dependent)

.container {
    width: 300px;
    height: 200px;
    overflow: auto;
    border: 1px solid #333;
}

CSS Specificity

Determines which CSS rule applies when multiple rules target the same element

• Hierarchical weight system (highest to lowest):
  1. Inline styles (style="...")
  2. ID selectors (#element)
  3. Class selectors (.class), attribute selectors ([type="text"]), pseudo-classes (:hover)
  4. Element selectors (div, p) and pseudo-elements (::before)
• When specificity is equal, the last rule in the stylesheet wins

/* Specificity: 0,0,0,1 */
p { color: black; }

/* Specificity: 0,0,1,1 */
.text p { color: blue; }

/* Specificity: 0,1,0,1 */
#content p { color: red; } /* This one wins */

HTML5 Semantic Elements

Describe meaning and purpose rather than just presentation

• <header>: Introductory content or navigational links
• <nav>: Navigation links
• <main>: Main content of the document (only one per page)
• <article>: Self-contained content
• <section>: Thematic grouping of content
• <aside>: Related but tangential content
• <footer>: Closing information

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Content here...</p>
    </article>
</main>
<footer>
    <p>Copyright 2025</p>
</footer>

Heading Hierarchy

Headings create document outline and structure

• Should follow a logical hierarchy:
  • <h1> - Main page heading (typically one per page)
  • <h2> - Section headings
  • <h3> - Subsection headings
  • And so on to <h6>
• Proper hierarchy is important for:
  • Accessibility (screen readers)
  • SEO
  • Document structure

<h1>Website Title</h1>
<section>
    <h2>Section Heading</h2>
    <p>Content...</p>
    <h3>Subsection Heading</h3>
    <p>More content...</p>
</section>

CSS Flexbox

One-dimensional layout system for rows or columns

• Key properties for flex container:
  • display: flex
  • flex-direction: row | column | row-reverse | column-reverse
  • justify-content: Alignment along main axis
  • align-items: Alignment along cross axis
  • flex-wrap: Controls wrapping of items

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

Flexbox Item Properties

flex shorthand combines three properties:

• flex-grow: Proportion of available space (number)
• flex-shrink: How much item will shrink (number)
• flex-basis: Default size before distributing space

Examples:

• flex: 1 0 auto = grow:1, shrink:0, basis:auto
• flex: 0 0 200px = fixed width, no growing/shrinking

.item-growing {
    flex: 1 0 auto; /* Will grow to fill space */
}

.item-fixed {
    flex: 0 0 200px; /* Fixed width, won't grow or shrink */
}

.item-flexible {
    flex: 1 1 auto; /* Can grow and shrink as needed */
}

CSS Grid

Two-dimensional layout system for rows and columns

• Key properties:
  • display: grid
  • grid-template-columns: Defines column sizes
  • grid-template-rows: Defines row sizes
  • grid-gap: Spacing between rows and columns
  • grid-template-areas: Named grid areas

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 10px;
}

Grid Template Areas

Creates a visual ASCII-like layout of grid cells:

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

CSS Positioning

Controls how elements are positioned within their containing element

• Position types:
  • static: Normal flow (default)
  • relative: Positioned relative to its normal position
  • absolute: Positioned relative to nearest positioned ancestor
  • fixed: Positioned relative to viewport
  • sticky: Hybrid of relative and fixed

.parent {
    position: relative;
    height: 200px;
}

.child {
    position: absolute;
    bottom: 0;
    right: 0;
    /* This places the element at the bottom-right of its parent */
}

CSS Transforms

Modify the appearance of elements in 2D or 3D space

• Common transform functions:
  • translate(x, y): Moves element
  • rotate(angle): Rotates element
  • scale(x, y): Changes size
  • skew(x-angle, y-angle): Skews element

.element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: translate(50%, 50%) rotate(45deg);
    /* Moves element 50px right and down, then rotates 45 degrees */
}

CSS Selectors

Basic selectors:

• Element selector: div, p, h1
• Class selector: .classname
• ID selector: #idname
• Universal selector: *

Combinators:

• Descendant: div p (p inside div)
• Child: div > p (direct child)
• Adjacent sibling: h1 + p (p immediately after h1)
• General sibling: h1 ~ p (p after h1)

Pseudo-classes & Pseudo-elements

Pseudo-classes select elements based on state or position:

• :hover, :active, :focus
• :first-child, :last-child
• :nth-child(n), :first-of-type

Pseudo-elements target parts of elements:

• ::before, ::after (create content)
• ::first-letter, ::first-line
• ::selection (highlighted text)

/* First paragraph in an article */
article > p:first-of-type {
    font-weight: bold;
}

/* Add decorative first letter */
p::first-letter {
    font-size: 2em;
    float: left;
    padding: 4px;
    background-color: red;
}

CSS Media Queries

Apply styles conditionally based on device characteristics

/* Base styles first */
.container {
    width: 100%;
}

/* Then conditional styles for larger screens */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Even larger screens */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Common mistakes:

• Contradictory conditions: @media (max-width: 600px) and (min-width: 800px)
• Invalid operators or values

Responsive Images

Techniques for making images adapt to different screen sizes:

/* Basic responsive image */
.responsive-image {
    max-width: 100%;
    height: auto;  /* NOT max-height: auto (invalid) */
}

HTML attributes for responsive images:

<img 
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
    src="fallback.jpg" 
    alt="Description"
>

Width and Height Constraints

Set boundaries for element sizing:

• min-width: Minimum width element can have
• max-width: Maximum width element can have
• min-height: Minimum height element can have
• max-height: Maximum height element can have

.box {
    width: 100px;     /* Preferred width */
    min-width: 150px; /* Overrides width if smaller */
    max-width: 200px; /* Maximum allowed width */
}

/* Result: The actual width will be 150px */

List Styling

Making horizontal navigation menus from lists:

.nav {
    display: flex;
    list-style: none;
    padding: 0;
}

.nav li {
    margin-right: 10px;
}

.nav li:hover {
    text-decoration: underline;
    cursor: pointer;
}

Result: A horizontal navigation menu with items underlined on hover

Common CSS Bugs & Issues

1. Invalid property values:
   • max-height: auto (invalid, should use height: auto)
2. Logical contradictions in media queries:
   • @media (max-width: 600px) and (min-width: 800px) (impossible condition)
3. Flexbox/grid misconceptions:
   • Using flex-direction: horizontal (invalid, should be row)
4. Accessibility issues:
   • Using non-semantic elements for interactive content
   • Improper heading hierarchy

Form Accessibility

Best practices for accessible forms:

<form>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
    </div>
    
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    
    <button type="submit">Submit</button>
</form>

Key points:

• Always associate labels with inputs using for and id
• Include name attributes for form submission
• Specify button types (type="submit", type="button")

Testing CSS Understanding

Don't just write code:

1. Analyze existing code to find issues
2. Predict the output of CSS & HTML code without running it
3. Explain CSS concepts and their purpose
4. Understand selector specificity and rule precedence
5. Visualize layout and positioning mentally

Common practice techniques:

• Manually trace through how CSS properties will interact
• Draw box model diagrams for complex layouts
• Mentally calculate specificity scores
• Predict which elements will match complex selectors

Resources for Learning

• Mozilla Developer Network (MDN): developer.mozilla.org
• CSS-Tricks: css-tricks.com
• web.dev: web.dev
• Flexbox Froggy: flexboxfroggy.com
• Grid Garden: cssgridgarden.com

Practice makes perfect! The best way to understand these concepts is to apply them in your own projects and analyze existing websites.