Maharashtra HSC IT Commerce: Impressive Web Designing (HTML and CSS)

Impressive Web Designing examines HTML for structure and CSS for presentation. You must write correct tag sequences, choose the right CSS attachment method, and predict which style wins when rules conflict.

Core rules and concepts

• <!DOCTYPE html> declares HTML5; <html>, <head> and <body> form the basic document skeleton.
• Block elements (<h1>, <p>, <div>, <ul>) start on a new line; inline elements (<span>, <b>, <a>, <img>) do not.
• <img> needs src and alt; <a href='...'> creates links; forms use <form>, <input>, <select> and <textarea>.
• CSS may be inline (a style attribute), internal (a <style> block in the head) or external (a .css file linked with <link rel='stylesheet'>).
• Selectors: element p, class .note, id #intro. Specificity order: inline > id > class > element.
• The box model is content, padding, border and margin, in that order outward.

Worked example

Given p { color: red; }, .note { color: green; } and #intro { color: blue; }, what colour is <p id='intro' class='note'>? The element matches all three rules. No inline style exists, so compare specificity: id (1,0,0) beats class (0,1,0) and element (0,0,1). Blue wins. If two rules had equal specificity, the later one in source order would win.

Traps that cost marks

• Reusing the same id on multiple elements; ids must be unique, classes may repeat.
• Omitting alt text or forgetting closing tags for non-void elements.
• Putting <link> inside <body>, or using src instead of href for a stylesheet.
• Assuming a class rule beats an id rule.
• Confusing margin (outside the border) with padding (inside it).