Web Page Design with HTML and CSS
What this domain tests
This domain tests static web-page construction and styling. Expect questions on document structure, common tags, links and images, tables, forms, CSS selectors, and the box model.
Core rules
- HTML structure: , , (metadata, , CSS links), and <body> (visible content).</li> <li>Headings are <h1> to <h6>; <p> is a paragraph; <br> breaks a line; <hr> draws a horizontal rule.</li> <li>Lists: <ul> unordered, <ol> ordered, <li> list item.</li> <li>Links use <a href="url">text</a>; images use <img src="file" alt="description">. href points to a destination; src points to a source file.</li> <li>Tables: <table>, <tr>, <th>, <td>. Forms: <form>, <input>, <label>, <select>, <textarea>, <button>.</li> <li>CSS can be inline (style attribute), internal (<style> in head), or external (linked .css file). External CSS is reusable across pages.</li> <li>Selectors: element (p), class (.note), id (#intro). An id is unique on a page; a class can repeat.</li> <li>Box model: content, padding, border, margin. Specificity: inline > id > class > element.</li> </ul> <h3>Worked example</h3> <p>Given <p class="note" id="intro">Hello</p>, rules p {color: black;}, .note {color: blue;}, and #intro {color: red;} all match. The id selector is most specific, so the text is red. If the id rule were removed, .note would win (blue). If both class and id were removed, the element rule would apply (black). Inline style would override all three unless a rule uses !important.</p> <h3>Traps</h3> <ul> <li>Confusing href (link destination) with src (embedded resource).</li> <li>Omitting alt text on images.</li> <li>Reusing an id on multiple elements.</li> <li>Forgetting semicolons between CSS declarations.</li> <li>Placing the external stylesheet link in the body instead of the head.</li> </ul>