Quick Start Guide to HTML and CSS Fundamentals

HTTP Protocol Fundamentals

The HyperText Transfer Protocol operates as a request-response model between clients and servers on the application layer of the TCP/IP stack.

Protocol Characteristics

Connectionless: The server closes each connection after responding
Stateless: No client information is retained between requests
Request/Response Based: Every transaction follows a request followed by a response

URL Structure

A Uniform Resource Locator consists of: protocol://domain:port/path. For example: http://www.example.com:80/index.html

HTTP Request Format

GET / HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Referer: http://127.0.0.1:8000
Cookie: session_id=abc123

HTTP Response Format

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Wed, 26 Oct 2022 06:48:50 GMT
Server: Python/3.11
Content-Length: 1245
Set-Cookie: user_id=456

HTTP Methods

GET

Parameters appear in the URL after the question mark
Data is visible in the browser address bar
Limited data capacity typically under 1KB
No request body

POST

Data sent in the request body
Parameters not visible in the URL
No data size limitasion
Supports file uploads with enctype="multipart/form-data"

Status Codes

Code Range	Meaning
1xx	Informational - request received, continuing
2xx	Success - request successfully received
3xx	Redirection - further action needed
4xx	Client Error - bad request syntax
5xx	Server Eror - server failed to fulfill valid request

HTML Document Structure

HyperText Markup Language uses tags to structure content. The rendering order flows top-to-bottom and left-to-right.

Document Type Declaration

This declaration specifies standards mode rendering to avoid quirks mode behavior.

Document Head Section

The <head> section contains metadata and resource links:

    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="web development, programming">
    <meta name="description" content="Learn web development basics">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script src="script.js"></script>
</head>

Meta Tag Attributes

The http-equiv attribute simulates HTTP response headers:

<meta http-equiv="refresh" content="2;url=https://www.example.com">

Body Section Tags

Basic Formatting Tags

<h1> through <h6>: Headings with decreasing importance
<p>: Paragraph text
<strong>: Bold text for emphasis
<em>: Italic text for subtle emphasis
<br>: Line break
<hr>: Horizontal rule

List Elements

Unordered List:

    <li>First item</li>
    <li>Second item</li>
</ul>

Ordered List:

    <li>First item</li>
    <li>Second item</li>
</ol>

Table Structure

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>28</td>
            <td>Engineering</td>
        </tr>
        <tr>
            <td>Jane Doe</td>
            <td>31</td>
            <td>Marketing</td>
        </tr>
    </tbody>
</table>

Table attributes include border, cellspacing, cellpadding, rowspan, and colspan.

Form Elements

Forms enable user input collection and data submission. Each input element requires a name attribute for proper data submission.

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="birthdate">Birth Date:</label>
    <input type="date" id="birthdate" name="birthdate">
    
    <fieldset>
        <legend>Gender</legend>
        <input type="radio" name="gender" value="male" id="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" value="female" id="female">
        <label for="female">Female</label>
    </fieldset>
    
    <fieldset>
        <legend>Hobbies</legend>
        <input type="checkbox" name="hobbies" value="reading" id="reading" checked>
        <label for="reading">Reading</label>
        <input type="checkbox" name="hobbies" value="sports" id="sports">
        <label for="sports">Sports</label>
    </fieldset>
    
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>
    
    <label for="bio">Biography:</label>
    <textarea id="bio" name="bio" rows="4" cols="50"></textarea>
    
    <label for="avatar">Profile Image:</label>
    <input type="file" id="avatar" name="avatar">
    
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">Click Me</button>
</form>

Form attributes:

action: URL where form data is submitted
method: HTTP method (GET or POST)
enctype: Encoding type for file uploads

Tag Categories

Block-level Elements: Occupy full width, can contain other block and inline elements. Examples: <div>, <p>, <table>, <ul>

Inline Elements: Only occupy necessary space, cannot contain block elements. Examples: <span>, <a>, <strong>, <em>

CSS Fundamentals

Cascading Style Sheets control visual presentation. The syntax uses selectors with property-value pairs:

    property: value;
}

CSS Implementation Methods

Inline Styles

Embedded Styles

    p {
        color: blue;
        background-color: lightyellow;
    }
</style>

External Stylesheet

Import Directive

    @import "external.css";
</style>

Selector Types

Basic Selectors

Element Selector: p { }
Class Selector: .myclass { }
ID Selector: #myid { }
Universal Selector: * { }
Grouping Selector: h1, h2, h3 { }

Pseudo-class Selectors

a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

input:focus { background-color: #f0f0f0; }

div:hover p { background-color: green; }

Pseudo-element Selectors

    font-size: 2em;
    color: red;
}

p::before {
    content: "★ ";
    color: gold;
}

p::after {
    content: " [End]";
    color: gray;
}

Text Properties

color: Sets text color using hex, rgb(), or color names
font-family: Specifies fonts in priority order
font-size: Sets text size
font-weight: Controls boldness (100-900, normal, bold)
font-style: Sets italic (normal, italic, oblique)
text-align: Horizontal alignment (left, right, center, justify)
line-height: Sets vertical line spacing
vertical-align: Aligns inline elements
text-decoration: Adds underlines, overlines, line-through
text-transform:-capitalize, uppercase, lowercase
text-indent: First line indentation
letter-spacing: Character spacing
word-spacing: Word spacing

Background Properties

background-image: url("image.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Shorthand: background: lightblue url("image.png") no-repeat center center fixed;

Border Properties

border-style: solid;
border-color: black;

Shorthand: border: 2px solid black;

Border styles include: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Border radius: border-radius: 8px; creates rounded corners. Use 50% for circular elements.

List Properties

list-style-image: url("bullet.png");
list-style-position: inside;

Valid types: disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.

Display Properties

display: inline;        /* Inline behavior */
display: block;         /* Block behavior */
display: inline-block; /* Combined inline-block behavior */
display: flex;           /* Flexbox container */
display: grid;           /* Grid container */

Visibility difference:

visibility: hidden: Hides element but preserves space
display: none: Removes element entirely

CSS Box Model

The box model consists of:

Content: Text and images
Padding: Space between content and border
Border: Edge surrounding padding
Margin: Space between elements

padding: 10px;
margin: 20px;

Margin collapse: Vertical margins between adjacent elements combine into the larger value.

Parent-child margin collapse: Child margins may merge with parent margins unless parent has padding, border, or overflow set.

Float and Positioning

Float Property

Float removes elements from normal document flow:

float: right;
float: none;

Clearing floats with the clearfix technique:

    content: "";
    display: block;
    clear: both;
}

Alternative solutions for parent container collapse:

Set explicit height on parent
Use overflow: hidden on parent
Add empty clearing element

Positioning Schemes

Static Positioning

Default positioning, elements flow normally.

Relative Positioning

top: 10px;
left: 20px;

Element remains in document flow but shifted from original position. Serves as positioning reference for absolutely positioned children.

Absolute Positioning

top: 50px;
right: 30px;

Removed from document flow, positioned relative to nearest positioned ancestor. Uses body if no ancestor is positioned.

Fixed Positioning

bottom: 10px;
right: 10px;

Positioned relative to viewport, does not scroll with page.

Z-index Property

Controls stacking order when elements overlap:

Higher values appear in front of lower values. Only works on positioned elements, not static elements. Child elements inherit parent z-index values.

Tags: html css HTTP web development frontend

Posted on Fri, 10 Jul 2026 16:20:20 +0000 by RussellReal

Freaks City