Full-Stack Development Fundamentals

Chapter 8: HTML and CSS Basics

8.1 HTML Elements

HTML elements are the building blocks of web pages. Understanding essential elements is crucial for creating well-structured content.

Text Elements:

• <h1> to <h6>: Headings (h1 is most important, h6 least)
• <p>: Paragraphs for text content
• <strong>: Important text (bold)
• <em>: Emphasized text (italic)
• <span>: Inline container for styling

Structural Elements:

• <div>: Generic container block element
• <section>: Thematic grouping of content
• <article>: Independent, self-contained content
• <header>: Header section
• <footer>: Footer section
• <nav>: Navigation links
• <aside>: Sidebar content

Media Elements:

• <img>: Images (always include alt attribute)
• <video>: Video content
• <audio>: Audio content

Form Elements:

• <form>: Form container
• <input>: Text, email, password, checkbox, radio inputs
• <textarea>: Multi-line text input
• <select>: Dropdown selection
• <button>: Clickable button
• <label>: Form field labels

List Elements:

• <ul>: Unordered list (bullets)
• <ol>: Ordered list (numbers)
• <li>: List items

8.2 CSS Selectors

CSS selectors target HTML elements for styling. Understanding different selector types helps you write efficient CSS.

Basic Selectors:

/* Element selector */
p { color: blue; }

/* Class selector */
.class-name { font-size: 16px; }

/* ID selector */
#id-name { background: red; }

/* Universal selector */
* { margin: 0; padding: 0; }

Combinator Selectors:

/* Descendant selector */
div p { color: red; }

/* Child selector */
div > p { color: blue; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: green; }

Attribute Selectors:

/* Has attribute */
[type] { border: 1px solid; }

/* Exact value */
[type="text"] { width: 200px; }

/* Contains value */
[class*="btn"] { padding: 10px; }

/* Starts with */
[href^="https"] { color: green; }

/* Ends with */
[src$=".jpg"] { border: 2px solid; }

Pseudo-classes:

/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* Form states */
input:focus { border: 2px solid blue; }
input:disabled { opacity: 0.5; }

/* Position selectors */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { color: red; }

Pseudo-elements:

/* Before and after content */
p::before { content: "→ "; }
p::after { content: " ←"; }

/* First line and letter */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }

8.3 CSS Properties

CSS properties control the appearance of elements.

Layout Properties:

• display: block, inline, flex, grid, none
• position: static, relative, absolute, fixed, sticky
• float: left, right, none
• clear: both, left, right

Box Model Properties:

• width, height: Element dimensions
• margin: Space outside element
• padding: Space inside element
• border: Border around element

Typography Properties:

• font-family: Font type
• font-size: Text size
• font-weight: Boldness (normal, bold, 100-900)
• line-height: Line spacing
• text-align: Text alignment
• color: Text color

8.4 Responsive Design

Responsive design ensures websites work on all device sizes.

Media Queries:

/* Mobile first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 1200px;
    }
}

Viewport Meta Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Flexible Units:

• %: Percentage of parent
• em: Relative to font size
• rem: Relative to root font size
• vw/vh: Viewport width/height