HTML

What are <div> and <span> elements used for?

Styling purposes

What are the two types of elements?

Block-level elements. Inline-level elements

What is a block level element?

Elements that begin on a new line stack on top of each other and occupy any available width e.g. <p>

What is an inline level element?

Elements that do not begin on a new line. Fall into the flow of the document line up one after another and only maintain the width of their content

What is used for html comments?

<!-- - - >

What is used for css comments?

/* */

What tag is used for paragraphs?

<p>

What two tags can you use to make text bold?

<strong> <b>

Difference between <strong> and <b>

<strong> used for text that’s important and <b> is to draw attention to text without indicating its important

What does CSS stand for?

Cascading style sheets

What is a self-closing element?

An elemeny that does not need a closing tag

What does a tyoe selector target?

Targets elements by the element type

What is a class selector and what notation does it use

Select an element based on the element’s class attribute value (.)

What is an id selector and what notation does it use

Select an element based on the element’s id attribute value (#)

How is text italicised?

<em> element

Is <em> an inline-element or block-level element?

Inline-level element

When do you use the <em> element and when do you use the <i> element?

<em> used to place stress on a text <i> used to convey text in an alternative tone

When should you use <article> <section> or <div>

<div> for if the content is grouped for only styling purposes. <article> if content adds to the document and if removed from the page and moved elsewhere it still should make sense. <section> if the content adds to the document and represents a thematic group of content

What is the <aside> element used for?

Holds content that’s a side bar or brief explanation

What is cross-browser compatibility?

When a website looks the same/similar on different browsers as different browsers render elements in different ways

What is a relative path?

Links pointing to other pages of the same website which does not include a domain (.org .com .edu)

What is an absolute path?

Where the link includes the full domain (http:// and .com .org etc)

How to code a website to open a link in a new page?

Add target=”_blank” after the href link

If two conflicting selections e.g. backgroud green or orange are in two different selectors which one remains?

The colour in the first selector as that takes precedence

If two conflicting selections e.g. backgroud green or orange are in the same selector which one remains?

The last one mentioned

Specificity weight of a type selector

0-0-1

Specificity weight of a class selector

0-1-0

Specificity weight of an id selector

1-0-0

Name the 3 selectors in descending order of specificity

Id selector. Class selector. Type selector

The higher the … weight of a selector the more … the selector is given when a styling conflict occurs

Specificity. Priority

What is a key selector?

Selector farthest from the right directly before the curly bracket

What does the key selector do?

Identifies which element the style will be applied to

What is a prequalifier?

Any selector to the left of a key selector

The … the specifity weights the … likely the cascade is to break

Higher. More

How can you keep the specificity weight of your selectors low?

Layering styles where you tie styles you want to reuse to one class and can layer on styles from another class

How do you select an rgb colour in CSS?

rgb() function

How do you select an rgb colour that you want to control the transparency of in CSS?

rgba() wherea 4th value is needed and is between 1 and 0

What does HSL stand for?

Hue Saturation Lightness

What are absolute lengths?

Simplest length values as they are fixed to a physical measurement e.g. inches e.g. pixels px

What is a pixel equal to in inches?

1/96th of an inch

What is a relative length?

Units of measurements that rely on the length of another measurement e.g. percentages

What are the common values for the display property?

Block. Inline. Inline block

What does the inline-block value do?

Allows an element to behave as a block-level element allowing it to accept all box model properties. Howerever it is displayed in line with other elements

Do inline block elements have a small space between them?

Yes

What does none do?

Hides and element and the elements nested within it

What is the box model?

Every element on a page is a rectangular box and may have width height borders and margins

How is the total width of an element calculated?

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

How is the total height of an element calculated?

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin bottom

Do inline-level elements use the height and width properties?

No

What does the margin property do?

Allows to set the amount of space that surrounds an element. It falls outside of the border

What does the padding property do?

Allows to set the amount of space that surrounds an element. It falls inside of the border

Does the margin property work vertically on inline-level elements?

No

Does the padding property work vertically on inline-level elements?

Yes

What does the border-radius property do?

Identifies the radius by which the corners of an element are to be rounded

What does the box-sizing property do?

Allows how the box-model works to be changed and how an element’s size is calculated

What does content-box do?

Default value. Leaves box-model as an additive design

What does the padding-box value do?

Alters the box model by including padding property values within the width and height of an element

Should you use the padding-box value?

No

What is the border-box value?

Alters box model so that any border or padding property values are included within the width and height of an element.

Do margins fall under the border-box value?

No

Possible drawback of using the box-sizing property?

Isn’t supported in every browser especially older versions

How to see the Developers Tools in Google Chrome?

“View“ within the menu bar. “Developer”. “Developer’s Tools”

What does the float property do?

Allows us to take an element and remove it from the normal flow of a page to position it to the left or right of its parent element

What do floats do to an elements display value?

Will change any non-block elements into block ones which allows them to take a height and width value

What does clear:left do?

Ensures content is under any items that are already n the left making it left on a new line

What does clear:both do?

Moves the element down under any elements that are floated to either the left or the right

what does .group:before, .group:after do? (containing floats/clearfix)

Pseudo elements created before and after. They contain no content. The pseudo elements clears the floats

Why do you clearfix elements rather than just clear:both?

Prevents layout problems

How to remove spaces between inline-block element? (2)

Put a new <section> elementy opening on the same line as the previous’ <section> closing tag. Open a HTML comment directly after an inline-block closing tag close comment before next opening tag

What is the fundamental role of forms on the Internet?

Forms provide an essential mechanism for websites to capture user input and process requests, offering interactive controls for nearly every application use case.

What scale of information can forms request from users?

Forms can request a small amount of information (such as search queries or usernames/passwords) or a large amount (such as shipping/billing information or job applications).

What is the main objective of form markup in web design?

The process focuses on using HTML to mark up forms, choosing elements to capture different data types, and styling forms with CSS, excluding deep back-end form processing.

What is the purpose of the `<form>` element in HTML?

The `<form>` element identifies where on the page control elements will appear and wraps all form elements together, acting much like a `<div>` container.

What does the `action` attribute on the `<form>` element do?

The `action` attribute specifies the URL to which information included within the form will be sent for server processing.

What does the `method` attribute on the `<form>` element define?

The `method` attribute specifies the HTTP method (such as GET or POST) browsers should use to submit the form data to the server.

Which elements are used for gathering text-based data in forms?

Text fields and textareas are specifically used for collecting text- or string-based data, including passwords, telephone numbers, and text passages.

What is the primary element used to obtain single-line text from users?

The `<input>` element is a primary element used to obtain single-line text input.

How does the `type` attribute function within an `<input>` element?

The `type` attribute defines what type of information is to be captured within the control, with `text` being the most popular value for single-line inputs.

Why is it considered a best practice to include a `name` attribute on `<input>` elements?

The `name` attribute value serves as the control's name and is submitted alongside the user's input data to the server so the back end can identify the field.

Is the `<input>` element self-contained?

Yes, the `<input>` element is self-contained, meaning it uses only a single tag, does not wrap any other content, and relies entirely on its attributes for its value.

What triggered the introduction of new input types in HTML5?

HTML5 introduced new type values to provide clearer semantic meaning for inputs and to deliver better user controls across devices.

How do browsers handle unrecognized HTML5 input types?

If a browser does not understand an HTML5 input type value, it automatically falls back to the standard `text` attribute value.

What are some examples of new HTML5 input types?

Examples include color, date, datetime, email, month, number, range, search, tel, time, url, and week.

How does the `<textarea>` element differ from `<input>`?

The `<textarea>` element accepts larger passages of text spanning multiple lines and features both opening and closing tags that wrap plain text.

What sizing attributes are available for the `<textarea>` element?

It has `cols` for width in average character width and `rows` for height in number of visible lines of text, though CSS width and height are more commonly used.

What is the primary characteristic of radio buttons?

Radio buttons allow users to make a quick choice from a small list, permitting only one option to be selected at a time rather than multiple.

How do radio buttons in the same group link together?

Each radio button element in a group must share the exact same `name` attribute value so the browser knows they belong together.

How is a specific choice value defined for a radio button?

Since users do not type free text into radio buttons, developers use the `value` attribute to define a specific value for each `<input>` element.

What does the Boolean attribute `checked` do for radio buttons and check boxes?

The `checked` attribute can be added to preselect a specific option for users when the page loads.

How do check boxes differ from radio buttons in functionality?

Check boxes use the type value `checkbox` and allow users to select multiple values and tie them all to one control name.

Why are drop-down lists preferred over long columns of radio buttons?

Long columns of radio buttons are visually unappealing, daunting, and difficult for users (especially on mobile devices), whereas drop-down lists provide a compact, practical format.

Which elements are used to create a drop-down list in HTML?

Drop-down lists use the `<select>` element to wrap the menu and individual `<option>` elements for each choice.

Where do the `name` and `value` attributes reside in a drop-down list?

The `name` attribute resides on the wrapping `<select>` element, while the `value` attributes reside on each nested `<option>` element corresponding to that select name.

What does the Boolean attribute `multiple` do on a `<select>` element?

When added to a drop-down list, `multiple` allows a user to choose more than one option from the list at a time.

How is a standard submit input created in HTML?

A submit button is created using an `<input>` element with a `type="submit"` attribute, where the `value` attribute specifies the text displayed inside the button.

How does the `<button>` element compare to `<input type="submit">`?

The `<button>` element performs the same function as a submit input but includes opening and closing tags that can wrap rich HTML elements (like strong tags).

What is the purpose of hidden inputs in forms?

Hidden inputs (`type="hidden"`) pass data—such as tracking codes or keys—to the server without displaying it on the page to users.

What is the function of the `<label>` element?

Labels provide captions or headings for form controls, unambiguously tying them together to create an accessible form for users and assistive technologies.

How do the `for` and `id` attributes connect a label to an input?

The `for` attribute value on the label must match the `id` attribute value on the form control, allowing users to click the label to bring focus to the control.

What is the purpose of the `<fieldset>` and `<legend>` elements?

Fieldsets group related form controls into organized sections with a border outline, while legends provide a descriptive caption for that fieldset.