Key Concepts
- 1What are the four parts of the CSS Box Model, from inside to outside?
- 2What are the three ways to apply CSS to an HTML page? Which is preferred and why?
- 3What is the difference between CSS class selector and id selector? How are they written?
Important Formulas & Facts
1. Content — the actual text/image area. 2. Padding — transparent space between content and border. 3. Border — line around padding and content. 4. Margin — transparent space outside the border, separating element from others. Total width = content + padding + border + margin.
Inline CSS: style attribute on element (highest priority, hard to maintain). Internal CSS: <style> tag in <head> (affects one page). External CSS: separate .css file linked with <link> tag (preferred — one file styles multiple pages, reusable, maintainable, browser can cache it).
Class selector uses a dot: .myClass { } — can be applied to multiple elements (class='myClass'). ID selector uses a hash: #myId { } — must be unique, applied to only one element (id='myId'). ID has higher specificity than class. Use classes for reusable styles, IDs for unique elements.
Must-Know Questions
Q1Which type of CSS is written directly within an HTML element using the 'style' attribute?
Inline CSS is applied directly to individual HTML elements using the style attribute. Example: <p style='color: red; font-size: 16px;'>Hello</p>. While easy to apply, inline CSS mixes content with presentation and is hard to maintain across large websites.
Q2Which CSS selector is used to select an element with a specific id?
In CSS, the id selector uses a hash (#) symbol followed by the id name to target a specific element. Example: #header { color: blue; }. An id should be unique within a page. Class selectors use a dot (.) and can be applied to multiple elements.
Q3What is the CSS Box Model?
The CSS Box Model describes how every HTML element is surrounded by a series of boxes. From inside to outside: (1) Content: The actual content (text, images). (2) Padding: Space between content and the border; transparent. (3) Border: A line around the padding and content. (4) Margin: Space outside the border, separating the element from others. Total width = content width + left padding + right padding + left border + right border + left margin + right margin.
Q4How is external CSS linked to an HTML document?
External CSS is linked using the <link> tag placed inside the <head> section of the HTML document. The syntax is: <link rel='stylesheet' type='text/css' href='styles.css'>. The 'href' attribute specifies the path to the CSS file. External CSS is the most efficient method as one CSS file can control the style of multiple HTML pages.
Q5Which CSS property is used to add space inside an element, between the content and the border?
The 'padding' property adds space inside an element, between the content and its border. In contrast, 'margin' adds space outside the element's border. Example: div { padding: 20px; } adds 20 pixels of space inside the div on all four sides.
Practice CSS
Reinforce what you just revised with practice questions