Essential Web Development and Java Networking Concepts

Posted on Sep 30, 2026 in Computers

CSS Box Model Explained

Every HTML element is treated as a rectangular box made up of four layers, from inside out:

┌─────────────────────────────┐
│          MARGIN             │
│  ┌─────────────────────────┐ │
│  │        BORDER           │ │
│  │  ┌─────────────────────┐ │ │
│  │  │      PADDING        │ │ │
│  │  │  ┌─────────────────┐ │ │ │
│  │  │  │     CONTENT     │ │ │ │
│  │  │  └─────────────────┘ │ │ │
│  │  └─────────────────────┘ │ │
│  └─────────────────────────┘ │
└─────────────────────────────┘

Content: The actual text or image inside the element.
Padding: Transparent space between content and border.
Border: The line surrounding the padding.
Margin: Transparent space outside the border, separating it from other elements.

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

Total element width = content + left/right padding + left/right border + left/right margin.

box-sizing property: By default (content-box), width/height apply only to content. Setting box-sizing: border-box makes width/height include padding and border, which is standard for responsive design.

CSS Selectors Reference

Selector Type	Syntax	Example
Universal	`*`	`* { margin: 0; }`
Element	`tagname`	`p { color: blue; }`
Class	`.classname`	`.highlight { background: yellow; }`
ID	`#idname`	`#header { font-size: 24px; }`
Descendant	`A B`	`div p { color: red; }`
Child	`A > B`	`div > p { color: green; }`
Adjacent Sibling	`A + B`	`h1 + p { margin-top: 0; }`
Attribute	`[attr=value]`	`input[type="text"] { border: 1px; }`
Group	`A, B`	`h1, h2 { font-family: Arial; }`
Pseudo-class	`:state`	`a:hover { color: red; }`

Pseudo-classes and Pseudo-elements

Pseudo-classes select elements based on their state or position (single colon :):

Pseudo-class	Description
`:hover`	Mouse hovers over element
`:focus`	Element gains focus
`:visited`	Visited links
`:first-child`	First child of parent
`:nth-child(n)`	Selects nth child

Pseudo-elements style a specific part of an element (double colon ::):

Pseudo-element	Description
`::before`	Insert content before element
`::after`	Insert content after element
`::first-letter`	Style first letter
`::first-line`	Style first line

CSS Positioning and Floating

Positioning (position property):

Value	Behavior
`static`	Default; normal document flow
`relative`	Relative to normal position
`absolute`	Relative to nearest positioned ancestor
`fixed`	Relative to browser viewport
`sticky`	Toggles between relative and fixed

Floating: The float property moves an element to the left or right, allowing text to wrap around it. Use clear to stop wrapping.

Webpage Layout with Flexbox

<div class="container" style="display:flex">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>

Flexbox is the modern standard for creating responsive layouts.

Advanced CSS Features

Grouping: h1, h2 { color: navy; }
Display: Controls rendering (block, inline, flex, grid).
Image Sprites: Combining multiple images into one file to reduce server requests.

Applying CSS to HTML

Inline: style attribute.
Internal: <style> block in <head>.
External: Linked .css file (recommended for performance).

AJAX Fundamentals

AJAX (Asynchronous JavaScript and XML) enables updating parts of a webpage without a full reload. It uses XMLHttpRequest or the fetch API to communicate with servers asynchronously.

JavaScript Essentials

Functions: Reusable code blocks (Declaration, Expression, Arrow functions).
DOM Manipulation: Methods like getElementById() and querySelector() allow dynamic page updates.
Event Handling: Responding to user actions via onclick or addEventListener().

Java Networking

InetAddress: Represents IP addresses. Use factory methods like getByName().
URL/URLConnection: Classes for accessing web resources.
Sockets: Socket and ServerSocket provide reliable TCP communication.
Datagrams: DatagramSocket provides faster, connectionless UDP communication.